0

My registration script has 2 hidden input fields that change to two set variables based on the user input. The form button is disabled by default. My issue is getting the button to be enabled once the two hidden input fields match the set variable.

<form id="register_form" autocomplete="off" method="post" action="">
    <h1>Register</h1>
    <div id="error_msg"></div>
    <div id="pass"><span id='user'></span></div>
    <div id="pass"><span id='message'></span></div>
    <div id="pass"><span id='message2'></span></div>
    <div>
        <input type="text" name="username" placeholder="Username" id="username" autocomplete="off" required>
    </div>
    <div>
        <input type="email" name="email" placeholder="Email" id="email" autocomplete="off" required>
    </div>
    <div class="radio">
        <input type="radio" name="opt" value="Yes" checked> Receive Emails for Promotions and Newsletters
        <br>
        <input type="radio" name="opt" value="No"> Don't Receive Emails for Promotions and Newsletters
    </div>
    <div>
        <input type="password" name="new_password" placeholder="Enter Password" id="new_password" autocomplete="off" required>
    </div>
    <div>
        <input type="password" name="new_password2" id="new_password2" placeholder="Confirm Password" autocomplete="off" required>
    </div>
    <div>
        <input type="text" name="user-response" id="user-response">
    </div>
    <div>
        <input type="text" name="pass-response" id="pass-response">
    </div>
    <div>
        <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
    </div>

    <div>
        <button type="submit" id="reg_btn" class="button" name="register" disabled="disabled">Register Account</button>
    </div>
</form>
$(function(){
var user = $('#user-response').val();
var pass = $('#pass-response').val();
if(user === 'available' && pass === 'match'){
    $("#reg_btn").prop("disabled", false);
} else {
  $("#reg_btn").prop("disabled", true);
}
});

When a user enters a username that doesn't exist the 1st "hidden" input field will display available. When a user enters a matching password that meets the requirements it displays match. When those two fields say available and match the button should switch to enabled but it remains disabled.

Moshe Gross
  • 1,206
  • 1
  • 7
  • 14
Edenost
  • 21
  • 5
  • Consider having a jQuery `on.change()` event tied to each input box. On the change of either of these, check if (both) are not null, and if they match the desired values. If 'YES' they match, run this `$("#reg_btn").prop("disabled", false);` [Basic Jquery Onchange](https://stackoverflow.com/questions/11179406/jquery-get-value-of-select-onchange) – EGC Nov 03 '19 at 23:26
  • I ended up just using a checkbox to fire the event, thanks for the advice though. – Edenost Nov 04 '19 at 00:54

0 Answers0