Firing a function in a form without using a submit button

Question

I need to fire a function I wrote after a form has been filled in. I tried using a keypress function but that wasn't good because it could bypass the form having to be filled in. I'm not allowed to add a button. I tried using onsubmit but that isn't good either. The idea is to show an image after the form has been filled in, then enabling the next form and taking the opacity of the next form from 0.5 to 1.0. This is the function I wrote in JavaScript but I can't get to fire it:

function validate1(){
    $("#check").show();
    $("#fieldset2").css("opacity", "1.0");
    $("#fieldset2").attr("disabled", false);
}

This is my html:

        <form name="form1" onsubmit="return validate1()" method="post">
        <fieldset id="fieldset1">
        <legend>Step 1</legend>
        How many people will be attending?
            <select name = step1 id="step1" onchange="showField()">
            <option value="0">Please Choose</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            </select>
        <br>
        <div id="divName"></div>
        <img id="check" src="Images/check.png">
        </fieldset> 
    </form>

  <form name="form2" onsubmit="return validateForm()" method="post">
        <fieldset id="fieldset2" disabled>
        <legend>Step 2</legend>
            Would you like your company name on your badges?<br>
            <input type="radio" id="companyYes" name="company">Yes<input type="radio" id="companyNo" name="company">No<br>
            <input type="text" id="companyText">
        <br>
        <div id="company"></div>
        Will anyone in your group require special accommodations?<br>
       (if yes) Please explain below:<br>
        <input type="radio" name="special" id="specialYes" value="Yes">Yes<input type="radio" id="specialNo" name="special" value="No">No<br>
        <input type="text" id="specialText"><br>
            <img id="check2" src="Images/check.png">
        </fieldset>
    </form>

PS: I can only use JS, JQuery and HTML, no Ajax(have zero experience with it).

Answer 1

Add another button that call your function and enable the next step :

<button onclick='nextStep()'>Next Step</button>

Hope this helps.

 function nextStep(){ $("#check").show(); $("#fieldset2").css("opacity", "1"); $("#fieldset2").attr("disabled", false); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="form1" method="post"> <fieldset id="fieldset1"> <legend>Step 1</legend> How many people will be attending? <select name = step1 id="step1" onchange=""> <option value="0">Please Choose</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <br> <div id="divName"></div> <img id="check" src="http://fotokaste.lv/images/05651826220882852674.png" style='display:none'> </fieldset> </form> <button onclick='nextStep()'>Next Step</button> <form name="form2" onsubmit="return validateForm()" method="post"> <fieldset id="fieldset2" disabled> <legend>Step 2</legend> Would you like your company name on your badges?<br> <input type="radio" id="companyYes" name="company">Yes<input type="radio" id="companyNo" name="company">No<br> <input type="text" id="companyText"> <br> <div id="company"></div> Will anyone in your group require special accommodations?<br> (if yes) Please explain below:<br> <input type="radio" name="special" id="specialYes" value="Yes">Yes<input type="radio" id="specialNo" name="special" value="No">No<br> <input type="text" id="specialText"><br> <img id="check2" src="Images/check.png"> </fieldset> </form> 

Answer 2

"use the jQuery .change method to fire when a user chooses an option from the select named "step1".

$("#step1").change(function() {
  if ($("#step1").val() > 0) {
      validate1();
  }
});

Answer 3

You can probably try placing an onchange function on every element inside the first form.

Use this for every element.

<input id = 'nameInputFormElem' type='text' placeholder="Full Name" onchange="testFunction(event);">
<select name = step1 id="step1" onchange="testFunction(event);">
        <option value="0">Please Choose</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        </select>

This can be a generic implementation of the function to catch the change

function testFunction(event){
var temp = $(event.target).parents("form").find("select, input");
var isFormFilled = true;
$(temp).each(function (key,value){
    if($(value).val() == '')
        isFormFilled= false;
});
if(isFormFilled == true)
    console.log("success");
}

Replace success console with a call to your function.