Search box active when visiting website. - javascript

I have a search box that I would like to make active when the customer visits my web page.
My HTML is:
<form class="form-search top-search" action="Search.aspx" onsubmit="return validateSearch(this);" method="GET">
<input type="text" class="input-medium search-query yui-ac-input" name="ss" id="ss" placeholder="Search and find it fast" title="Search and find it fast" onblur="if (this.value == '') { this.value = 'Search and find it fast'; }" onfocus="if ((this.value == 'Search and find it fast')||(this.value == 'Search and find it fast')) { this.value = ''; }" onkeypress="if ((this.value == 'Please enter a keyword or item #')||(this.value == 'Search and find it fast')) { this.value = ''; } else{ document.getElementsByName('ss')[0].style.color='black'; }" autocomplete="off">
<input type="submit" title="Search" class="btn btn-orange SearchButton" value="Search">
</form>
I'm just wanting to default the user into the field, like how Amazon defaults you into their search box.

You can use the HTML5 autofocus attribute:
<input type="text" autofocus>

You can use .focus() to focus the input
$(function () {
$('#ss').focus();
});
DEMO

Pure Javascript solution, works IE6+ and any other browser.
Put this before body end tag
<script type="text/javascript">
var obj = document.getElementById("ss");
obj.focus();
</script>
On browsers, that support html5, you can use autofocus attribute inside input.
<input autofocus type="text" class="input-medium search-query yui-ac-input" name="ss" id="ss" placeholder="Search and find it fast" title="Search and find it fast" autocomplete="off" />

You can use any of these options After Page Load.
$('#ss').focus();
$('#ss').select();
$('#ss').trigger('focus');
$('#ss').trigger('click');
For Example:
$(document).ready(function(){
$('#ss').trigger('click');
});

Related

validation of form inputs in JavaScript

I want to validate a input fields of form in javascript. I have searched a lot on net and always got different ways to do it. It was so confusing. I want for every single input if it is left empty an alert should popup. Here is my code
<form method="post" action="form.html" id="FormContact" name="frm">
<p>Full Name: <br /><br /> <input type="text" name="FullName" size="50" id="Name"></p>
<span id="error"></span>
<p>Email:<br /><br /> <input type="email" name="Email" size="50" id="Mail"></p>
<p> Subject:<br /><br /> <input type="text" name="subject" size="50" id="Subject"></p>
Message:<br /><br />
<textarea rows="15" cols="75" name="Comment" id="text">
</textarea> <br /><br />
<input type="submit" value="Post Comment">
</form>
I got it done sometimes but that only worked for Full Name field.
Thanks and regards,
You can do something like this, to have an alert popup for each empty input.
$('form').on('submit', function(){
$('input').each(function(){
if($(this).val() === ""){
alert($(this).attr('name') + " is empty");
}
});
});
http://www.w3schools.com/js/js_form_validation.asp
if you're willing to use javascript, this would be pretty easy to implement.
use jquery validation plugin.
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script>
$("#FormContact").validate({
rules: {
FullName: {
required:true
}
},
messages:{
FullName:{
required:"Please Enter FullName."
}
}
});
</script>
USE submit method of jquery the use each loop to validate the controls
LIVE CODE
$('form#FormContact').submit(function(){
var i= 0;
$('input').each(function(i,j){
if($(this).val() == "" || $(this).val() == undefined){
alert('empty');
i++;
}else{
i=0;
}
})
if(i == 0){
return false;
}else{
return true;
}
})

Remove unchanged input fields from Form while submit

In my web application I have edit profile page. In editprofile page their is many fields like
Name : <input type="text" name="name"/>
Location : <input type="text" class="geolocation" name="location">
Birthdata : <input type="date" name="dob">
Profile Picture : <input type="file" name="photo"/>
I want to send back the data of only the fields which are edited and not all the fields.
I'd normally do something like this on the backend.... but for your requirement you could remove the inputs that haven't changed. When you generate the html you can define an extra data attribute. Here's how I would do that:
HTML:
<form id="myform">
<input type="text" id="Name" data-initial="Foo" value="Foo" />
<input type="text" id="Location" data-initial="Bar" value="Bar" />
<input type="submit" value="Submit" />
</form>
JS:
$("#myform").submit( function() {
$(this).find("input").filter( function() {
$this = $(this);
return $this.data("initial") == $this.val();
}).remove();
});
http://jsfiddle.net/uLe7T/
I added an alert in the fiddle so you can see that they are removed before the form is submitted
jsFiddle
HTML
<input id="test" type="text" value="Some Text" data-value="Some Text">
JS
$('#test').blur(function() {
el = $(this);
if (el.val() != el.attr('data-value')) {
console.log('Edited');
} else {
console.log('Not Edited');
}
});

Issue with focus() after detach and insertBefore

I am having an issue with using the Tab key to move through the fields when I detach the current focussed element and insert it again. Please find my code in jsfiddle.. Also see below:
JS Code:
$(document).ready(function() {
$('.formElem').focusin(function() {
// Remove default text on focus in
if ($(this).val() == $(this).attr('title')) {
$(this).val('').removeClass('defaultText');
if (($(this).attr('id') == 'reg_pwd') || ($(this).attr('id') == 'reg_conf_pwd')) {
id = '#' + $(this).attr('id');
marker = $('<span>123</span>').insertBefore($(this));
$(this).detach().attr('type', 'password').insertAfter(marker);
marker.remove();
}
if ($(this).get(0) != $(':focus').get(0)) {
$(this).focus();
}
}
}).focusout(function() {
// Remove default text on focus out
if ($(this).val() === '') {
$(this).val($(this).attr('title')).addClass('defaultText');
if (($(this).attr('id') == 'reg_pwd') || ($(this).attr('id') == 'reg_conf_pwd')) {
marker = $('<span>123</span>').insertBefore($(this));
$(this).detach().attr('type', 'text').insertAfter(marker);
marker.remove();
}
}
});
});​
The code changes the type of the field from text to password and back and forth. When you click or use Tab to reach the password field, it loses the focus after it has been added again. Thanks if somebody can figure out why.
It appears that your using html5, so perhaps you could take advantage of the placeholder attribute. Instead of <input value="blah" /> use <input placeholder="blah" />. Now you don't even need to have the defaultText class, so you can remove that, along with associated jquery code you have that removes and adds classes.
Now you can also change the <input type="text" /> to <input type="password" /> for the password fields. I'm not sure what your trying to do with <span>123</span>. So perhaps, I don't fully understand your question. But the below seems to accomplish the effect your trying to do.
A jsfiddle as well http://jsfiddle.net/8BBRC/2
edit: Had wrong jsfiddle link.
<input type="text" class="formElem" id="reg_fullname" name="fullname" placeholder="Full Name" title="Full Name" /><br />
<input type="email" class="formElem" id="reg_email" name="email" placeholder="Email Address" title="Email Address" /><br />
<input type="password" class="formElem" id="reg_pwd" name="pwd" placeholder="Confirm" title="Password" /><br />
<input type="password" class="formElem" id="reg_conf_pwd" name="conf_pwd" placeholder="Confirm Password" title="Confirm Password" /><br />
<input type="submit" id="reg_submit" value="Submit" /><br />

Form's input default text

I desperately need to have my search form's default input text to change based on the user's selection in the form's select input. The current default input text is Enter Keywords… and stays the same no matter what option is selected. What I want, for example, is when the user selects "Employee Directory" to have the default input text for the search field to change to Enter Employee's First Name…
This is the desired input fields for each selection:
"Website" = Enter Keywords…
"Employee Directory" = Enter Employee's First Name…
"Publications Center" = Enter Publication's Information…
Here is my code as it sits currently:
<script type="text/javascript">
function dosearch() {
var sf=document.searchform;
var submitto = sf.engines.options[sf.engines.selectedIndex].value + escape(sf.s.value) + ((sf.engines.selectedIndex=='1')?('&cat=29'):(''));
window.location.href = submitto;
return false;
}
</script>
<form name="searchform" class="search" method="get" onSubmit="return dosearch();">
<select class="engines" name="engines" id="el08">
<option value="/?s=" selected>Website</option>
<option value="/?s=">Publications Center</option>
<option value="/employee-directory?query=name&contact_dir_s=">Employee Directory</option>
</select>
<input name="s" class="input" type="text" value="Enter Keywords..." onfocus="if (this.value == 'Enter Keywords...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter Keywords...';}" size="18" maxlength="50">
<input type="submit" name="searchsubmit" class="button" value="Go" />
</form>
Anybody with the expertise to help code this or offer suggestions, please do! Cheers!
Updated with code that actually works (only tested in IE). This version notes when the selected search option changes and then updates the input if it was displaying the default prompt that went with the previously selected search option.
<body onload="setDefault();">
<form name="searchform" class="search" method="get" onSubmit="return dosearch();">
<select class="engines" name="engines" id="el08" onchange="setDefault();">
<option value="/?s=" selected>Website</option>
<option value="/?s=">Publications Center</option>
<option value="/employee-directory?query=name&contact_dir_s=">Employee Directory</option>
</select>
<input name="s" id="searchBox" class="input" type="text" value="" onfocus="myFocusHandler(this);" onblur="myBlurHandler(this);" size="18" maxlength="50">
<input type="submit" name="searchsubmit" class="button" value="Go" />
</form>
</body>
<script>
function myFocusHandler(textField) {
if (textField.value == defText)
textField.value = "";
}
function myBlurHandler(textField) {
if (textField.value == "")
textField.value = defText;
}
var defText;
var defOptions = {
"Website" : "Enter keywords...",
"Employee Directory" : "Enter employee's first name...",
"Publications Center" : "Enter Publication's Information..."
// and any other options you may need
};
function setDefault() {
var sel = document.getElementById("el08"),
input = document.getElementById("searchBox"),
prevDefText = defText;
defText = defOptions[sel.options[sel.selectedIndex].text] || "Enter search term...";
if (prevDefText == undefined || input.value == prevDefText)
input.value = defText;
}
</script>
Could cut down on use of globals by using a variation of the module pattern or something, but that's an issue for another day.

setting values [jquery or javascript]

So I have an input box, and when a user types something in it I want a second textarea change its value to match that of the input's, on click. How can I do this using javascript, jquery, or something simpler, or php...
Here's my code:
This is the first input:
<form class="form1" action=../search.php method="post">
<input class="askInput" type="text" name="q" value="Search for tags and users or ask a question" onclick="if(this.value == 'Search for tags and users or ask a question') this.value='';" onblur="if(this.value.length == 0) this.value='Search for tags and users or ask a question';"></input>
<input class="searchEnter" type="image" name="submit" src="../Images/askQuestion.png"></input></form>
This is the textarea:
<div id="askCenter">
<img class="close" src="../Images/closeAsk.png"></img>
<h1><img src="../Images/askQuestionTitle.png" alt="Ask this question"></img></h1>
<textarea></textarea>
<span class="holder"><input type="text" value="add tags" onclick="if(this.value == 'add tags') this.value='';" onblur="if(this.value.length == 0) this.value='add tags';"></input>
<span class="note">∗ Tags are separated by commas</span>
</span>
<input class="askAway" type="image" src="../Images/askAway.png" alt="Ask away"/>
Without seeing your mark-up, something like this would work, albeit it's not tailored to your needs:
$('#first').keypress(
function(e){
var string = $(this).val();
$('#textarea').val(string);
});
$('form').submit(
function(){
return false;
});
JS Fiddle demo.
With your updated question, with the html from your forms:
$('input:text[name="q"]').keypress(
function(e){
$('#askCenter').find('textarea').val($(this).val());
});
TRY IT HERE
HTML MARKUP
<input type="text" id="inputField"></textarea>
<textarea id="textArea"></textarea>
JQUERY
$(document).ready(function(){
$('#inputField').keyup(function() {
$('#textArea').val($(this).val());
});
});
<input type="text" id="txt1" onkeyup="document.getElementById('txt2').value=this.value;"/>
<input type="text" id="txt2" />

Categories