Html 在表单字段中输入10个字符或数字后如何获取自动提交表单_Html_Forms

Html 在表单字段中输入10个字符或数字后如何获取自动提交表单

html forms

Html 在表单字段中输入10个字符或数字后如何获取自动提交表单,html,forms,Html,Forms,在此表单中，用户将输入10个数字或字符，然后单击submit以获得结果但我想让用户在不点击提交的情况下输入第10个字符或数字时得到结果请帮帮我编辑后这是我的全部代码。。。如果我删除了表，它正在工作，但使用此代码它不工作，请帮助我在输入时对keyup编写回调，检查值的长度是否为10，提交表单 This is my code <!DOCTYPE html> <html> <head> <meta http-equiv="content-

在此表单中，用户将输入10个数字或字符，然后单击submit以获得结果

但我想让用户在不点击提交的情况下输入第10个字符或数字时得到结果

请帮帮我

编辑后

这是我的全部代码。。。如果我删除了表，它正在工作，但使用此代码它不工作，请帮助我

在输入时对keyup编写回调，检查值的长度是否为10，提交表单

This is my code



 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">

 <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>

 <link rel="stylesheet" type="text/css" href="/css/normalize.css">
 <link rel="stylesheet" type="text/css" href="/css/result-light.css">

<style type='text/css'>


</style>
<html>
<script type="text/javascript" src="http://widgets.amung.us/tab.js"></script><script type="text/javascript">WAU_tab('itd362bk84w5', '')</script>
</html><title>EngineersHub Results Portal-It's OU & JNTU Here-Powered by Sparcsis</title>
<head background="hmm.png" id="header">
<center><img src="hmm.png" width="920" height="180"></img></center>
<link rel="stylesheet" href="ress1.css" media="screen" type="text/css" />
<style type="text/css">
.alignCenter{text-align: center;}
.alignLeft{text-align: left;}
.alignRight{text-align: right;}
.alignTopLeft{text-align: left; vertical-align: top;}
.alignBottomLeft{text-align: left; vertical-align: bottom;}

</style>




<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){


});//]]>  

</script>


</head>
<body>
<body background="hmm.png">
          </td></tr></td></br>
<center><table id='mytable' cellspacing='0'  border=3 align=center>

<form id="form" action="" method="post" name="result" style="align:center;">
<tr><td><p align="center"><font size="3"><b>JNTUH - B.Tech IV Year II Semester (R07) Advance Supplementary Results - July 2012</b></font></p></td></tr>
<tr><td><p align="center"><b>Last Date for RC/RV : 8th August 2012</b></p></td></tr>
<td><p align="center">Hall Ticket No :</b> <input type="text" name="id" id="id" maxlength="10" autofocus="autofocus" "></p></td>


<tr>    <td align="center" colspan="3">
<script type="text/javascript">
(function (d) {
d.getElementById('form').onsubmit = function () {
d.getElementById('submit').style.display = 'block';
d.getElementById('loading2').style.display = 'block';
};
}(document));
</script>

<div id="loading2" style="display:none;"><img src="loading.gif" width="50" height="50" alt="" /></br><font color="black">Processing...All the Best</font> </div>
<input type="submit" id="submit" class='btnExample' value="Click here to get your Result">   </td></tr>
</form></br>
</table></center>

<script>
$("#id").keyup(function(){
     if($(this).val().length == 10)
        $('#form :submit').click();
})
</script>


</body>


</html>

在输入的keyup上写一个回调，检查值的长度是否为10，提交表单

This is my code



 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">

 <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>

 <link rel="stylesheet" type="text/css" href="/css/normalize.css">
 <link rel="stylesheet" type="text/css" href="/css/result-light.css">

<style type='text/css'>


</style>
<html>
<script type="text/javascript" src="http://widgets.amung.us/tab.js"></script><script type="text/javascript">WAU_tab('itd362bk84w5', '')</script>
</html><title>EngineersHub Results Portal-It's OU & JNTU Here-Powered by Sparcsis</title>
<head background="hmm.png" id="header">
<center><img src="hmm.png" width="920" height="180"></img></center>
<link rel="stylesheet" href="ress1.css" media="screen" type="text/css" />
<style type="text/css">
.alignCenter{text-align: center;}
.alignLeft{text-align: left;}
.alignRight{text-align: right;}
.alignTopLeft{text-align: left; vertical-align: top;}
.alignBottomLeft{text-align: left; vertical-align: bottom;}

</style>




<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){


});//]]>  

</script>


</head>
<body>
<body background="hmm.png">
          </td></tr></td></br>
<center><table id='mytable' cellspacing='0'  border=3 align=center>

<form id="form" action="" method="post" name="result" style="align:center;">
<tr><td><p align="center"><font size="3"><b>JNTUH - B.Tech IV Year II Semester (R07) Advance Supplementary Results - July 2012</b></font></p></td></tr>
<tr><td><p align="center"><b>Last Date for RC/RV : 8th August 2012</b></p></td></tr>
<td><p align="center">Hall Ticket No :</b> <input type="text" name="id" id="id" maxlength="10" autofocus="autofocus" "></p></td>


<tr>    <td align="center" colspan="3">
<script type="text/javascript">
(function (d) {
d.getElementById('form').onsubmit = function () {
d.getElementById('submit').style.display = 'block';
d.getElementById('loading2').style.display = 'block';
};
}(document));
</script>

<div id="loading2" style="display:none;"><img src="loading.gif" width="50" height="50" alt="" /></br><font color="black">Processing...All the Best</font> </div>
<input type="submit" id="submit" class='btnExample' value="Click here to get your Result">   </td></tr>
</form></br>
</table></center>

<script>
$("#id").keyup(function(){
     if($(this).val().length == 10)
        $('#form :submit').click();
})
</script>


</body>


</html>

我认为将JavaScript与jQuery结合使用将解决这个问题。如果将Javascript按键事件处理程序附加到标记，并使用它来计算输入的字符数。当计数达到10时，您可以使用JavaScript再次提交表单

祝你好运。

听起来像是jQuery的工作。使用它就这么简单：

<form id="form" action="#" method="post" name="result" style="align:center;">
    <td>
        <p align="center">Hall Ticket No :</p>
         <input type="text" name="id" id="input_field" maxlength="10" autofocus="autofocus" />
    </td>
    <td>
        <input type="submit" id="submit" class='btnExample' value="Click here to get your Result">
    </td>
</form>

<script>
    $("#input_field").keyup(function(){
         if($(this).val().length == 10)
            $('#form :submit').click();
    })
</script>

当然，您可能希望触发ajax请求，而不是提交，

但这取决于你……

听起来像是jQuery的工作。使用它就这么简单：

<form id="form" action="#" method="post" name="result" style="align:center;">
    <td>
        <p align="center">Hall Ticket No :</p>
         <input type="text" name="id" id="input_field" maxlength="10" autofocus="autofocus" />
    </td>
    <td>
        <input type="submit" id="submit" class='btnExample' value="Click here to get your Result">
    </td>
</form>

<script>
    $("#input_field").keyup(function(){
         if($(this).val().length == 10)
            $('#form :submit').click();
    })
</script>

当然，您可能希望触发ajax请求，而不是提交，

但这取决于你……

我不太擅长编码，如果你不介意的话，请你给我编码好吗please@RajatSinghal我已经编辑了我的问题，请您检查一下，然后给我一个您不能使用的解决方案。提交，如果您在表单中有按钮类型提交..使用$'form:submit'。单击；正如我在我的代码中使用的那样..@RajatSinghal没有在我的页面中使用它的nt wrking，但是在fiddle中使用它，你能用php检查一下吗extension@RajatSinghal我已经编辑了我的代码并发布了整个代码，我无法理解哪里出错了。。请帮助我，朋友我不太擅长编码，如果你不介意的话，请你给我编码好吗please@RajatSinghal我已经编辑了我的问题，请您检查一下，然后给我一个您不能使用的解决方案。提交，如果您在表单中有按钮类型提交..使用$'form:submit'。单击；正如我在我的代码中使用的那样..@RajatSinghal没有在我的页面中使用它的nt wrking，但是在fiddle中使用它，你能用php检查一下吗extension@RajatSinghal我已经编辑了我的代码并发布了整个代码，我无法理解哪里出错了。。请帮助我，朋友