Problem description
We asynchronously submit data from the input and checkbox in a form to the PHP server, which is processed and returned.
Where to show after submission:
Analysis of difficulties
Use the OnSubmit property of the from form to block the submission of the form
<form action= "http://www.baidu.com" onsubmit= "return Check ()" >
The return of the check function is false; The action blocks the submission of the form, implementing the purpose of not flushing the submitted data.
Gets the value of the option selected by the check box
CheckBox Label Section:
<input type= "checkbox" name= "checkbox" id= "Multi-choicea" value= "A" > Options a<br/> <input type= " CheckBox "Name=" checkbox "id=" Multi-choiceb "value=" B "> Options b<br/> <input type=" checkbox "Name=" CheckBox "id=" MULTI-CHOICEC "value=" C "> Options c<br/> <input type=" checkbox "name=" checkbox "Id=" multi-choiced "value=" D "> Options d<br/>
JavaScript Processing Section:
var str = document.getelementsbyname ("checkbox"); var answer = ""; for (var i=0;i<str.length;i++) {if (str[i].checked = = true) {answer + = Str[i].value;}} if (answer = = ") alert (' Please tick the answer, then submit '), else{//the user has checked the relevant answer, carries on the related processing var xmlhttp;
Use AJAX technology to interact with the background
var xmlhttp;xmlhttp = new XMLHttpRequest (), Xmlhttp.open ("POST", "function.php", true); Xmlhttp.setrequestheader (" Content-type "," application/x-www-form-urlencoded "); Xmlhttp.send (" qid= "+qid+" &answer= "+answer); Xmlhttp.onreadystatechange=function () { if (xmlhttp.readystate==4 && xmlhttp.status==200) { document.getElementById ("mydiv"). Innerhtml=xmlhttp.responsetext; } ;
Full Code front desk index.html
<!doctype html>
Backstage function.php<!doctype html>
Effect Display:
Example of using AJAX to submit post data