I'm trying to set a default focus for all the pages of my site but without changing the focus on page reload.
I mean:
User opens a page.
Focus is automatically set on the 1st input.
User changes focus to the 3rd input.
User refreshes the page.
Focus must not change to the 1st input again. (This is the requirement I fail to accomplish).
My current code is as follows:
$(document).ready(function() {
if($(':focus').length === 0) {
$(':input:not([type="hidden"]):first').focus();
}
});
The condition is true every time!
$(document).ready({
window.onload=function(){
if(session.Storage.getItem("text3")){//if key= text3 is set,then change the focus to 3rd text box.
$('#your3rdTextID').focus();
}
$('#your3rdTextID').focus(function(){
session.Storaage.setItem("text3","selected")//here you set the key as text3 and value as selected for later use.
});
});
You can provide with your own custom conditions.This is just a small example.Hope it helped you.Good luck with your project.
LINK-->HTML5 Local storage vs. Session storage
LINK-->http://www.w3schools.com/html/html5_webstorage.asp
This will work (tested in latest Chrome, IE7 and IE10). Sets a cookie on focus remembering the last focused element, if not, it defaults to the first. It relies on jquery.cookie.js (usage explained in this SO answer). Here is the full HTML+JS source of a minimal working example. Consider changing the cookie name and the input selector (currently 'input'):
<!doctype html>
<html>
<head>
<title>focus test</title>
<meta charset="utf-8" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $input = $('input'), // get all the inputs
cookieName = 'lastInputFocusIndex', // for consistency
lastIndex = $.cookie(cookieName) || 0; // get the last known index, otherwise default to zero
$input.on('focus',function(){ // when any of the selected inputs are focused
if ( $(this).attr('type') !== 'submit' ) {
$.cookie(cookieName,$input.index(this)); // get their index in the $input list and store it
}
});
$input.eq(lastIndex).focus(); // when the page loads, auto focus on the last known index (or the default of 0)
});
</script>
</head>
<body>
<form method="get" action="">
<p><input type="text" name="first" /></p>
<p><input type="text" name="second" /></p>
<p><input type="text" name="third" /></p>
<p><input type="submit" value="Go" /></p>
</form>
</body>
</html>
Alternatively, you could write your own raw cookies instead of using the cookie helper jQuery plugin; I used it to simplify things.
Related
I want to retain entered value in text box after navigation. I am explaining my code here.
**main.php**
<html>
<head></head>
<body>
<input type="text" id="myname" value="">
Next
</body>
</html>
**next.php**
Back
I don't want to use 'button' field here. On link navigation I want to retain the entered value in text box field. I am using php, html
you should save it in a cookie/session.
Or you can use localStorage too. Here's a link to read more
<form id="myform" name="myform" method="POST" action="next.php">
<input type="text" name="query" id="query">
Submit
</form>
<script type="text/javascript">
function submitform(){
// alert('form submit');
document.forms["myform"].submit();
} </script>
And in next.php
$_SESSION['last_search_term'] = $_REQUEST['query'];
echo $_SESSION['last_search_term'];
This will work . I have check it
I would use cookies. Note sessions and Opera back button do not work well together.
However if you want a cookieless solution you can use "window.name" string which is persistent i.e. its value is retained on navigation between pages. No need for a button as you required.
Just add this code before the closing </body> tag.
<script>
// on navigation to, or back: load users input from previous page (if any)
document.getElementById("myname").value = window.name;
// save value on navigation out
window.onbeforeunload = function() {
window.name = document.getElementById("myname").value;
return;
}
</script>
Assuming you give your text field the same id you can use the same js without modification on both/all pages.
The basic example code above should work with all modern browsers and most old browsers (even Opera since 2013). Modify it to use an event listener sanitize/check for empty values etc as required
Yes, I know that data sanitation and validation must be done server-side, but please stay with me.
Using the following script, stackoverflow.com will fail validation since a protocol is not given. If a URL is inputted without a protocol, I wish to add a default protocol (http://) to the input value prior to client-side validation. I don't wish to relax the validation method to silently accept URLs without a protocol as the user should be aware that a protocol was added.
How is this best accomplished?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var validator=$("#myForm").validate({
rules: {
url: {url:true,}
},
});
//Added per Monax's suggestion.
$('#url').blur(function(){this.value=this.value.substring(0,4)=='http'?this.value:(this.value?'http://'+this.value:'');});;
});
</script>
</head>
<body>
<form id="myForm" method="post">
<input name="url" id="url" value="">
<input type="submit" />
</form>
<?php echo('<pre>'.print_r($_POST,1).'</pre>');?>
</body>
</html>
You don't want to write a custom rule and you insist on manipulating the data before validation. Your options are limited since the plugin is automatically capturing all the validation triggering events. This is my suggested workaround.
Create two input fields...
one visible for the user (no validation)
one hidden for validation. (validation message presented though)
Upon entering any data into visible field, you would programmatically copy and modify the data as needed into the hidden field.
Then programmatically trigger validation on the hidden field.
Something like this.
HTML:
<input type="text" id="url" />
<input type="hidden" name="url" />
jQuery:
$('#url').on('blur keyup', function() {
var myurl = $(this).val(); // entered value
// manipulate and sanitize the value as desired
$('[name="url"]').val() = newvalue; // copy the new value into the hidden field.
$('[name="url"]').valid(); // trigger validation on the hidden field
});
NOTES:
You'll have to enable validation on hidden fields by properly setting the ignore option to something that allows it. [] will enable validation on all hidden fields.
You might have to use the errorPlacement option to tweak the placement of the error message for this hidden field. You can do this conditionally.
I have a form with several different text inputs. The value of each corresponds to a unique JavaScript variable. The variable is then written out on the page.
Is there a way to update the variable automatically so the user doesn't have to hit submit and reload the page each time? I have heard AJAX could be a potential answer to this, but I am unfamiliar with it. If that route is best, are there certain scripts that would be recommended?
You might want to look into jQuery as a good first start into javscript in the browser. For instance, you could write:
<form id="form-id">
<input id="first" type="text" />
<input id="second" type="text" />
<input id="third" type="text" />
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var first, second, third;
$(function(){
$("#form-id").submit(function(){
first = $("#first").value();
second = $("#second").value();
third = $("#third").value();
return false; //Prevent the form from submitting.
});
});
</script>
http://jquery.com/
I have a text field <input type="text" id="search" /> and I would like to execute a JavaScript function every time the user change the content in it (letter by letter). How can I do this using jQuery?
I tried to implement the function as the answer to Using JQuery, how do you detect if the value of a text input has changed while the field still has focus? but nothing happens for me.
Here is my HTML:
<html>
<head>
<script type="text/javascript" src="/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="/search.js"></script>
</head>
<body>
<form>
<input type="text" name="search" id="search" />
</form>
</body>
</html>
My search.js is:
var target = $('#search'), val = target.val();
function search()
{
alert('search');
}
target.keyup(search);
I have also tried with (nothing happens):
$('input[name=search]').change(function() {
alert('changed');
})
And if I try just adding some HTML using jQuery, it works:
$(function(){
$("<p>hello</p>").insertAfter("#search");
})
The change event doesn't fire until the control loses focus. If you are only interested in text, you can use .keypress() to do something before the contents change, or .keyup() to do something afterwards.
Here is an example using keypress in jsfiddle: http://jsfiddle.net/R6vmZ/
I have the following page. I want to restore the input text if it has not been changed (when the focus is lost). How can I do this?
<html>
<head>
</head>
<body>
<script type="text/javascript">
function clearTextArea(object){
object.value = "";
}
</script>
<input type="text" id="option" value="test" onfocus="clearTextArea(this);"></input>
</body>
</html>
Is there anything against using an
<input (...) onblur="this.value = 'test'">
listener?
(You can also do the same thing using a "placeholder" attribute if youre working with HTML5)
At your clearTextArea method take the current text in the text area and store in into a hidden field or a cookie. Then at on blur event, check if the value changed.