如何添加具有相同文本输入名称和单选按钮（html、php）的多个条目

Question

<form action="confirm.php" method="post" name="">
Hobby : <input type="text" name="f_hobby[]" value="" placeholder="Enter your Hobby"/>
Status : <input name="f_status[]" type="radio" value="1" /> ON <input name="f_status[]" type="radio" value="0" /> OFF  
<br>
Hobby : <input type="text" name="f_hobby[]" value="" placeholder="Enter your Hobby"/>
Status : <input name="f_status[]" type="radio" value="1" /> ON <input name="f_status[]" type="radio" value="0" /> OFF  
<br>
Hobby : <input type="text" name="f_hobby[]" value="" placeholder="Enter your Hobby"/>
Status : <input name="f_status[]" type="radio" value="1" /> ON <input name="f_status[]" type="radio" value="0" /> OFF  
<br>
<br>
<button type="submit" class="">Submit</button>
</form>

having problem with the radio buttons.

And on the confirm page I have used foreach loop. How do i also get the values for "f_status" ?

Answer 1

See first of all its an interesting question but unfortunately, the fact is HTML can't understand the field without different names if they are in same form.

so the only way to achieve your goal is to put all of them in three different form tags and then u can name all of the same ie f_hobby[]

Also, you need to add a single button to submit all three of them. To achieve this u can use onsubmit() or onclick() function.

<form action="confirm.php" method="post" name="" id="form1">
    Hobby : <input type="text" name="f_hobby[]" value="" placeholder="Enter your Hobby"/>
    Status : <input name="f_status[]" type="radio" value="1" /> ON <input name="f_status[]" type="radio" value="0" /> OFF 
</form> 
<form action="confirm.php" method="post" name="" id="form2">    
    Hobby : <input type="text" name="f_hobby[]" value="" placeholder="Enter your Hobby"/>
    Status : <input name="f_status[]" type="radio" value="1" /> ON <input name="f_status[]" type="radio" value="0" /> OFF  
</form>
<form action="confirm.php" method="post" name="" id="form3"> 
    Hobby : <input type="text" name="f_hobby[]" value="" placeholder="Enter your Hobby"/>
    Status : <input name="f_status[]" type="radio" value="1" /> ON <input name="f_status[]" type="radio" value="0" /> OFF  
</form> 
<button type="submit" class=""  onclick="submitForms()">Submit</button>

<script>
    submitForms = function(){
        document.getElementById("form1").submit();
        document.getElementById("form2").submit();
        document.getElementById("form3").submit();
        alert("gajab");
    }
</script>

I have given the forms an id to submit it using a single button, u can also use class instead. I am sure this will solve your problem.