What's wrong with my first Jquery code and how can I accomplish this event?
Question
I have a quick Jquery question .. This Jquery code is supposed to show red borders on the input text boxes if they are not filled at all after clicking on submit , this code is from book , I copied exactly the way the code is but I do not get the red borders at all , looks like it's not working ..
Also I'd like to give this code conditions during the validation process of the form.. If the ESN list text field is in the range of 1000 to 3000, I'd like the drop down to automatically select STM3 below, if the range of the number input is between 5000 and 9000, I'd like Trackpack to automatically populate after a user let's say type 6000 on the text input field .. How can I trigger the dropdown menu after typing a number on the text field? Too tricky for a newbie , your help would be much appreciated.
<html>
<head> <title> Form </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(':submit').click(function(e) {
$(':text').each(function() {
if($(this.val().length == 0) {
$(this).css('border', '2px solid red');
}
});
e.preventDefault();
});
</script>
</head>
<body >
<form id="provision">
ESNList: <input type="text" id="ESNList" name="ESNList" size="30" /> <br />
ESN Start:<input type="text" id="ESNStart" name="ESNStart" size="10" /> <br />
ESN End: <input type="text" id="ESNStart" name="ESNStart" size="10" /> <br />
UnitName:<input type="text" id="STxName" name="STxName" size="30" /> <br />
Unit Model: <select name="STxName">
<option value="stx2">STX2</option>
<option value="protopak">Protopak</option>
<option value="stm3" selected>STM3</option>
<option value="acutec">Acutec</option>
<option value="mmt">MMT</option>
<option value="smartone">Trackpack</option>
<option value="smartoneb" >SmartOneB</option>
<option value="audi">Acutec</option>
</select> <br />
RTU Model Type:
<select name="rtumodel">
<option value="globalstar">GlobalStar</option>
<option value="both">Both</option>
<option value="comtech">Comtech</option>
<option value="stmcomtech">STMComtech</option>
</select> <br />
<input type="submit" value ="submit" />
</form>
</body>
</html>
3 answers
solution1
1 2013-01-15 19:29:07
You have a typo ( $(this.val().length should be $(this).val().length ).
$(':submit').click(function(e) {
e.preventDefault();
$(':text').each(function() {
if($(this).val().length == 0) {
$(this).css('border', '2px solid red');
}
});
});
A few thoughts:
- Consider, for readability, preventing the default (
e.preventDefault();) before evaluating the input fields for length. - Consider also using the more-specific
$('input:text')selector (instead of$(':text')). Benchmarking shows it performs much, much, better. - Native JavaScript can replace the jQuery you are using to evaluate the presence on input field values and will generally run faster ; replace
if($(this).val().length == 0)...withif (this.value.length === 0)
See http://jsfiddle.net/jhfrench/PvHGM/ for a working example.
solution2
0 2013-01-15 19:22:12
A problem is you are not waiting for the page to load to attach your events. This is easy to do in jQuery, simply surround the code in $(function () {...}); as I've done below:
I also fixed a typo.
$(function () {
$(':submit').click(function(e) {
$(':text').each(function() {
var th = $(this);
if(th.val().length == 0) {
th.css('border', '2px solid red');
}
});
e.preventDefault();
});
});
solution3
0 ACCPTED 2013-01-15 19:24:51
You have syntax error - a missing )
if($(this.val().length == 0) {
---^
Should be
if($(this).val().length == 0) {
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.