自动提交表单js

【问题标题】：automatic submit form js自动提交表单js
【发布时间】：2012-11-29 16:34:47
【问题描述】：

我正在尝试自动提交一个表单，（它下面只有表单，它用一段时间包裹{}，以便显示每个数据库条目）。 它适用于一周中的所有日子，但如果没有像 onfocus() 这样的 js 事件，我无法提交 $totalhours、$holidayhours、$wagegross 的值。

基本上我想提交这 3 个输入，而无需单击或任何其他手动操作。

有什么想法吗？

<form id="weeklysheet" name="weeklysheet" method="post" action="hourly-function.php">
            <tbody>

                <tr style="line-height:0px;">
                    <td class="large">
                        <p class="employee_name"><?php echo  $fullname?></p>
                    </td>
                    <td class="small">
                        <input name="mon" id="mon" type="text" class="days_input" value="<?php echo $data['mon'];?>"onchange="this.form.submit();"/>
                    </td>                   
                    <td class="small">
                        <input name="tue" id="tue" type="text" class="days_input" value="<?php echo $data['tue'];?>"onchange="this.form.submit();"/>
                    </td>
                    <td class="small">
                        <input name="wed" id="wed" type="text" class="days_input" value="<?php echo $data['wed'];?>"onchange="this.form.submit();"/>
                    </td>
                    <td class="small">
                        <input name="thu" id="thu" type="text" class="days_input" value="<?php echo $data['thu'];?>"onchange="this.form.submit();"/>
                    </td>
                    <td class="small">
                        <input name="fri" id="fri" type="text" class="days_input" value="<?php echo $data['fri'];?>"onchange="this.form.submit();"/>
                    </td>
                    <td class="small">
                        <input name="sat" id="sat" type="text" class="days_input" value="<?php echo $data['sat'];?>"onchange="this.form.submit();"/>
                    </td>
                    <td class="small">
                        <input name="sun" id="sun" type="text" class="days_input" value="<?php echo $data['sun'];?>"onchange="this.form.submit();"/>
                    </td >  
                    <td class="small">
                        <input name="totalhours" id="totalhours" type="text" class="cumul_week_input" value="<?php echo $totalhours ?>"onfocus="this.form.submit();"/>
                    </td>
                    <td class="small">
                        <input name="holidayhours" type="text" class="cumul_week_input" value="<?php echo $holidayhours ?>"onfocus="this.form.submit();"/>
                    </td>
                    <td class="small">
                        <input name="wagegross" type="text" class="cumul_week_input" value="<?php echo $wagegross ?>"onfocus="this.form.submit();"/>
                    </td>
                    <td>
                    <input type="submit"name="save" id="save" value="Confirm" style="display:none;" />
                </tr>
            </tbody>
        </form>

【问题讨论】：

  • keydown、keyup、keypress 事件

标签： php javascript html forms submit


【解决方案1】：

您可以在文档加载后使用jQuery 到trigger 提交按钮的点击操作，如下所示：

1.)你可以从Google's Hosted Libraries链接jQuery库：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

或者，download it from jQuery.com，比如说一个“js”文件夹，并包含它

<script src="js/jQuery.js"></script>

2.) 将此脚本标记放在&lt;/form&gt; 标记下方：

<script type="text/javascript">
    $(document).ready(function(){ //When the document is done loading
        $("input#save").trigger('click'); //"Click" on the input button with an ID of "save"
    });
</script>

或者你可以使用纯 javascript 方式 没有 jQuery，像这样：

<html>
    <body onLoad="submitform()">
        <form id="weeklysheet" name="weeklysheet" method="post" action="hourly-function.php">

然后把这个脚本标签放在&lt;/form&gt;标签下面：

<script type="text/javascript">
    function submitform()
    {
      document.weeklysheet.submit();
    }
</script>

或者，缩短上述方法：

<html>
    <body onLoad="Javascript: document.weeklysheet.submit();">
        <form id="weeklysheet" name="weeklysheet" method="post" action="hourly-function.php">

【讨论】：

  • 好的，非常感谢您的快速回答！在发布之前，我已经完成了您在没有 jQuery 的情况下建议的操作，现在尝试使用 jQuery。但两者都以连续提交表单而告终。提交后如何停止？
  • 尝试
  • 只是好奇，return false 成功了吗？不太清楚为什么它会持续发送，onLoad 应该只触发一次。
  • 对不起，我之前没有看到你的评论...没有运气返回 false；实际上 onload() 一次都没有。但就像我说的，我的问题出在我的 php 代码中。为了成名，我遇到了所有麻烦，我会在它正常工作后尽快发布所做的事情。
【解决方案2】：

您是要单独提交还是一次性提交？如果您想一次完成所有操作，可以给最后一个元素一个 id 并在 jquery 中使用 $('#div').moueleave

【讨论】：

  • OP 已声明他/她希望“无需点击或任何其他手动操作”即可执行此操作。如果您看到输入值，它们都来自 PHP - 页面加载时这些值已经存在。
  • 正确。我希望他们一起提交而不需要手动操作。第一个使用 jQuery 的解决方案可以工作，但脚本会无限运行。自从我的帖子以来，我还没有对这个新问题进行太多研究。当然我直接使用了“return false”但没有成功。
  • 我的理论是，每次更改框的值时，代码都会运行。这有效地将事件变成了 onKeyUp。我认为不需要超时功能，因为没有循环。您可以删除所有事件，并在最后一个框更新后一次性触发请求。它无限运行的另一个原因可能是由于 PHP，我认为这可能是问题的很大一部分，因为您的 javascript 几乎没问题。您需要在调用 submit 之前在 getElement 语句 ("weeklysheet").value 末尾添加 .text/.value
  • 感谢马丁的建议。超时是在任何 days_input 发生 onchange 后尝试再次提交。但就像你说的没有循环。我为每个输入触发 onchange 的原因是因为表单不应该一次性完整归档，所以为了防止丢失，它会单独推送它们。此时推送 3 变量，但使用最后条目的值。我认为我真正的问题不存在。我需要回来更好地分析正在发生的事情，然后发布关于真正问题的帖子。谢谢大家的帮助。
【解决方案3】：

这就是我正在使用的 js，我尝试过超时提交并且它正在工作。 最后我的问题不存在，似乎当我提交表单时，3个php变量推送了前一个输入条目的值。

我不知道我的解释是否清楚...... 

     <script type="text/javascript">
    function submitform()
    {   
        //document.getElementById("weeklysheet");
        var form = document.getElementById("weeklysheet")
       form.submit();
    }
    function submit()
    {   
        if (document.getElementById("weeklysheet")) {
            setTimeout("submitform()", 5000); // set timout

       }
       return false;
    }
</script>

【讨论】：

    【解决方案4】：

    （对不起，如果这是一个很长的解释） 我会带着我的解决方案回来......以防万一这可以帮助任何人。

    所以我们的想法是创建一个显示员工列表的表格，您可以在其中输入工作天数、假期和病假。然后根据工资频率（即每周、每周 4 或每月）计算每个的总和并计算总和。 因为用户不会一次完成所有表单，所以我需要在本周的所有时间自动提交所有输入。

    这是 JS：

    <script type="text/javascript">
function grab<?=$empnum?>(){

// Monday
var mon<?=$empnum?> = document.getElementById('mon<?=$empnum?>').value;
if ((mon<?=$empnum?> == "h" || mon<?=$empnum?> == "H")){
    var Hmon<?=$empnum?> = 1;
    var Wmon<?=$empnum?> = 0;
    var Smon<?=$empnum?> = 0;
    }
else if((mon<?=$empnum?> == "w" || mon<?=$empnum?> == "W")){
    var Wmon<?=$empnum?> = 1;
    var Hmon<?=$empnum?> = 0;
    var Smon<?=$empnum?> = 0;
    }
else if((mon<?=$empnum?> == "s" || mon<?=$empnum?> == "S")){
        var Smon<?=$empnum?> = 1;
        var Hmon<?=$empnum?> = 0;
        var Wmon<?=$empnum?> = 0;
    }
else{
        var Smon<?=$empnum?> = 0;
        var Hmon<?=$empnum?> = 0;
        var Wmon<?=$empnum?> = 0;
        var Xmon<?=$empnum?> = 0;
    }
// Tuesday  
var tue<?=$empnum?> = document.getElementById('tue<?=$empnum?>').value;
if ((tue<?=$empnum?> == "h" || tue<?=$empnum?> == "H")){
    var Htue<?=$empnum?> = 1;
    var Wtue<?=$empnum?> = 0;
    var Stue<?=$empnum?> = 0;
    }
else if((tue<?=$empnum?> == "w" || tue<?=$empnum?> == "W")){
    var Wtue<?=$empnum?> = 1;
    var Htue<?=$empnum?> = 0;
    var Stue<?=$empnum?> = 0;
    }
else if((tue<?=$empnum?> == "s" || tue<?=$empnum?> == "S")){
        var Stue<?=$empnum?> = 1;
        var Htue<?=$empnum?> = 0;
        var Wtue<?=$empnum?> = 0;
    }
else{
        var Stue<?=$empnum?> = 0;
        var Htue<?=$empnum?> = 0;
        var Wtue<?=$empnum?> = 0;
    }
// Wednesday
var wed<?=$empnum?> = document.getElementById('wed<?=$empnum?>').value;
if ((wed<?=$empnum?> == "h" || wed<?=$empnum?> == "H")){
    var Hwed<?=$empnum?> = 1;
    var Wwed<?=$empnum?> = 0;
    var Swed<?=$empnum?> = 0;
    }
else if((wed<?=$empnum?> == "w" || wed<?=$empnum?> == "W")){
    var Wwed<?=$empnum?> = 1;
    var Hwed<?=$empnum?> = 0;
    var Swed<?=$empnum?> = 0;
    }
else if((wed<?=$empnum?> == "s" || wed<?=$empnum?> == "S")){
        var Swed<?=$empnum?> = 1;
        var Hwed<?=$empnum?> = 0;
        var Wwed<?=$empnum?> = 0;
    }
else{
        var Swed<?=$empnum?> = 0;
        var Hwed<?=$empnum?> = 0;
        var Wwed<?=$empnum?> = 0;
    }
// Thurday
var thu<?=$empnum?> = document.getElementById('thu<?=$empnum?>').value;
if ((thu<?=$empnum?> == "h" || thu<?=$empnum?> == "H")){
    var Hthu<?=$empnum?> = 1;
    var Wthu<?=$empnum?> = 0;
    var Sthu<?=$empnum?> = 0;
    }
else if((thu<?=$empnum?> == "w" || thu<?=$empnum?> == "W")){
    var Wthu<?=$empnum?> = 1;
    var Hthu<?=$empnum?> = 0;
    var Sthu<?=$empnum?> = 0;
    }
else if((thu<?=$empnum?> == "s" || thu<?=$empnum?> == "S")){
        var Sthu<?=$empnum?> = 1;
        var Hthu<?=$empnum?> = 0;
        var Wthu<?=$empnum?> = 0;
    }
else{
        var Sthu<?=$empnum?> = 0;
        var Hthu<?=$empnum?> = 0;
        var Wthu<?=$empnum?> = 0;
    }
// Friday
var fri<?=$empnum?> = document.getElementById('fri<?=$empnum?>').value;
if ((fri<?=$empnum?> == "h" || fri<?=$empnum?> == "H")){
    var Hfri<?=$empnum?> = 1;
    var Wfri<?=$empnum?> = 0;
    var Sfri<?=$empnum?> = 0;
    }
else if((fri<?=$empnum?> == "w" || fri<?=$empnum?> == "W")){
    var Wfri<?=$empnum?> = 1;
    var Hfri<?=$empnum?> = 0;
    var Sfri<?=$empnum?> = 0;
    }
else if((fri<?=$empnum?> == "s" || fri<?=$empnum?> == "S")){
        var Sfri<?=$empnum?> = 1;
        var Hfri<?=$empnum?> = 0;
        var Wfri<?=$empnum?> = 0;
    }
else{
        var Sfri<?=$empnum?> = 0;
        var Hfri<?=$empnum?> = 0;
        var Wfri<?=$empnum?> = 0;
    }
// Saturday
var sat<?=$empnum?> = document.getElementById('sat<?=$empnum?>').value;
if ((sat<?=$empnum?> == "h" || sat<?=$empnum?> == "H")){
    var Hsat<?=$empnum?> = 1;
    var Wsat<?=$empnum?> = 0;
    var Ssat<?=$empnum?> = 0;
    }
else if((sat<?=$empnum?> == "w" || sat<?=$empnum?> == "W")){
    var Wsat<?=$empnum?> = 1;
    var Hsat<?=$empnum?> = 0;
    var Ssat<?=$empnum?> = 0;
    }
else if((sat<?=$empnum?> == "s" || sat<?=$empnum?> == "S")){
        var Ssat<?=$empnum?> = 1;
        var Hsat<?=$empnum?> = 0;
        var Wsat<?=$empnum?> = 0;
    }
else{
        var Ssat<?=$empnum?> = 0;
        var Hsat<?=$empnum?> = 0;
        var Wsat<?=$empnum?> = 0;
    }
// Sunday
var sun<?=$empnum?> = document.getElementById('sun<?=$empnum?>').value;
if ((sun<?=$empnum?> == "h" || sun<?=$empnum?> == "H")){
    var Hsun<?=$empnum?> = 1;
    var Wsun<?=$empnum?> = 0;
    var Ssun<?=$empnum?> = 0;
    }
else if((sun<?=$empnum?> == "w" || sun<?=$empnum?> == "W")){
    var Wsun<?=$empnum?> = 1;
    var Hsun<?=$empnum?> = 0;
    var Ssun<?=$empnum?> = 0;
    }
else if((sun<?=$empnum?> == "s" || sun<?=$empnum?> == "S")){
        var Ssun<?=$empnum?> = 1;
        var Hsun<?=$empnum?> = 0;
        var Wsun<?=$empnum?> = 0;
    }
else{
        var Ssun<?=$empnum?> = 0;
        var Hsun<?=$empnum?> = 0;
        var Wsun<?=$empnum?> = 0;
    }

var W<?=$empnum?> = Wmon<?=$empnum?>*1+Wtue<?=$empnum?>*1+Wwed<?=$empnum?>*1+Wthu<?=$empnum?>*1+Wfri<?=$empnum?>*1+Wsat<?=$empnum?>*1+Wsun<?=$empnum?>*1;
var H<?=$empnum?> = Hmon<?=$empnum?>*1+Htue<?=$empnum?>*1+Hwed<?=$empnum?>*1+Hthu<?=$empnum?>*1+Hfri<?=$empnum?>*1+Hsat<?=$empnum?>*1+Hsun<?=$empnum?>*1;
var S<?=$empnum?> = Smon<?=$empnum?>*1+Stue<?=$empnum?>*1+Swed<?=$empnum?>*1+Sthu<?=$empnum?>*1+Sfri<?=$empnum?>*1+Ssat<?=$empnum?>*1+Ssun<?=$empnum?>*1;

var totals<?=$empnum?> = document.getElementById('totalhrs<?=$empnum?>').value = W<?=$empnum?>; 
var holiday<?=$empnum?> = document.getElementById('holihrs<?=$empnum?>').value = H<?=$empnum?>; 
var sick<?=$empnum?> = document.getElementById('sickdays<?=$empnum?>').value = S<?=$empnum?>; 
var wage<?=$empnum?> = document.getElementById('wagefreq<?=$empnum?>').value;
if(wage<?=$empnum?> == 'Weekly'){ 
document.getElementById('gross<?=$empnum?>').value = <?=$empsalarywage?>;
}
else if(wage<?=$empnum?> == '4 Weekly'){ 
document.getElementById('gross<?=$empnum?>').value = (<?=$empsalarywage?> / 4);
}
else if(wage<?=$empnum?> == 'Monthly'){ 
document.getElementById('gross<?=$empnum?>').value = ((<?=$empsalarywage?> * 12) / 52);
}
document.getElementById('weeklysheet<?=$empnum?>').submit('save<?=$empnum?>');
}
</script>

    这个表格：

    <form id="weeklysheet<?=$empnum?>" name="weeklysheet" method="post" action="salary-function.php" >
                <tbody>
                    <tr style="line-height:0px;">
                        <td class="large">
                            <p class="employee_name"><?=$fullname?></p>
                        </td>   
                        <td class="small">
                            <input name="mon" id="mon<?=$empnum?>" type="text" class="days_input" maxlength="1" value="<?php echo $mon?>"onchange="grab<?=$empnum?>()"/>
                        </td>                   
                        <td class="small">
                            <input name="tue" id="tue<?=$empnum?>" type="text" class="days_input" maxlength="1" value="<?php echo $tue?>"onchange="grab<?=$empnum?>()"/>
                        </td>
                        <td class="small">
                            <input name="wed" id="wed<?=$empnum?>" type="text" class="days_input" maxlength="1" value="<?php echo $wed?>"onchange="grab<?=$empnum?>()"/>
                        </td>
                        <td class="small">
                            <input name="thu" id="thu<?=$empnum?>" type="text" class="days_input" maxlength="1" value="<?php echo $thu?>"onchange="grab<?=$empnum?>()"/>
                        </td>
                        <td class="small">
                            <input name="fri" id="fri<?=$empnum?>" type="text" class="days_input" maxlength="1" value="<?php echo $fri?>"onchange="grab<?=$empnum?>()"/>
                        </td>
                        <td class="small">
                            <input name="sat" id="sat<?=$empnum?>" type="text" class="days_input" maxlength="1" value="<?php echo $sat?>"onchange="grab<?=$empnum?>()"/>
                        </td>
                        <td class="small">
                            <input name="sun" id="sun<?=$empnum?>" type="text" class="days_input" maxlength="1" value="<?php echo $sun?>"onchange="grab<?=$empnum?>()"/>
                        </td >
                        <td class="small">
                            <input name="totalhrs" id="totalhrs<?=$empnum?>" type="text" class="cumul_week_input" readonly value="<?php echo $totalhrs?>"/>
                        </td>
                        <td class="small">
                            <input name="holihrs" id="holihrs<?=$empnum?>" type="text" class="cumul_week_input" readonly value="<?php echo $holihrs?>"/>
                        </td>
                        <td class="small">
                            <input name="sickdays" id="sickdays<?=$empnum?>" type="text" class="cumul_week_input" readonly value="<?php echo $sickdays?>"/>
                        </td>
                        <td class="small">
                            <input name="gross" id="gross<?=$empnum?>" type="text" class="cumul_week_input" readonly value="<?php echo $gross?>"/>
                        </td>
                        <td>
                        <input type="submit"name="save" id="save<?=$empnum?>" value="Confirm" style="display:none"/>
                        <input type="hidden"name="enddate" value="<?php echo $data['currentWeekStart']; ?>"/>
                                                <input type="hidden"name="wagefreq"id="wagefreq<?=$empnum?>" value="<?=$wagefreq?>"/>

                        </td>
                    </tr>
                </tbody>
            </form>

    这就像我想要的那样工作，但如果有人看到任何可以以更好的方式完成的事情，我真的很感激任何更正...... 谢谢

    【讨论】：

      猜你喜欢
      • 2015-09-24
      • 1970-01-01
      • 2018-01-15
      • 2013-03-15
      • 2011-02-05
      • 2010-11-25
      • 2015-05-14
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode