how to use js to submit the formdata which from the html page

StackOverflow https://stackoverflow.com/questions/20499608

  •  31-08-2022
  •  | 
  •  

Question

Here is my question:

I write a register.htm document with html. but when i try to use JS to return the data that people write to the current page. it doesn`t work. i fill in the form,and press the button"提交",but nothing return to my page. which code is wrong? what can i do with the code?

please help me to use the JS implement return all value(include:name、sex、initData) for this html document.

3Q for you help

and here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="注册" />
<title>注册</title>


<script type="text/javascript">
  var sumbit = function(){
    var name = document.getElementById("name").value;
    var sex = document.getElementById("sex").value;
    var form = document.getElementById("form1").value;
  }
</script>

<script type="text/javascript">
function initDate(year,month,day) {
<!--
            //每个月的初始天数
　　        MonDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
　　        //当前的年份
　　        var y = new Date().getFullYear();
　　        //当前的月份
　　        var m = new Date().getMonth()+1; //javascript月份为0-11
　　        //当前的天份
　　        var d = new Date().getDate();　    
            //以今年为准，向后50年，填充年份下拉框
　　        for (var i = y; i >(y-50); i--)
            {
　　            year.options.add(new Option(i,i));
            }
            //选中今年
            year.value=y;

　　        //填充月份下拉框
　　        for (var i = 1; i <= 12; i++)
            {
                month.options.add(new Option(i,i));
            }
            //选中当月
            month.value = m     
            //获得当月的初始化天数
            var n = MonDays[m-1];
            //如果为2月，天数加1
            if (m == 2 && isLeapYear(year.options[year.selectedIndex].value))
                  n++;
            //填充日期下拉框
            createDay(n,day); 
            //选中当日
            day.value = new Date().getDate();
　　    }
function change(year,month,day) //年月变化，改变日，当鼠标点击select时触发onclick事件从而调用此函数
　　    {
　　         var y = year.options[year.selectedIndex].value;                 

             //由于传递参数的是调用的this指针，
    　　     var m = month.options[month.selectedIndex].value;
    　　     //if (m == "" ){  clearOptions(day); return;}
    　　     var n = MonDays[m - 1];
    　　     if ( m ==2 && isLeapYear(y))
    　　     {
    　　         n++;
    　　     }
    　　     createDay(n,day)
　　    }
function createDay(n,day) //填充日期下拉框
　　    {
　　        //清空下拉框
    　　     clearOptions(day);
    　　     //几天，就写入几项
    　　     for(var i=1; i<=n; i++)
    　　     {
    　　        day.options.add(new Option(i,i));
    　　     }
　　    }
function clearOptions(ctl)//删除下拉框中的所有选项
　　    {
            for(var i=ctl.options.length-1; i>=0; i--)
            {
　　            ctl.remove(i);
　　         }
　　    }　
function isLeapYear(year)//判断是否闰年
　　    { 
　　        return( year%4==0 || (year0 ==0 && year%400 == 0));
　　    }
function onload() { 
          initDate(document.form1.select_year,document.form1.select_month,document.form1.select_day);
          //初始化出生日期下拉菜单内容
}//-->

</script>
            <style>
                 body{
                 font-family:"幼圆";
                 font-size:18px; 
            }
            </style> 
</head>




<body onload="onload()">

<center>
<table>
  <hr>
             <caption style="text-decoration:underline;font-weight:bold;color:#444693">
                  <h1>注册</h1>
             </caption>

           <tr><td>姓名：</td><td><input type="text" name="name" id="name"></td></tr>
           <tr><td>性别：</td><td><input type="radio" name="sex" id="sex" checked>男<input type="radio" name="sex" id="sex" checked>女</td></tr>
           <tr>
               <td align="right">出生日期：</td>
                 <td>
                 <form name="form1" id="form1">
                    <select name="select_year" onchange="change(this,document.form1.select_month, document.form1.select_day)">
                    </select>年
                    <select name="select_month" onchange="change(document.form1.select_year, this,document.form1.select_day)">
                    </select>月 
                    <select name="select_day"></select>日
                 </form>
                 </td>
           </tr>
</table>
            <input type="button" value="提交" onclick="sumbit();" />
</center>
</body>
</html>
Was it helpful?

Solution

I will start by making a few clarifications to the user, you should study how to work with javascript and jQuery, you cannot try to build up something and, if it's not working, ask here. This is a little help that could address you in a quite-right way.

Substitute your submit input with this:

<input type="submit" id="sendform" value="Send">

Then, PLEASE, add jQuery from CDN in the section of your page, then try this code (add what is missing, like code for name and sex...):

<script type="text/javascript">
$(document).ready(function() {
     $("#sendform").click(function() {
          var year = $("select[name=select_year]:selected").val();
          var month = $("select[name=select_month]:selected").val();
          var day = $("select[name=select_day]:selected").val();   
          $.get("page.php",{'year': year, 'month': month... })
          .done(function(msg) {
              alert("do whatever you want with the php response in "+msg);
          });       
     });
});
</script>

OTHER TIPS

First of all, you should consider fixing your code, for example, specifying the action and method in your form, for the sake of simplicity I'll just answer you how to submit the form(withouth jQuery):

Just change your submit function:

var sumbit = function(){
    var name = document.getElementById("name").value;
    var sex = document.getElementById("sex").value;
    document.getElementById("form1").submit(); //submit form
  }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top