CODEWITHSUNDEEP
javascriptjqueryhtml
Gerrit ten Napel
Gerrit ten Napel

Reputation: 149

Restrict JQuery keypress event to fire one at the same time?

I have three different forms, when each form is filled the keypress "enter" fires and shows a picture. I have two pictures and both are firing at the same time but I want one to fire when enter is pressed once and the other one fired when the second form is completed but they both fire at the same time.

This is my HTML:

     <!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="Opdracht4_5.js"></script>
    <link rel="stylesheet" href="Opdracht%204_5.css">
    <title></title>

</head>
    <h1 span class="white">Info Day</span> <span class="blue">Registration</span></h1>
<body>
    <form name="form1" onsubmit="validateForm()" 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="check.png">
        </fieldset> 
    </form>

  <form name="form2" onsubmit="return validateForm()" method="post">
        <fieldset id= "fieldset2">
        <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">
            <img id="check2" src="check.png">
        </fieldset>
    </form>

    <form>
        <fieldset id="fieldset3">
    <legend>Step 3</legend>
        I confirm that all provided data is accurate? <br>

        <input type="checkbox" name="complete" value="complete"><input type="submit" name="register" value="Complete Registration">
        </fieldset>
    </form>

</body>     
</html>

This is my JS:

        function showField(){
    var selectDropDown = $("#step1");
    var value = selectDropDown.val();
    var insertDiv = $("#divName");
    var innerHtmlString = "";
    var value2 = $("#Yes")
    if(value > 0){
        innerHtmlString = "<b>Please provide full names: </b> <br/>";
    }
    for(i = 0; i < value; i++){
        innerHtmlString += "<i>Attendee " + (i+1) + " Name:</i> <input type='text' name='"+(i+1)+"' /> </br><br/>";
    }
    insertDiv.html(innerHtmlString);
};

$(document).on("keypress", function (e) {
    if (e.which == 13 || e.keyCode == 13){
        $("#check").show();
    }
});
$(document).on("")

function validateForm(){
    alert("test");
}

$(Document).on("click",function(){

});
$( document ).ready(function() {

    $("#check").hide();
    $("#specialText").hide();
    $("#companyText").hide();
    $("#check2").hide();

    $("#companyYes").on("click", function() {
        $("#companyText").show();
        });
        $("#companyNo").on("click", function() {
        $("#companyText").hide();    
        });
        $("#specialYes").on("click", function() {
        $("#specialText").show();
        });
        $("#specialNo").on("click", function() {
        $("#specialText").hide();
        });
});
$(document).ready();
$(document).on("keypress", function (e) {
    if (e.which == 13 || e.keyCode == 13){
        $("#check2").show();
    }
});
$(document).on("")

How do I fix this?

Upvotes: 1

Views: 90

Answers (1)

Aruna
Aruna

Reputation: 12022

You have two $(document).on("keypress", function {}) events which should be one and you can check whether the #check is visible. If it is not visible then show this otherwise show the second image as below.

$(document).on("keypress", function (e) {
    if (e.which == 13 || e.keyCode == 13){
       if($("#check").is(':visible')) {
          $("#check2").show();
       } else {
         $("#check").show();
       }
    }
});

Notes:

  • You had two $(document).on("") which is invalid and should be removed (commented below).
  • And the Document in $(Document).on("click",function(){}) is also wrong and should be removed.
  • Also, in your html the h1 tag is not closed properly as <h1 span class="white"> which should be <h1> <span class="white">

Working snippet:

function showField(){
    var selectDropDown = $("#step1");
    var value = selectDropDown.val();
    var insertDiv = $("#divName");
    var innerHtmlString = "";
    var value2 = $("#Yes")
    if(value > 0){
        innerHtmlString = "<b>Please provide full names: </b> <br/>";
    }
    for(i = 0; i < value; i++){
        innerHtmlString += "<i>Attendee " + (i+1) + " Name:</i> <input type='text' name='"+(i+1)+"' /> </br><br/>";
    }
    insertDiv.html(innerHtmlString);
};

$(document).on("keypress", function (e) {
    if (e.which == 13 || e.keyCode == 13){
       if($("#check").is(':visible')) {
          $("#check2").show();
       } else {
         $("#check").show();
       }
    }
});
//$(document).on("")

function validateForm(){
    alert("test");
}

/*$(Document).on("click",function(){

});*/
$( document ).ready(function() {

    $("#check").hide();
    $("#specialText").hide();
    $("#companyText").hide();
    $("#check2").hide();

    $("#companyYes").on("click", function() {
        $("#companyText").show();
        });
        $("#companyNo").on("click", function() {
        $("#companyText").hide();    
        });
        $("#specialYes").on("click", function() {
        $("#specialText").show();
        });
        $("#specialNo").on("click", function() {
        $("#specialText").hide();
        });
});
/*$(document).ready();
$(document).on("keypress", function (e) {
    if (e.which == 13 || e.keyCode == 13){
        $("#check2").show();
    }
});
$(document).on("")*/
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="Opdracht4_5.js"></script>
    <link rel="stylesheet" href="Opdracht%204_5.css">
    <title></title>

</head>
    <h1> <span class="white">Info Day</span> <span class="blue">Registration</span></h1>
<body>
    <form name="form1" onsubmit="validateForm()" 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="check.png">
        </fieldset> 
    </form>

  <form name="form2" onsubmit="return validateForm()" method="post">
        <fieldset id= "fieldset2">
        <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">
            <img id="check2" src="check.png">
        </fieldset>
    </form>

    <form>
        <fieldset id="fieldset3">
    <legend>Step 3</legend>
        I confirm that all provided data is accurate? <br>

        <input type="checkbox" name="complete" value="complete"><input type="submit" name="register" value="Complete Registration">
        </fieldset>
    </form>

</body>     
</html>

Upvotes: 1

Related Questions