自动提交表格js

时间：2012-11-29 16:34:48

标签： php javascript html forms submit

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

基本上我想在没有点击或任何其他手动操作的情况下提交这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>

4 个答案:

答案 0 :(得分：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 to，说一个“js”文件夹，并包含它

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

2。）将此脚本标记放在</form>标记下方：

<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">

然后将此脚本标记放在</form>标记下方：

<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">

答案 1 :(得分：0)

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

答案 2 :(得分：0)

这是我正在使用的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>

答案 3 :(得分：0)

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

所以我们的想法就是有一张表格，显示一份员工清单，您可以输入工作日，假期，病假。然后做每个的总和并根据工资频率计算总额（即：每周，每周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>

这是我想要的东西，但是如果有人看到任何可以以更好的方式完成的事情，我真的会对任何更正做出准备...... 感谢的

相关问题
最新问题