We Keep Coding

jQuery .ready is not working

Can anyone tell me why this code wouldn't work? I have an input and I'm trying to check weather or not the input is "start". So I do... how ever nothing is working - not even the .ready but I'm new so I have no idea what the problem is.
HTML
<form id="inputForm" onsubmit="return false;">
<input id="input" type="text" size="30" autofocus="autofocus" maxlength="100" autocomplete="off"/>
</form>
JS:
var input = "";
$(document).ready(function() {
$("#inputForm").submit(function() {
input = $("#input").val().toUpperCase();
if (input === "START") {
alert("worked");
}
$("#command_input").val("");
})
});

I suspect that you haven't included jQuery in your webpage. You can import it by adding
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Before the script tag for your code. (https://code.jquery.com/jquery has more jQuery CDNs too)
You really don't need jQuery to do this though. Here's the plain JS equivalent code working here:
var input = "";
document.body.onload = function() {
document.getElementById("inputForm").addEventListener("submit", function() {
input = document.getElementById("input").value.toUpperCase();
if (input === "START") {
alert("worked");
}
document.getElementById("command_input").value = "";
});
};

After looking at the code here: https://jsfiddle.net/cu7tn64o/1/
It seems to work fine! As the other commenters have mentioned, this is likely because you have not included jQuery in your html file like so:
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
https://code.jquery.com/

First include the jquery file using script tag in your html file.
Submit the form using jquery or in the below case I have submitted using a button. Onsubmit the value is taken from the input field and compared.
var input = "";
$(document).ready(function() {
$("#inputForm").submit(function() {
input = $("#input-value").val().toUpperCase();
if (input === "START") {
alert("worked");
}
else
{
alert("sorry");
}
$("#command_input").val("");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="inputForm" onsubmit="return false;">
<input id="input-value" type="text" size="30" autofocus="autofocus" maxlength="100" autocomplete="off"/>
<input type="submit" name="submit" value="submit" />
</form>

If you return false from the event handler, things ought to work.
var input = "";
$(document).ready(function() {
$("#inputForm").submit(function() {
input = $("#input-value").val().toUpperCase();
if (input === "START") {
alert("worked");
} else {
alert("sorry");
}
$("#command_input").val("");
// You have to return false HERE to prevent the default action of a
// form -- send a request to a server, that is
return false;
});
});

submitting the different value in jquery

I am having the below code to show input field with phone number in certain format. i.e., If phone number starts with 33,55 or 81 I will show it as (33) 1234-5678. If phone number starts with any other numbers, the format will be (123) 456-7890.
Now, the problem is when I submit the form, it is submitted as (33) 1234-5678. But I should submit 3312345678 and display (33) 1234-5678.
Could someone help me, how could i overcome this issue. I didnt use any jquery plugins;
<input id="criterion" name= "criterion" type="tel" class="inputboxBg" size="15" maxlength="60" style="width:85%;" value="" placeholder="" onkeypress = "submitOnReturn(event);">
jQuery(document).ready(function() {
jQuery("#criterion").change(function () {
var searchBy = jQuery('#smartWirelessSearch').val();
if(searchBy == 'Mobile'){
jQuery(this).attr("criterion", $(this).val());
var twoDigit = jQuery('#criterion').val().substr(0, 2);
var threeDigit = jQuery('#criterion').val().substr(0, 3);
var remainingDigits = jQuery('#criterion').val().substr(2, 10);
if (twoDigit == '33' || twoDigit == '55' || twoDigit == '81') {
jQuery('#criterion').val('('+twoDigit+')'+' '+remainingDigits.substr(0,4)+'-'+remainingDigits.substr(4,8));
} else {
jQuery('#criterion').val('('+threeDigit+')'+' '+remainingDigits.substr(1,3)+'-'+remainingDigits.substr(4,8));
}
}
});
});

You can change the value when the form is submitted, just before it is sent to the server:
$("form").on("submit", function(){
var originalVal = $("#criterion").val();
var newVal = originalVal.replace(/[^\d]/g, '');
$("#criterion").val(newVal);
});

You could have a hidden input that you store the original value of the input before modifying it.
<input id="criterion" name= "criterion" type="tel" class="inputboxBg" size="15" maxlength="60" style="width:85%;" value="" placeholder="" onkeypress = "submitOnReturn(event);">
<input type="hidden" id="org" name="org" />
-
$(document).ready(function() {
$("#criterion").change(function () {
var searchBy = $('#smartWirelessSearch').val();
$('#org').val($(this).val());
if(searchBy == 'Mobile'){
$(this).attr("criterion", $(this).val());
var twoDigit = $('#criterion').val().substr(0, 2);
var threeDigit = $('#criterion').val().substr(0, 3);
var remainingDigits = $('#criterion').val().substr(2, 10);
if (twoDigit == '33' || twoDigit == '55' || twoDigit == '81') {
$('#criterion').val('('+twoDigit+')'+' '+remainingDigits.substr(0,4)+'-'+remainingDigits.substr(4,8));
} else {
$('#criterion').val('('+threeDigit+')'+' '+remainingDigits.substr(1,3)+'-'+remainingDigits.substr(4,8));
}
}
});
});
If you need to have the original cleaned value all the time, there are many ways to do that too. One simple solution is to have clean it by your self everytime input changes.
If so, replace $('#org').val($(this).val()); by $('#org').val($(this).val().replace(/[^\d]/g, ''));
This basically replaces everything that is not a digit with an empty string.

There are two possibilities to solve this, the first is to have a second (extra) hidden input like:
<input id="criterion" name= "criterion" type="tel" class="inputboxBg" size="15" maxlength="60" style="width:85%;" value="" placeholder="" onkeypress = "submitOnReturn(event);">
<input id="criterion_hidden" name= "criterion_real" type="hidden" size="15" maxlength="60" value="" placeholder="" onkeypress = "submitOnReturn(event);">
And populate it in your jquery:
jQuery(document).ready(function() {
jQuery("#criterion").change(function () {
var searchBy = jQuery('#smartWirelessSearch').val();
if(searchBy == 'Mobile'){
jQuery(this).attr("criterion", $(this).val());
var twoDigit = jQuery('#criterion').val().substr(0, 2);
var threeDigit = jQuery('#criterion').val().substr(0, 3);
var remainingDigits = jQuery('#criterion').val().substr(2, 10);
$("#criterion_hidden").val(twoDigit + remainingDigits); //update it here.
if (twoDigit == '33' || twoDigit == '55' || twoDigit == '81') {
jQuery('#criterion').val('('+twoDigit+')'+' '+remainingDigits.substr(0,4)+'-'+remainingDigits.substr(4,8));
} else {
jQuery('#criterion').val('('+threeDigit+')'+' '+remainingDigits.substr(1,3)+'-'+remainingDigits.substr(4,8));
}
}
});
});
The other solution is to change the value on the server side (PHP?) by using a replace with a regular expression such as /[^\d]/g.

On submit of the form replace input value of ( ) - with empty string "".

I would suggest two solutions:
1. Toggle Format
With this solution, you either show the formatted value in the input, or the clean digit-only value. So you would take care to show the digit-only value when the form is submitted, but also when the user edits the value (as suggested by #Rune FS):
jQuery(function($) {
function cleanMobile() {
if ($('#smartWirelessSearch').val() == 'Mobile') {
// Strip all non-digit characters
$("#criterion").val($("#criterion").val().replace(/[^\d]/g, ''));
}
}
function formatMobile() {
if ($('#smartWirelessSearch').val() == 'Mobile') {
// Apply format after first stripping all non-digit characters
$("#criterion").val($("#criterion").val()
.replace(/[^\d]/g, '')
.replace(/(33|55|81|...)(.*?)(....)$/, '($1) $2-$3'));
}
}
$("#myform").submit(cleanMobile);
$("#criterion").blur(formatMobile).focus(cleanMobile).keypress(function(e) {
if (e.keyCode == 13) {
$(this).closest('form').submit();
}
});
// Set initial format correctly on page load
formatMobile();
}, jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
<select id="smartWirelessSearch">
<option value="Mobile">Mobile</option>
</select>
<input id="criterion" name="criterion" type="tel" class="inputboxBg"
size="15" maxlength="60" style="width:85%;" value="" placeholder="">
<input type="submit" value="submit">
</form>
Run the snippet to see how it responds to focus and submit.
Note that the code above also:
Uses a regular expression to format the number;
attaches the keypress handler via code instead of the element's onkeypress attribute;
defines functions for the format manipulations so these can be referenced in blur, focus and submit events;
defines a dummy smartWirelessSearch element so the code is compatible with your form;
gave the form an id myform, which you should replace with yours.
2. Use Hidden Input
If you do not want the input value to visibly change at form submission, you could add a hidden input and give that the digit-only value, like this:
<input id="criterionClean" name="criterionClean" type="hidden">
<input id="criterion" name= "criterion" type="tel" class="inputboxBg" size="15"
maxlength="60" style="width:85%;" value="" placeholder=""
onkeypress="submitOnReturn(event);">
In your Javascript add one line:
if(searchBy == 'Mobile'){
// ... your code ...
// Then pass the digits only in the hidden input
$('#criterionClean').val($(this).val().replace(/[^\d]/g, ''));
}
Now you'll submit both the formatted and the cleaned value. Your server code could then use the clean digit-only value.
If you prefer the clean value to be called #criterion, then swap the names of the two inputs in html and in your code.

how to check the status of css through javascript

I have a JavaScript file that validates if the text-box is filled out or not.
I want to make it that if all the text-boxes are all filled out correctly, it should go on to the next page or what ever the case is. (In my case just to display an alert message box.) I would appreciate any answer as soon as possible. Thanks in advance.
HTML
<form name="form" onSubmit="return validate()" method="post">
<p>
<label class="tittle">Name:</label>
<span>
<input type="text" name="firstname"
placeholder="First Name" class="info"
size="25" maxlength="25"
onBlur="return validateFirstName()">
<label class="fillerror" id="fillFirst">
First name is required
</label>
</span>
<span>
<input type="text" name="lastname"
placeholder="Last Name" class="info"
size="25" maxlength="25"
onBlur="return validateLastName()">
<label class="fillerror" id="fillLast">
Last name is required
</label>
</span>
</p>
<p>
<input type="button" name="register"
value="Register" class="register"
onClick="return validateFirstName(),
validateLastName(), allValidated();">
</p>
</form>
JavaScript
function xValidate(inbox, fill)
{
inbox.style.backgroundColor="rgba(255, 0, 0, .1)";
inbox.style.borderLeft="3px solid red";
fill.style.display="block";
}
function yValidate(inbox, fill)
{
inbox.style.backgroundColor="white";
inbox.style.borderLeft="3px solid rgb(169, 184, 1)";
fill.style.display="none";
}
function validateFirstName()
{
var frstnm = document.forms["form"] ["firstname"].value;
var inbox = document.forms["form"] ["firstname"];
var firstname = document.getElementById("fillFirst");
if (frstnm==null || frstnm=="" || frstnm==" ")
{
xValidate(inbox, firstname);
}
else
{
yValidate(inbox, firstname);
}
}
function validateLastName()
{
var lstnm = document.forms["form"] ["lastname"].value;
var inbox = document.forms ["form"] ["lastname"];
var lastname = document.getElementById("fillLast");
if (lstnm==null || lstnm=="" || lstnm==" ")
{
xValidate(inbox, lastname);
}
else
{
yValidate(inbox, lastname);
}
}
This is the function I need help on, all other code here was just for information to understand this last statement:
function allValidated()
{
var allrGood = document.getElementsByClassName("fillerror");
if (allrGood.style.display="none" == true)
{
alert("They're all good");
}
else if (allrGood.style.display="block" == true)
{
alert("Something is displayed 'block'");
}
}
If it doesn't work with an 'if' statement, then maybe it would work with a 'for' or 'while' statement (looping statement) then please show me.

First I would really suggest that you start using jQuery. It'll make things quite easy.
Here is a pure JS solution though -
First assign a particular class to all the controls that need to be
validated.
On the onchange event of the controls, if the controls are valid,
add a certain class say - ctrlValid , else add another class -
ctrlInvalid.
Then on the click of the button, get all elements by the class name
ctrlInvalid
Check if the length is 0, if it is - redirect, else show message.
If you continue to use your solution then -
var blIsFormValid = true;
for(var i =0; i < allrGood.length; ++i)
{
if(allrGood[i].style.display != 'none')
{
blIsFormValid = false;
break;
}
}
if(blIsFormValid)
{
// Redirect check - http://stackoverflow.com/a/4745622/903324
window.location = "http://www.yoururl.com";
}
else
{
// Show message...
}

One problem with your code is document.getElementsByClassName() returns an array of elemets, not just one element. So allrGood.style doesn't quite make sense.
Also, allrGood.style.display="none" assigns "none" to allrGood.style.display instead of comparing them. Remember to use == for a loose comparison or === for a strict comparison.
Using jQuery you can iterate through each label of class fillerror and check to see if it's visible, like so:
function areTheyAllValidated() {
var valid = true;
$('label.fillerror').each(function(index, element) {
if ($(element).is(":visible"))
valid = false;
});
return valid;
}

You have to pop a class or ID on your alert control so you can style that sucka.
Something like below should get you in a decent direction. With another bell and whistle for sags.
'SuperCool': function() {
var sName = document.getElementById('ip1').value;
Alert.SuperCool( "Thank you "+sName+". Could be expanded to do something a little more clever" );
}
Example alert styling.
.SuperCool {
background: red;
width: 200px;
height: 100px;
}

Easier way to toggle field descriptions using JavaScript

I've got a simple form that takes user feedback. Basically I just want to toggle the input values - Name, E-mail, Subject, Comments.
<form name="email_rep" id="email_rep" method="POST">
<input type="text" width="100" name="cust" value="Name" maxlength="100" class="fields" onFocus="toggleLabels(1)" onBlur="toggleLabels(5)">
<input type="text" width="100" name="cust_email" maxlength="100" value="E-mail" class="fields" onFocus="toggleLabels(2)" onBlur="toggleLabels(6)"><br />
<input type="text" width="100" name="cust_subject" value="Subject" maxlength="100" class="fields-alt" onFocus="toggleLabels(3)" onBlur="toggleLabels(7)"><br />
<input type="text" width="100" name="cust_comment" maxlength="500" value="Comments" class="fields-alt" onFocus="toggleLabels(4)" onBlur="toggleLabels(8)"><br />
<input type="submit" value="Send" name="submit_email" id="submit" onClick="sendButton()">
</form>
and the corresponding JS:
function toggleLabels(x) {
switch(x) {
case 1: (document.email_rep.cust.value=="Name") ? (document.email_rep.cust.value="") : (false); break;
case 2: (document.email_rep.cust_email.value=="E-mail") ? (document.email_rep.cust_email.value="") : (false); break;
case 3: (document.email_rep.cust_subject.value=="Subject") ? (document.email_rep.cust_subject.value="") : (false); break;
case 4: (document.email_rep.cust_comment.value=="Comments") ? (document.email_rep.cust_comment.value="") : (false); break;
case 5: (document.email_rep.cust.value=="") ? (document.email_rep.cust.value="Name") : (false); break;
case 6: (document.email_rep.cust_email.value=="") ? (document.email_rep.cust_email.value="E-mail") : (false); break;
case 7: (document.email_rep.cust_subject.value=="") ? (document.email_rep.cust_subject.value="Subject") : (false); break;
case 8: (document.email_rep.cust_comment.value=="") ? (document.email_rep.cust_comment.value="Comments") : (false); break;
}
}
I mean it works, but it's not exactly concise and definitely isn't reusable. I was thinking passing another variable - say "y" where y="email_rep", and possibly another - say "z" where z="Name"/"E-mail"/"Subject"/"Comments", but it's not working for me, I don't know if it's like the strings being passed or what the issue is. Any suggestions for making this simpler?

This seems to work. It uses placeholders, but also uses jQuery to simulate placeholder functionality: http://jsfiddle.net/kmkRV/
$(function() {
$("input:text").each(function() {
$(this).val($(this).attr("placeholder"));
}).focus(function() {
if ($(this).val() == $(this).attr("placeholder")) {
$(this).val("");
}
}).blur(function() {
if ($(this).val() == "") {
$(this).val($(this).attr("placeholder"));
}
});
});
That's the jQuery javascript. Here's the HTML:
<form name="email_rep" id="email_rep" method="POST">
<input type="text" width="100" name="cust" placeholder="Name" maxlength="100">
<input type="text" width="100" name="cust_email" maxlength="100" placeholder="E-mail"><br />
<input type="text" width="100" name="cust_subject" placeholder="Subject"><br />
<input type="text" width="100" name="cust_comment" maxlength="500" placeholder="Comments"><br />
<input type="submit" value="Send" name="submit_email" id="submit" onClick="sendButton()"> </form>

I think this is what you're trying to do:
function toggleLabelValue(obj, val) {
if (obj.value == val) {
obj.value = "";
} else {
obj.value = val;
}
}
// examples:
toggleLabelValue(document.email_rep.cust, "Name");
toggleLabelValue(document.email_rep.cust_email, "E-mail");
Or, since all your objects have the same root, you could build that root into the function like this:
function toggleRepLabelValue(field, val) {
if (document.email_rep[field].value == val) {
document.email_rep[field].value = "";
} else {
document.email_rep[field].value = val;
}
}
// examples:
toggleRepLabelValue("cust", "Name");
toggleRepLabelValue("cust_email", "E-mail");

Using jQuery, I've come up with possibly the most re-usable solution. Yes, it uses jQuery, however it's a very powerful, useful tool.
I've done some magic with .data() to store the original value. Take a look at this JSFiddle.
Code:
$(document).ready(function() {
$("input").each(function() {
$(this).data("placeholder", $(this).val());
});
$("input").live("focus", function() {
if($(this).val() == $(this).data("placeholder"))
{
$(this).val('');
}
});
$("input").live("blur", function() {
if(!$(this).val().length)
{
$(this).val($(this).data("placeholder"));
}
});
});
You could probably shrink it by a few lines, but I wanted it to be clear. Also, this will affect any new elements added dynamically to the DOM, due to using .live().
EDIT
To make for cleaner markup, have a look at THIS JSFiddle; it grabs the placeholder attribute and puts it into value as a fallback.
$(document).ready(function() {
$("input").each(function() {
$(this).data("placeholder", $(this).attr("placeholder"));
$(this).val($(this).data("placeholder"));
});
$("input").live("focus", function() {
if($(this).val() == $(this).data("placeholder"))
{
$(this).val('');
}
});
$("input").live("blur", function() {
if(!$(this).val().length)
{
$(this).val($(this).data("placeholder"));
}
});
} );

HTML5 has a lovely new attribute for input fields called placeholder.
Although this isn't supported by some browsers yet, I thought it worth pointing out as an answer for future readers.
You basically use it like:
<input type="text" placeholder="Your name">
http://jsfiddle.net/ZP9z3/
In Firefox, placing focus on the input removed the placeholder text, and on blur, if a new value isn't entered, the placeholder text is restored.
UPDATE
Using jQuery you can also mimick the behaviour of the placeholder with a small bit of code:
$('input:text').focus(function(){
$(this).val('');
}).blur(function(){
if($(this).val() == "")
{
$(this).val($(this).attr('placeholder'))
}
}
);
http://jsfiddle.net/ZP9z3/3/
This basically sets up each input so that it's placeholder text is used if it is empty.

Delete default value of an input text on click

I have an input text:
<input name="Email" type="text" id="Email" value="email#abc.example" />
I want to put a default value like "What's your programming question? be specific." in Stack Overflow, and when the user click on it the default value disapear.

For future reference, I have to include the HTML5 way to do this.
<input name="Email" type="text" id="Email" value="email#abc.example" placeholder="What's your programming question ? be specific." />
If you have a HTML5 doctype and a HTML5-compliant browser, this will work. However, many browsers do not currently support this, so at least Internet Explorer users will not be able to see your placeholder. However, see JQuery HTML5 placeholder fix « Kamikazemusic.com for a solution. Using that, you'll be very modern and standards-compliant, while also providing the functionality to most users.
Also, the provided link is a well-tested and well-developed solution, which should work out of the box.

Although, this solution works, I would recommend you try MvanGeest's solution below which uses the placeholder-attribute and a JavaScript fallback for browsers which don't support it yet.
If you are looking for a Mootools equivalent to the jQuery fallback in MvanGeest's reply, here is one.
--
You should probably use onfocus and onblur events in order to support keyboard users who tab through forms.
Here's an example:
<input type="text" value="email#abc.example" name="Email" id="Email"
onblur="if (this.value == '') {this.value = 'email#abc.example';}"
onfocus="if (this.value == 'email#abc.example') {this.value = '';}" />

This is somewhat cleaner, i think. Note the usage of the "defaultValue" property of the input:
<script>
function onBlur(el) {
if (el.value == '') {
el.value = el.defaultValue;
}
}
function onFocus(el) {
if (el.value == el.defaultValue) {
el.value = '';
}
}
</script>
<form>
<input type="text" value="[some default value]" onblur="onBlur(this)" onfocus="onFocus(this)" />
</form>

Using jQuery, you can do:
$("input:text").each(function ()
{
// store default value
var v = this.value;
$(this).blur(function ()
{
// if input is empty, reset value to default
if (this.value.length == 0) this.value = v;
}).focus(function ()
{
// when input is focused, clear its contents
this.value = "";
});
});
And you could stuff all this into a custom plug-in, like so:
jQuery.fn.hideObtrusiveText = function ()
{
return this.each(function ()
{
var v = this.value;
$(this).blur(function ()
{
if (this.value.length == 0) this.value = v;
}).focus(function ()
{
this.value = "";
});
});
};
Here's how you would use the plug-in:
$("input:text").hideObtrusiveText();
Advantages to using this code is:
Its unobtrusive and doesn't pollute the DOM
Code re-use: it works on multiple fields
It figures out the default value of inputs by itself
Non-jQuery approach:
function hideObtrusiveText(id)
{
var e = document.getElementById(id);
var v = e.value;
e.onfocus = function ()
{
e.value = "";
};
e.onblur = function ()
{
if (e.value.length == 0) e.value = v;
};
}

Enter the following
inside the tag, just add onFocus="value=''" so that your final code looks like this:
<input type="email" id="Email" onFocus="value=''">
This makes use of the javascript onFocus() event holder.

Just use a placeholder tag in your input instead of value

we can do it without using js in the following way using the "placeholder" attribute of HTML5
( the default text disappears when the user starts to type in, but not on just clicking )
<input type="email" id="email" placeholder="xyz#abc.example">
see this: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_placeholder

<input name="Email" type="text" id="Email" placeholder="enter your question" />
The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).
The short hint is displayed in the input field before the user enters a value.
Note: The placeholder attribute works with the following input types: text, search, url, tel, email, and password.
I think this will help.

Why remove value? its useful, but why not try CSS
input[submit] {
font-size: 0 !important;
}
Value is important to check & validate ur PHP

Here is a jQuery solution. I always let the default value reappear when a user clears the input field.
<input name="Email" value="What's your programming question ? be specific." type="text" id="Email" value="email#abc.com" />
<script>
$("#Email").blur(
function (){
if ($(this).val() == "")
$(this).val($(this).prop("defaultValue"));
}
).focus(
function (){
if ($(this).val() == $(this).prop("defaultValue"))
$(this).val("");
}
);
</script>

I didn't see any really simple answers like this one, so maybe it will help someone out.
var inputText = document.getElementById("inputText");
inputText.onfocus = function(){ if (inputText.value != ""){ inputText.value = "";}; }
inputText.onblur = function(){ if (inputText.value != "default value"){ inputText.value = "default value";}; }

Here is an easy way.
#animal represents any buttons from the DOM.
#animal-value is the input id that being targeted.
$("#animal").on('click', function(){
var userVal = $("#animal-value").val(); // storing that value
console.log(userVal); // logging the stored value to the console
$("#animal-value").val('') // reseting it to empty
});

Here is very simple javascript. It works fine for me :
// JavaScript:
function sFocus (field) {
if(field.value == 'Enter your search') {
field.value = '';
}
field.className = "darkinput";
}
function sBlur (field) {
if (field.value == '') {
field.value = 'Enter your search';
field.className = "lightinput";
}
else {
field.className = "darkinput";
}
}
// HTML
<form>
<label class="screen-reader-text" for="s">Search for</label>
<input
type="text"
class="lightinput"
onfocus="sFocus(this)"
onblur="sBlur(this)"
value="Enter your search" name="s" id="s"
/>
</form>