Ask your JavaScript questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

form submit to be called as a function JavaScript

  • SOLVED

I want this form submit to be called as a function ("stubble();") so that I can call it with <body onload="stubble();"> in addition to optionally fill in the form and processing the js.



<!-- form -->
<form id="dateform" action="#" method="post" autocomplete="off">

<fieldset class="savage">
<label for="startdate">START</label>
<input type="date" id="startdate" name="startdate" required />
<script>//document.querySelector("#startdate").valueAsDate = new Date(new Date().setFullYear(new Date().getFullYear() - 1))</script>
<script>document.querySelector("#startdate").valueAsDate = new Date('11/01/2018')</script>
</fieldset>


<fieldset class="savage">
<label for="stopdate">STOP</label>
<input type="date" id="stopdate" name="stopdate" required />
<script>//document.querySelector("#stopdate").valueAsDate = new Date();</script>
<script>document.querySelector("#stopdate").valueAsDate = new Date('10/31/2019')</script>
</fieldset>


<fieldset class = "savage">
<label for="mingames">MIN. GAMES</label>
<input type="number" name="mingames" id="mingames" size="5" maxlength="4" min="1" max="25" value="1" required />
</fieldset>

<fieldset class = "savage" style = "background:inherit; border:none; position:relative; top:1.45rem; right:2rem;">
<button type="submit"><img src = "images/Check.webp"></button>
</fieldset>

<br />


</form>

</div>

</div>

<!-- output -->

<div id="output"></div>

<script>


// data set

var retrievedData = localStorage.getItem("eligible");
const games_archive = JSON.parse(retrievedData);


function stubble() {

// process the form submit event using jquery

$( '#dateform' ).on( 'submit', function( evt ) {
evt.preventDefault();

const startTime = new Date( this.startdate.value ).getTime();
const stopTime = new Date( this.stopdate.value ).getTime();

var starter = new Date(startTime);
starter.setDate(starter.getDate()+1);

var stopper = new Date(stopTime);
stopper.setDate(stopper.getDate()+1);

const minGames = Number( this.mingames.value ) || 1 ;

var total_games = 0;
var total_players = 0;
const playData = {};

// scan data and check play time for each player
for ( let i=0; i < games_archive.length; i++ ) {
const { name, date } = games_archive[ i ];
const playTime = new Date( date ).getTime();


// check player date range and add count
if ( playTime >= startTime && playTime <= stopTime ) {
playData[ name ] = playData[ name ] || { dates: [], count: 0 };
playData[ name ].dates.push( date );
playData[ name ].count += 1;
}

}

// build final html
let items = '';
Object.keys( playData ).map( name => {
const { dates, count } = playData[ name ];
const noun = ( count === 1 ) ? 'game' : 'games';
const datestr = dates.join( ', ' );

if ( count < minGames ) {return;} // skip based on minGames count
items += `<li>${name} played ${count} ${noun} <span class="borneo">(${datestr})</span></li>`;
total_players += 1; total_games += count;

});

// add final html to page

document.getElementById("all_players").innerHTML = total_games;
document.getElementById("all_games").innerHTML = (total_players);
document.getElementById("little").innerHTML = (minGames);

document.getElementById("min_date").innerHTML = starter.format("mm/dd/yyyy");
document.getElementById("max_date").innerHTML = stopper.format("mm/dd/yyyy");


$( '#output' ).html( `<ul>${items}</ul>` );
console.log( playData );
$("#eyes").fadeIn();
$("#glass").fadeIn();

});
}
</script>

Answers (1)

2019-08-13

Rainner Lins answers:

No need to change anything, just trigger the form to submit when the page loads using jquery. You could try something like:


$(document).ready( function(e) {
$('#dateform').trigger('submit');
});