CODEWITHSUNDEEP
phpjavascripthtmlformssubmit
tieum
tieum

Reputation: 23

automatic submit form js

I'm trying to auto submit a form,(below it's only the form, its wrapped with a while{} for each DB entry to display). It's working for all days of the week, but I can't submit the value for $totalhours, $holidayhours, $wagegross without a js event like onfocus().

Basically I want to submit this 3 inputs without an click or any other manual action.

any idea ?

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

Upvotes: 2

Views: 3180

Answers (4)

tieum
tieum

Reputation: 23

(sorry if it's a long explanation) I'm coming back with my solution... in case that can help anyone.

so the idea it's to have a table that display a list of employees where you can input the days worked, holidays, sick. Then do the sum of each and calculate the gross depending on a wages frequency (i.e: Weekly, 4 Weekly or Monthly). Because the user won't complete the all form at once, I needed to make the submission automatic for all inputs at all the time of the current week.

this is the 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>

this the form:

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

that's something that worked like I want, but if anyone see anything that could be done in a better way, I would really apreciate any corrections... thank's

Upvotes: 0

Lil&#39; Bits
Lil&#39; Bits

Reputation: 898

You could use jQuery to trigger the submit button's click action after the document has loaded like so:

1.) You can link the jQuery library from Google's Hosted Libraries:

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

or, download it from jQuery.com to, say a "js" folder, and include it

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

2.) Place this script tag at below the </form> tag:

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

Or you could do it the pure javascript way without jQuery like so:

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

Then place this script tag below the </form> tag:

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

Or, to shorten the method above:

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

Upvotes: 1

tieum
tieum

Reputation: 23

that's the js I'm using, I've try submitting with a timeout and it's working. at the end my issue is not there, it appear that when I'm submit the form, the 3 php variables push the value of the previous input entry.

I don't know if I'm clear with my explanation... 

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

Upvotes: 0

Martin
Martin

Reputation: 92

Are you looking to submit them individually or all at once? If you want to do it all at once you could give the last element an id and in jquery use $('#div').moueleave

Upvotes: 0

Related Questions