Jquery form - get variable to pass outside functions

Question

Simple form with an either/or option of choosing from a menu OR inputting text.

Everything is working in general. However, I'm attempting to disable the submit button until either input option is used.

I can't get a variable value to be read properly in the jquery and I don't know why.

$(document).ready(function() {

var allThere = false; //stop
	
//Either pick an item....
$('#selmen').on('change', function() {
  $('#theName').slideUp(300);
		
    var theVal = $(this).val();
    if (theVal) {
    console.log('Select value = ' + theVal);
    allThere = true; //go
    console.log('innerSelect = ' + allThere);
    } 
});

//Or type new....
$("#theName").on("keyup", function(){
    $('#selmen').slideUp(300);

    if ($('#theName').val() != '') {
    console.log('key value = ' + $(this).val());
    allThere = true; //stop
    console.log('innerName = ' + allThere);
    }
});
				
//check the variable...
//This reports FALS always
if (allThere == false) {
    $("#newsub").attr("disabled", "disabled"); //stop
    console.log('Base allThere = ' + allThere);
} else {
     $("#newsub").removeAttr("disabled"); //go
     console.log('Base allThere = ' + allThere);
}		

}); //end doc ready

body { margin: 50px; }
input { display: block; margin: 10px 0;}
#newsub { background: #a00; color:#fff; border: none; padding: 10px 20px; text-align: center;}
#newsub:disabled { background: #333; color:#ccc;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selmen" id="selmen" class="drop">
<option value="">Pick One</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" id="theName" />
<input type="sumbit" name="newsub" id="newsub" value="ADD" />

If things were working correctly the submit button should turn red when a value is selected or input.

The console shows the variable being updated within the functions. However, for some mystifying reason, the variable isn't being read in the bottom if/else statement.

What am I missing?

EDIT:

Additional Info...

The form is loaded via ajax. I essentially have :

$('#formload').on('click', function() {
    $('#mainformholder').slideToggle();
    $('#mainform').load('_core/inc/mainform.php', function() {
      //The snippet above
    });
});

So, moving to a function outside of the document.ready() function is also problematic. (at least for me)

AVAVT · Accepted Answer · 2017-02-21 21:14:46Z

1

Well because you are only checking the value of allThere once when the document is loaded. You must check it again each time one of the event occur as well:

$(document).ready(function() {

  var allThere = false; //stop

  //Either pick an item....
  $('#selmen').on('change', function() {
    $('#theName').slideUp(300);

    var theVal = $(this).val();
    if (theVal) {
      console.log('Select value = ' + theVal);
      allThere = true; //go
      console.log('innerSelect = ' + allThere);
      checkValidity(allThere);
    }
  });

  //Or type new....
  $("#theName").on("keyup", function() {
    $('#selmen').slideUp(300);

    if ($('#theName').val() != '') {
      console.log('key value = ' + $(this).val());
      allThere = true; //stop
      console.log('innerName = ' + allThere);
      checkValidity(allThere);
    }
  });

  checkValidity(allThere);

  function checkValidity(allThere) {
    //check the variable...
    //This reports FALS always
    if (allThere == false) {
      $("#newsub").attr("disabled", "disabled"); //stop
      console.log('Base allThere = ' + allThere);
    } else {
      $("#newsub").removeAttr("disabled"); //go
      console.log('Base allThere = ' + allThere);
    }
  }

}); //end doc ready

body {
  margin: 50px;
}

input {
  display: block;
  margin: 10px 0;
}

#newsub {
  background: #a00;
  color: #fff;
  border: none;
  padding: 10px 20px;
  text-align: center;
}

#newsub:disabled {
  background: #333;
  color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selmen" id="selmen" class="drop">
<option value="">Pick One</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" id="theName" />
<input type="sumbit" name="newsub" id="newsub" value="ADD" />

edited Feb 21, 2017 at 21:14

answered Feb 21, 2017 at 20:49

AVAVT

7,1732 gold badges25 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Scott Over a year ago

That makes sense.... however, something I didn't mention which seems to also be a hurdle. The form is loaded via the load() function. Please see question Edit. I've tried moving the function to various locations and altering the target to more be specific, but still can't get this working. Thanks.

AVAVT Over a year ago

Well, then just put the function inside document.ready. See my edited answer. Javascript is pretty lax like that xD

Scott Over a year ago

Thank you.. actually moronic omission on my part. Was't running the function within the if/else statements that alter the variable. This solves it. Thank you again!

Scott · Accepted Answer · 2017-02-22 00:06:06Z

Thanks to @AVAVT here's my overall solution:

$(document).ready(function() {

  var flds = 0; //count

  //Either pick an item....
  $('#selmen').on('change', function() {
    $('#theName').slideUp(300);

    var theVal = $(this).val();
    if (theVal) {
      console.log('Select value = ' + theVal);
      flds++; //go
      checkValidity(flds);
    }
  });

  //Or type new....
  $("#theName").on("blur", function() {
    $('#selmen').slideUp(300);

    if ($('#theName').val() != '') {
      console.log('key value = ' + $(this).val());
      flds++; //go
      checkValidity(flds);
    }
  });

  //Or type new....
  $("#other").on("blur", function() {
    if ($('#other').val() != '') {
      console.log('key value = ' + $(this).val());
      flds++; //go
      checkValidity(flds);
    }
  });

  checkValidity(flds);

  function checkValidity(flds) {
    if (flds < 2) {
      $("#newsub").attr("disabled", "disabled"); //stop
      console.clear();
      console.log('Base fld count = ' + flds);
    } else {
      $("#newsub").removeAttr("disabled"); //go
      console.clear();
      console.log('Base fld count = ' + flds);
    }
  }

}); //end doc ready

body {
  margin: 10px;
}

input {
  display: block;
  margin: 10px 0;
}

#newsub {
  background: #a00;
  color: #fff;
  border: none;
  padding: 10px 20px;
  text-align: center;
}

#newsub:disabled {
  background: #333;
  color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selmen" id="selmen" class="drop">
<option value="">Pick One</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" id="theName" />
<input type="text" id="other" />
<input type="sumbit" name="newsub" id="newsub" value="ADD" />

Basically, I have several fields like this. So, by adding to a count variable I can determine how many fields are filled in and enable the submit button that way. Essentially if I know there are 5 fields which are required, I can count them. This allows me to circumvent issues encountered by setting the either/or select/inputs fields as "required".

Added additional field so the submit should now be enabled only after both items are completed. And changed keyup to blur in the input field functions.

(further individual input validation not included here for simplicity).

Collectives™ on Stack Overflow

Jquery form - get variable to pass outside functions

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related