I want to create a simple function to reset all input values without target input. (Javascript, Jquery)
Hi, I want to create a simple function to reset all input values without target input. I don't know how i can do it. Thanks.
Edited: The function resets all of input values. I need to save/catch the target value.
Here is my sample codes:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
function reset_other_inputs(room) {
$("input[name^='check_in_date_']").each(function () {
if ( $("input[name!='check_in_date_'+room]") ) { $(this).val(""); }
});
$("input[name^='check_out_date_']").each(function () {
if ( $("input[name!='check_out_date_'+room]") ) { $(this).val(""); }
});
}
</script>
<input type="text" name="check_in_date_single" value="single" onClick="reset_other_inputs('single');">
<input type="text" name="check_out_date_single" value="single" onClick="reset_other_inputs('single');">
<input type="text" name="check_in_date_double" value="double" onClick="reset_other_inputs('double');">
<input type="text" name="check_out_date_double" value="double" onClick="reset_other_inputs('double');">
<input type="text" name="ch开发者_C百科eck_in_date_triple" value="triple" onClick="reset_other_inputs('triple');">
<input type="text" name="check_out_date_triple" value="triple" onClick="reset_other_inputs('triple');">
<input type="text" name="check_in_date_suite" value="suite" onClick="reset_other_inputs('suite');">
<input type="text" name="check_out_date_suite" value="suite" onClick="reset_other_inputs('suite');">
You can do all this in jQuery, not necessarily simpler, but a bit cleaner overall, like this:
$(function() {
$("input[name^='check_in_date_'], input[name^='check_out_date_']").click(function() {
var room = $(this).attr("name");
room = room.substring(room.lastIndexOf("_") + 1);
$("input[name='check_in_date_" + room +"'], input[name='check_out_date_" + room +"']").not(this).val('');
});
});
Remove your inline onClick
handler for this approach, you can see a working demo here.
OK! Finally I've found the solution;
function reset_other_inputs(room) {
$("input[name^='check_in_date_']").each(function () {
if ( $(this).attr("name") != "check_in_date_"+room) { $(this).val(""); }
});
$("input[name^='check_out_date_']").each(function () {
if ( $(this).attr("name") != "check_out_date_"+room) { $(this).val(""); }
});
}
Thanks for your answers.
That seems to work I was actually going to suggest this solution:
var $relevantInputs = $('input[name^=check_in_date]')
.add('input[name^=check_out_date]');
$relevantInputs
.click(function() {
var $thisInputsValue= $(this).val();
reset_other_types($thisInputsValue);
});
function reset_other_types(type) {
$relevantInputs
.filter(':not([value=' + type + '])')
.val("")
.end();
}
The first two lines grab the relevant inputs (in case there's many on the page). The second line applies a click handler to all of the relevant inputs (remember that jQuery uses implicit iteration, so the click handler is applied to all objects that were matched in the above two lines). Within the click handler (the user has clicked an input) we get the value of the input that the user has clicked and pass it to the reset_other_types
function. This function basically resets the value of all the relevant inputs that do not match the one given in the type
parameter. Disco! Readable, unobtrusive solution (which means you don't have to maintain all those fugly separate click handlers in the HTML :P). Cheers!
精彩评论