CODEWITHSUNDEEP
jqueryformsvariables
Scott
Scott

Reputation: 21882

Jquery form - get variable to pass outside functions

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)

Upvotes: 0

Views: 34

Answers (2)

Scott
Scott

Reputation: 21882

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).

Upvotes: 0

AVAVT
AVAVT

Reputation: 7133

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" />

Upvotes: 1

Related Questions