Let's suppose we have a situation where we want to change query string value of anchor tag href on text-box keyup event
Text-box keyup event is triggered when we release a key on the keyboard.
We are considering that our HTML page is like ...
<!DOCTYPE html>
<html>
<head>
<h6>Demonstration of change querystring value on keyup event of a text-box</h6>
</head>
<body>
<input type="text" value="5" name="rating" id="_xxxx_rating" class="update_query_string">
<a data-remote="true" class="link" href="http://localhost/rating?rating=5">View</a>
</body>
</html>
and we have a requirement to change query string value when the user enters some numeric value into the input box and releases the key.
The modified code is like.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$( ".update_query_string" ).keyup(function(val) {
var old_addr = $(this).next('a').attr('href');
var new_add = old_addr.split('?');
var updated_querystring = 'rating='+ $(this).val();
if($(this).val()> 0 && $.trim($(this).val()) !='') {
$(this).next('a').attr('href',new_add[0] + '?' + updated_querystring);
}else{
alert('Please enter greater than zero');
}
});
});
</script>
<h6>Demonstration of change querystring value on keyup event of a text-box</h6>
</head>
<body>
<input type="text" value="5" name="rating" id="_xxxx_rating" class="update_query_string">
<a data-remote="true" class="link" href="http://localhost/rating?rating=5">View</a>
</body>
</html>
For example, we have default value of text-box is 5 and view links looks like "http://localhost/rating?rating=5"
When we change the text box value, it'll update the query string value(i.e. rating). For example, if we changed text-box value as 10 and mouse hover on "View" link then it'll show link URL like "http://localhost/rating?rating=10"
0 Comment(s)