How to Convert Data From multiple input fields to a single JSON object to further insert it into single mysql field

Question

I am working on a form where a user will Insert data about products. I have a mySql table with the name of products, which have 3 column ie id, product_name and attributes.

Now the problem is with the attributes, I want the user to be able to add their own attributes and their values like Size = 3inche and weight=12kgs etc.

I have designed a form which is below.

    <form action="" method="post">
        <table>
            <tr><td><label for="">Product Name</label></td><td><input type="text" name="p_name"></td></tr>

        <tr><td><label for="">Attribute</label></td><td><input type="text" name="attributes['attribute']"><br></td></tr>

        <tr><td><label for="">value</label></td><td><input type="text" name="attributes['value']"><br></td></tr>
        <tr><td><label for="">Attribute</label></td><td><input type="text" name="attributes['attribute']"><br></td></tr>

        <tr><td><label for="">value</label></td><td><input type="text" name="attributes['value']"><br></td></tr>
        <tr><td colspan="2" align="center" ><input type="submit" name="submit" value="Submit"></td></tr>



        </table>
    </form>

So basically what I want is that $_POST['attributes'] is to return an array of attributes which i should be able to convert to JSON object. The JSON object should be like {"'attribute'":"Size","'value'":"12" "'attribute'":"Weight","'value'":"10"} .

After that I will insert that data in JSON format to the field attributes of the mysql table. I have tried many ways but I am able to retrieve only one attribute, which is entered at last.

Can I get some help?

Answer 1

Though the desired data can be formed here too but, I have coded as per the current request,

here is the code :

html

<form   action="" method="post">
    <table>
        <tr><td><label for="">Product Name</label></td><td><input type="text" name="p_name"></td></tr>

    <tr><td><label for="">Attribute</label></td><td><input type="text" name="attributes['attribute']"><br></td></tr>

    <tr><td><label for="">value</label></td><td><input type="text" name="attributes['value']"><br></td></tr>
    <tr><td><label for="">Attribute</label></td><td><input type="text" name="attributes['attribute']"><br></td></tr>

    <tr><td><label for="">value</label></td><td><input type="text" name="attributes['value']"><br></td></tr>
    <tr><td colspan="2" align="center" ><input type="submit" name="submits"   value="Submit"></td></tr>



    </table>
</form>

Just change submit button name to submits ie: name="submits"

have added jquery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<script>
$("[name='submits']").click((e)=>{
    e.preventDefault();
$("input[type='text']").map(d=>{
    if($($("input[type='text']")[d]).prop('name')!='p_name'){
        $($("input[type='text']")[d]).prop('name',`attributes[${$($("input[type='text']")[d]).val()}]` )
    }
})
$("form").submit();
})
</script>

at [d]).prop('name', attributes[${$($("input[type='text']")[d]).val()}] )

I have used template literal ie: "`" a backtick