表格 - 未转移到 PHP 的清单值

Question

I'm trying to populate the multiple selected choice from checklist into PHP. However, only the "Reading" choice is populating in the new window and not the other choices that I have selected. For example, I have selected "Painting & Travelling" but after I clicked submit, the value that showing is "Reading".Kindly advise how to fix this. Thanks in advance. I'm new to web development.

Javascript

function validate(){


   var x3=document.getElementById("hobbies");


   if (x3.value == "") 

   {
      alert("No blank values allowed")
      return false;
   }
   else
   {

      window.open('https://quiet-odyssey-258110.appspot.com/?hobbies[]='+x3.value+'','mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0');
}

Form

<form onsubmit="return validate()" method= "get">



<label>Hobbies : </label><br><br>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Reading"/>Reading<br/>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Painting"/>Painting<br/>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Traveling"/>Traveling<br/>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Baking"/>Baking<br/><br/>


  </div>

</form>

Answer 1

You need to fetch the values of checkbox one by one in loop:

<form onsubmit="return validate()" method= "get" name="demoForm">
<label>Hobbies : </label><br><br>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Reading"/>Reading<br/>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Painting"/>Painting<br/>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Traveling"/>Traveling<br/>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Baking"/>Baking<br/><br/>
<button type="submit">click</button>
</form>


<script type="text/javascript">
function validate(){
 var hobby = document.forms['demoForm'].elements[ 'hobbies[]' ];
 var len = hobby.length;
 var values="";

for (var i=0;i<len;i++) 
{
    if (hobby[i].checked) 
    {
        values += hobby[i].value+",";
    }
}
values = values.replace(/,\s*$/, "");
window.open('https://quiet-odyssey-258110.appspot.com/?hobbies[]='+values+'','mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0 ');
   }
   </script>

You can also fetch the values using $_GET['hobbies']

Answer 2

Please try the following:

<form onsubmit="return validate()" method= "get">
    <label>Hobbies : </label><br><br>
    <input type="checkbox" id="hobbies" name="hobbies[]" value="Reading" />Reading<br/>
    <input type="checkbox" id="hobbies" name="hobbies[]" value="Painting" />Painting<br/>
    <input type="checkbox" id="hobbies" name="hobbies[]" value="Traveling" />Traveling<br/>
    <input type="checkbox" id="hobbies" name="hobbies[]" value="Baking" />Baking<br/><br/>
    <input type="submit" value="Submit" />
</form>

<script type="text/javascript">
    function validate() {
      var x3 = document.getElementsByName("hobbies[]");
      var selectedVals = "";

      for(var i = 0; i < x3.length; i++) {
        if((x3[i].checked) && (x3[i].value != '')) {
            selectedVals += (selectedVals == '')?x3[i].value:','+x3[i].value;
          }
      }

      if(selectedVals == "") {
        alert("No blank values allowed")
        return false;
      }
      else {
        window.open('https://quiet-odyssey-258110.appspot.com/?hobbies[]='+selectedVals+'','mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0');
      }
    }
</script>

Hope this may help.

Answer 3

You set all elements with the same id id is unique attribute so whatever you select the javascript will always return the first element value on x3 you can do this if you only want to submit selected checkboxes

<script type="text/javascript">
    function validate() {
      var x3 = document.getElementsByName("hobbies[]");
      var values= "";

      for(var i = 0; i < x3.length; i++) {
        if(x3[i].checked) {
            if(x3[i].value==''){
                alert('No blank values allowed');
                return false;
            }
            else{
               values+= x3[i].value+',';
            }
        }
     }
     window.open('https://quiet-odyssey-258110.appspot.com/?hobbies[]='+values+'','mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0');
        }
    }