Auto Clear & Refill Texta Area Value - javascript

I have a simple form using the Value to inform the user what they're to put in each text area. I have been able to make the text area's auto clear using this javascript:
<script type="text/javascript">
function setValue(field)
{
if(''!=field.defaultValue)
{
if(field.value==field.defaultValue)
{
field.value='';
}
else if(''==field.value)
{
field.value=field.defaultValue;
}
}
}
</script>
What would I need to add to have the Value re-appear if the user doesn't fill the text area and they no longer have it selected? Here's the form markup, if that helps any:
<form method="post" action="<?php echo $PHP_SELF; ?>">
<input type="text" name="first" value="First Name" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)">
<input type="text" name="last" value="Last Name" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)"> <br>
<input type="text" name="address" value="Address" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)">
<input type="text" name="city" value="City" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)"><br>
<input type="text" name="state" value="State" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)">
<input type="text" name="zip" value="Zip" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)"><br>
<input type="text" name="phone" value="Phone" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)">
<input type="radio" name="day" value="Day"> Day
<input type="radio" name="evening" value="Evening"> Evening <br>
<input type="text" name="email" value="Email" class="slide-form-input" onfocus="setValue(this)" onblur="setValue(this)">
<input type="submit" name="submit" value="Send Request" class="push_button blue">
(sorry for the poor wording, it's early!)
Thank you!
Any help with this would be much appreciated.

You are looking for the placeholder html5 attribute
<input type="text" palceholder="First Name" />
http://jsfiddle.net/MesvN/
http://davidwalsh.name/html5-placeholder

Related

HTML required tag not working for company and name

the required attribute don't seem to work for Company and Phone. It is just working for Name and Email. Can anybody help me with this?
<form>
<input type="text" name="name" value="" placeholder="Name" required />
<input type="text" name="company" value="" placeholder="Company" required />
<input type="text" name="email" value="" placeholder="Email" required />
<input type="text" name="phone" value="" placeholder="Phone" required />
<br />
<div onclick="catalog_popup_submit();"
class="button">Continue</div>
</form>
<form>
<input type="text" name="name" value="" placeholder="Name" required />
<input type="text" name="company" value="" placeholder="Company" required />
<input type="email" name="email" value="" placeholder="Email" required />
<input type="text" name="phone" pattern="[1-9]{1}[0-9]{9}" placeholder="Phone" title="Enter 10 digit mobile number"required />
<input type="submit" value="continue" />
</form>
The problem is with
<div onclick="catalog_popup_submit();"
class="button">Continue</div>
Try to include a submit button in the form.
<html>
<body>
<form>
<input type="text" name="name" value="" placeholder="Name" required />
<input type="text" name="company" value="" placeholder="Company" required />
<input type="email" name="email" value="" placeholder="Email" required />
<input type="text" name="phone" value="" placeholder="Phone" required />
<br />
<input type="submit" value="continue" />
</form>
</body>
</html>
<html>
<body>
<form>
<input type="text" name="name" value="" placeholder="Name" required />
<input type="text" name="company" value="" placeholder="Company" required />
<input type="text" name="email" value="" placeholder="Email" required />
<input type="text" name="phone" value="" placeholder="Phone" required />
<br />
<input type="submit" value="continue" />
</form>
</body>
</html>

How add value to array textbox in jquery?

How can I assign value to array named textbox?
Example:
<input type="text" name="amount[]" value="" />
<input type="text" name="amount[]" value="" />
<input type="text" name="amount[]" value="" />
Add values to Text box using jquery
$('input[name="amount[1]"]').val(20);
$('input[name="amount[2]"]').val(130);
$('input[name="amount[3]"]').val(50);
The above script is not working. Please help me to solve this problem.
You can use eq() or :eq()
$('input[name="amount[]"]').eq(0).val(20);
$('input[name="amount[]"]').eq(1).val(130);
$('input[name="amount[]"]').eq(2).val(50);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="amount[]" value="" />
<input type="text" name="amount[]" value="" />
<input type="text" name="amount[]" value="" />
or
$('input[name="amount[]"]:eq(0)').val(20);
$('input[name="amount[]"]:eq(1)').val(130);
$('input[name="amount[]"]:eq(2)').val(50);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="amount[]" value="" />
<input type="text" name="amount[]" value="" />
<input type="text" name="amount[]" value="" />

serialize a form in groups

Is it possible to serialize a form in separate groups?
<form id="form">
<input class="nameF" type="text" name="fName" value="first name">
<input class="nameF" type="text" name="lName" value="last name">
<input class="address" type="text" name="addOne" value="home address">
<input class="address" type="text" name="zip" value="zip code">
<input class="address" type="text" name="country" value="country">
</form>
$('#form').serialize();
//this gives me the complete form serialized
but can I break it down in groups with the fields containing class name?
Something like nameF : first+name&last+name and same for address, is this doable?
You can do like :
console.log($('.nameF').serialize());
console.log($('.address').serialize());
If you didn't get your answer , elaborate your question with full example.
<form id="form">
<input class="nameF" type="text" name="fName" value="first name"/>
<input class="nameF" type="text" name="lName" value="last name"/>
<input class="address" type="text" name="address[addOne]" value="home address"/>
<input class="address" type="text" name="address[zip]" value="zip code"/>
<input class="address" type="text" name="address[country]" value="country"/>
</form>
fiddle
You can use -
$('input .nameF').serialize();
$('input .address').serialize();
You can test it using-
alert(JSON.stringify($('input .nameF').serialize()));

text box are getting cut off in iphone lay out

when you reduce the browser window to iphone lay out....
you can see the different lay out....
the problem is right side of the text fields are being cut off...
how to fix it...
providing my code below.....
http://jsfiddle.net/jPvzL/1/
<input type="text" placeholder="Company Name " name="fullname" maxlength="30" required="required" id="id_username">
<input type="text" placeholder="Contact Name" name="company" maxlength="30" required="required" id="id_company">
<input type="text" placeholder="Address1" name="email" maxlength="75" required="required" id="id_email">
<input type="password" placeholder="Address2" name="password" maxlength="16" required="required" id="id_password">
<input type="password" placeholder="Address3" name="repassword" required="required" id="id_repassword">
<input type="text" placeholder="City " name="fullname" maxlength="30" required="required" id="id_username">
<div class="controls">
<select name="select" id="state" style="width: 300px;height: 38px;">
<option value="California" selected="">California</option>
<option value="New York">New York</option>
<option value="Texas">Texas</option>
</select>
</div>
<input type="text" placeholder="Zip" name="email" maxlength="75" required="required" id="id_email">
<div class="controls">
<select name="select" id="country" style="width: 300px;height: 38px;">
<option value="USA" selected="">USA</option>
<option value="India">India</option>
<option value="Korea">Korea</option>
<option value="Vietnam">Vietnam</option>
</select>
</div>
<input type="text" placeholder="Phone" name="company" maxlength="30" required="required" id="id_company">
<input type="text" placeholder="Fax" name="email" maxlength="75" required="required" id="id_email">
<input type="password" placeholder="Email" name="password" maxlength="16" required="required" id="id_password">
<input type="text" placeholder="URL" name="company" maxlength="30" required="required" id="id_company">
<input type="text" placeholder="GL Account" name="email" maxlength="75" required="required" id="id_email">
<input type="password" placeholder="" name="password" maxlength="16" required="required" id="id_password">
<textarea name="inquiry" placeholder="Notes" rows="3" required="required" id="id_inquiryForm" style="width:290px;"></textarea>
Looks like your #signup-modal div is set to a width of 125px. Just increase it to be the correct sizes to fit the inputs. Or remove 'overflow:hidden'
Had this issue a few weeks ago. I don't know what your CSS looks like, but try adding a percentage width to your input fields:
form input{width: 99%;}
YMMV. You may also have to add something for your textarea and select fields and tweak the percentage as needed.

Is textarea a required field?

I'm building a large form that will compile tour schedules of our clients (comedians). Seen here.
Whenever I delete the larger textarea at the bottom, the form stops work, ie. the submit button doesn't do anything.
Anyone why that might be happening? Thanks.
I don't know exactly what would be helpful, but here's the code for the div containing the form:
<div class="info-avails">
<form action="http://www.standupexperts.com/cgi-sys/formmail.pl" method="post" name="hgmailer" >
<input type="hidden" name="recipient" value="adam#standupexperts.com">
<input type="hidden" name="subject" value="FormMail E-Mail">
<p> Name:<span style="color:white">X-</span> <input type="text" name="name" size="20" value="">
<span style="color:white">X.X</span>Email: <input type="text" name="email" size="30" value=""><br />
Cell #: <span style="color:white">X.</span><input type="text" name="cell" size="20" value="">
Address:<span style="color:white">X</span><input type="text" name="address" size="30" value=""><br />
Website: <input type="text" name="website" size="20" value="">
Video Link:<input type="text" name="videolink" size="30" value=""><br />
<!-- Tell us about your event. <br /> <textarea name="comment" cols="40" rows="6"></textarea> <br /> -->
</p>
<div class="avails-method">
<h3>
Our avails method
</h3>
If you cannot use the form below, you can email your schedule. Use our notation system if you want your avails entered sooner.
<a href="http://www.mediafire.com/file/wqyo8tpwq536048/2013_Comedy_Caravan_Avails_Sheet.doc">
Download</a> our 2013 avails sheet.
<br /><br />
For routing purposes, we want to know the dates you are NOT available and what state you'll be on those dates. <br /><br />
Below, <em>an X is already placed on open/available weeks</em>. For booked dates, please enter days booked and the state.
Example:<ul>
<li>12-3: X (open)</li>
<li>12-10: X 11-14 NC (open except the 10th thru 14th of Dec in NC)</li>
<li>12-17: 19 OH, 22 IN (open except for the 19th of Dec in OH and the 22nd in IN)</li>
<li>We are unable to work with <em>just</em> the day of the week (3/11: Thurs-Sun)</li>
</ul>
</div>
<br class="clear" />
<h4>
2013 Avails/Schedule
</h4>
<div class="year2013">
<div class="jan-apr">
1/07: <input type="text" name="1/07__" size="20" value="X"><br />
1/14: <input type="text" name="1/14__" size="20" value="X"><br />
1/21: <input type="text" name="1/21__" size="20" value="X"><br />
1/28: <input type="text" name="1/28__" size="20" value="X"><br />
2/04: <input type="text" name="2/04__" size="20" value="X"><br />
2/11: <input type="text" name="2/11__" size="20" value="X"><br />
2/18: <input type="text" name="2/18__" size="20" value="X"><br />
2/25: <input type="text" name="2/25__" size="20" value="X"><br />
3/04: <input type="text" name="3/04__" size="20" value="X"><br />
3/11: <input type="text" name="3/11__" size="20" value="X"><br />
3/18: <input type="text" name="3/18__" size="20" value="X"><br />
3/25: <input type="text" name="3/25__" size="20" value="X"><br />
4/01: <input type="text" name="4/01__" size="20" value="X"><br />
4/08: <input type="text" name="4/08__" size="20" value="X"><br />
4/15: <input type="text" name="4/15__" size="20" value="X"><br />
4/22: <input type="text" name="4/22__" size="20" value="X"><br />
4/29: <input type="text" name="4/29__" size="20" value="X"><br />
</div>
<div class="may-aug">
5/06: <input type="text" name="5/06__" size="20" value="X"><br />
5/13: <input type="text" name="5/13__" size="20" value="X"><br />
5/20: <input type="text" name="5/20__" size="20" value="X"><br />
5/27: <input type="text" name="5/27__" size="20" value="X"><br />
6/03: <input type="text" name="6/03__" size="20" value="X"><br />
6/10: <input type="text" name="6/10__" size="20" value="X"><br />
6/17: <input type="text" name="6/17__" size="20" value="X"><br />
6/24: <input type="text" name="6/24__" size="20" value="X"><br />
7/01: <input type="text" name="7/01__" size="20" value="X"><br />
7/08: <input type="text" name="7/08__" size="20" value="X"><br />
7/15: <input type="text" name="7/15__" size="20" value="X"><br />
7/22: <input type="text" name="7/22__" size="20" value="X"><br />
7/29: <input type="text" name="7/29__" size="20" value="X"><br />
8/05: <input type="text" name="8/05__" size="20" value="X"><br />
8/12: <input type="text" name="8/12__" size="20" value="X"><br />
8/19: <input type="text" name="8/19__" size="20" value="X"><br />
8/26: <input type="text" name="8/26__" size="20" value="X"><br />
</div>
<div class="sept-dec">
9/02: <input type="text" name="9/02__" size="20" value="X"><br />
9/09: <input type="text" name="9/09__" size="20" value="X"><br />
9/16: <input type="text" name="9/16__" size="20" value="X"><br />
9/23: <input type="text" name="9/23__" size="20" value="X"><br />
9/30: <input type="text" name="9/30__" size="20" value="X"><br />
10/07: <input type="text" name="10/07__" size="19" value="X"><br />
10/14: <input type="text" name="10/14__" size="19" value="X"><br />
10/21: <input type="text" name="10/21__" size="19" value="X"><br />
10/28: <input type="text" name="10/28__" size="19" value="X"><br />
11/04: <input type="text" name="11/04__" size="19" value="X"><br />
11/11: <input type="text" name="11/11__" size="19" value="X"><br />
11/18: <input type="text" name="11/18__" size="19" value="X"><br />
11/25: <input type="text" name="11/25__" size="19" value="X"><br />
12/02: <input type="text" name="12/02__" size="19" value="X"><br />
12/09: <input type="text" name="12/09__" size="19" value="X"><br />
12/16: <input type="text" name="12/16__" size="19" value="X"><br />
12/23: <input type="text" name="12/23__" size="19" value="X"><br />
NYE:<span style="color:white">..</span> <input type="text" name="NYE__" size="19" value="X"><br />
</div>
</div><br class="clear" />
<div class="commentsection">
Anything else you want to add?<br />
<textarea name="comment" cols="50" rows="6"></textarea>
<input type="button" value="SUBMIT" onclick="hgsubmit();" >
<input type="hidden" name="redirect" value="http://www.standupexperts.com">
</div>
</form>
</div>
else if (/\S+/.test(document.hgmailer.comment.value) == false)
alert ("Your email content is needed.");
If you remove the textarea from the form, document.hgmailer.comment no longer exists, and therefore its .value causes an error. So, if you want to delete the textarea, you must also delete this check from your JavaScript.
It is possible that the formmail.pl expects a comment field without which the submission fails validation and is ignored.
Now ideally you would modify the formmail.pl to make this comment field optional. You can also remove the text area and replace it with a <input type="hidden" name="comment" value="" /> field, that will include an empty comment field with every submission.
###Somewhat off-topic###
On the surface this setup does not look very secure to me. Without adequate security, this form could end up being abused by spammers. The main issues are that the target email address is sent from a hidden variable which spammers can easily modify. The subject as well as the contents are also coming from the form. Unless the formmail.pl has some anti-spam measures, and those are configured correctly, you would do well to either add the security or use a different script.
Never mind that, I checked and it only emails local addresses so very little chance of spam.
In the html above, if you change the submit button <input> from button to submit.it wouldn't halt.also try this in firebug or chrome element inspector.
change
<input type="button" value="SUBMIT" onclick="hgsubmit();" >
to
<input type="submit" value="SUBMIT" onclick="hgsubmit();" >
also edit javascript to prevent twice server requestion.let the html mark up do the stuff.

Categories