I have this form that has a lot of validation in place.
What i'm struggling with is, when all fields have been filled out correctly I want the values of the fields to be displayed in an alert box.
Here is my code
<form method="post" name="form" id="form" class="form" action="">
<div class="info align-right"><span class="error">*</span> Required</div>
<fieldset>
<div class="group">
<label for="name">Name</label>
<input id="name" name="name" type="text" required />
</div>
<div class="group">
<label for="UserEmail">Email <span class="req">*</span></label>
<input type="text" name="UserEmail" id="UserEmail" value="" size="32" />
</div>
<div class="group">
<label>Password: <span class="req">*</span></label>
<input type="password" name="password" id="password" value="" size="32" />
</div>
<div class="group">
<label>Confirm Password: <span class="req">*</span></label>
<input type="password" name="password-check" id="password-check" value="" size="32" />
</div>
</fieldset>
<fieldset class="clearfix">
<div class="group options">
<legend>Country</legend>
<div class="group--left">
<input id="usa" name="country" type="radio">
<label for="usa">United States</label>
<input id="argentina" name="country" type="radio">
<label for="argentina">Argentina</label>
</div>
</div>
<div class="group">
<label>Phone Number</label>
<div class="group--left">
<input id="phone" name="phone" class="phone" type="tel" />
<em>Example: <span id="example">123-456-7890</span></em>
</div>
</div>
</fieldset>
<div class="group--right">
<input type="submit" value="Submit" id="submit" class="right" />
<input type="reset" value="Clear" id="clear" class="left" />
</div>
</form>
My HTML is
<form method="post" name="form" id="form" class="form" action="">
<div class="info align-right"><span class="error">*</span> Required</div>
<fieldset>
<div class="group">
<label for="name">Name</label>
<input id="name" name="name" type="text" required />
</div>
<div class="group">
<label for="UserEmail">Email <span class="req">*</span></label>
<input type="text" name="UserEmail" id="UserEmail" value="" size="32" />
</div>
<div class="group">
<label>Password: <span class="req">*</span></label>
<input type="password" name="password" id="password" value="" size="32" />
</div>
<div class="group">
<label>Confirm Password: <span class="req">*</span></label>
<input type="password" name="password-check" id="password-check" value="" size="32" />
</div>
</fieldset>
<fieldset class="clearfix">
<div class="group options">
<legend>Country</legend>
<div class="group--left">
<input id="usa" name="country" type="radio">
<label for="usa">United States</label>
<input id="argentina" name="country" type="radio">
<label for="argentina">Argentina</label>
</div>
</div>
<div class="group">
<label>Phone Number</label>
<div class="group--left">
<input id="phone" name="phone" class="phone" type="tel" />
<em>Example: <span id="example">123-456-7890</span></em>
</div>
</div>
</fieldset>
<div class="group--right">
<input type="submit" value="Submit" id="submit" class="right" />
<input type="reset" value="Clear" id="clear" class="left" />
</div>
</form>
I have also provided a Fiddle - http://jsfiddle.net/barrycorrigan/vzdp64m4/
Any help is greatly appreciated
try something like this,
$("#form").submit(function(){
var x = $(this).serializeArray();
$.each(x, function(i, field){
alert(field.name + " : " + field.value);
});
});
demo in FIDDLE
Related
How can I make the web address of the page the user is currently on autofill into a box on the page?
On my websites 404 page we have a form for the user to fill out with name, email, etc. I would like one of the form boxes to autopopulate with the page the user is currently on.
Here is the code I currently have:
<form id="contactForm" class="scaffold-form" action="https://mpex.com/contacts/index/post/" method="post">
<div class="fieldset">
<h2 class="legend">Contact Information</h2>
<p class="required">* Required Fields</p>
<ul class="form-list">
<li class="fields">
<div class="field"><label class="required" for="name"><em>*</em>Name</label>
<div class="input-box"><input id="name" class="input-text required-entry" title="Name" type="text" value="" name="name" /></div>
</div>
<div class="field"><label class="required" for="email"><em>*</em>Email</label>
<div class="input-box"><input id="email" class="input-text required-entry validate-email" spellcheck="false" title="Email" type="email" value="" name="email" /></div>
</div>
</li>
<li><label for="telephone">Telephone</label>
<div class="input-box"><input id="telephone" class="input-text" title="Telephone" type="tel" value="" name="telephone" /></div>
</li>
<li class="wide"><label class="required" for="comment"><em>*</em>Comment</label>
<div class="input-box"><textarea id="comment" class="required-entry input-text" title="Comment" name="comment" rows="3" cols="5"></textarea></div>
</li>
</ul>
</div>
<div class="buttons-set"><input id="hideit" style="display: none !important;" type="text" value="" name="hideit" /> <button class="button" title="Submit" type="submit"><span><span>Submit</span></span></button></div>
</form>
<form id="contactForm" class="scaffold-form" action="https://mpex.com/contacts/index/post/" method="post">
<div class="fieldset">
<h2 class="legend">Contact Information</h2>
<p class="required">* Required Fields</p>
<ul class="form-list">
<li class="fields">
<div class="field"><label class="required" for="name"><em>*</em>Name</label>
<div class="input-box"><input id="name" class="input-text required-entry" title="Name" type="text" value="" name="name" /></div>
</div>
<div class="field"><label class="required" for="email"><em>*</em>Email</label>
<div class="input-box"><input id="email" class="input-text required-entry validate-email" spellcheck="false" title="Email" type="email" value="" name="email" /></div>
</div>
</li>
<li><label for="telephone">Telephone</label>
<div class="input-box"><input id="telephone" class="input-text" title="Telephone" type="tel" value="" name="telephone" /></div>
</li>
<li class="wide"><label class="required" for="comment"><em>*</em>Comment</label>
<div class="input-box"><textarea id="comment" class="required-entry input-text" title="Comment" name="comment" rows="3" cols="5"></textarea></div>
</li>
</ul>
</div>
<div class="buttons-set"><input id="hideit" style="display: none !important;" type="text" value="" name="hideit" /> <button class="button" title="Submit" type="submit"><span><span>Submit</span></span></button></div>
</form>
<script type="text/javascript">
window.onload = function () {
document.getElementById('name').value = location.href;
}
</script>
You can add script after form tag like this
I want to input a number here (ex.5).
<div class="container">
<label style="font-family:agency fb;">How many tracks?</label>
<input class="form-control" type="num" name="tracks" placeholder="How many tracks?" style="width:15%;font-family:agency fb;font-size:18px;" required>
<input type="button" class="btn btn-info" value="Go" name="go" style="width:15%;font-family:agency fb;">
</div>
<br>
Then this division will be 5x.
<div class="container form-inline" name="row">
<label style="font-family:agency fb;">Track Number</label>
<input class="form-control" type="number" name="tnumber[]" placeholder="Track Number" style="width:5%;font-family:agency fb;font-size:18px;">
<label style="font-family:agency fb;">Track Name</label>
<input class="form-control" type="text" name="tname[]" placeholder="Track Name" style="width:20%;font-family:agency fb;font-size:18px;">
<label style="font-family:agency fb;">Track Playtime</label>
<input class="form-control" type="text" name="tplaytime[]" placeholder="Track Playtime" style="width:10%;font-family:agency fb;font-size:18px;">
<label style="font-family:agency fb;">Choose Song</label>
<input type="file" name="song[]" class="form-control" style="width:20%;" accept="audio/*">
</div>
I have two form login and registration, by default show login form. There has a link "Don't have account?" I want to create when click on link then registration form will show and login form will hide.
HTML Code:
<div class="login_form">
<div id="form">
<h2>Login Here </h2>
<form method="post" action="login.php" >
<div class="form_elements">
<label for="username">username</label>
<input type="text" name="login_username" id="login_username" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<label for="username">Password</label>
<input type="password" name="login_password" id="login_password" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<input type="submit" name="login" id="login" class="btn btn-success" />
</div><!--end form_elements-->
<br />
Don't have a account?
</form>
</div>
</div>
<div class="clear_both"></div>
<div class="register_form">
<div id="form">
<h2>Register Here </h2>
<form method="post" action="login.php" name="">
<div class="form_elements">
<label for="username">username</label>
<input type="text" name="username" id="usename" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<label for="username">Email</label>
<input type="text" name="email" id="email" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<label for="username">Password</label>
<input type="password" name="password" id="password" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<label for="username">RePassword</label>
<input type="password" name="repassword" id="repassword" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<input type="submit" name="register" id="register" class="btn btn-success" />
</div><!--end form_elements-->
</form>
</div><!-- div form-->
jQuery Code:
$(function(){
('#show_register').click(function(){
$('.login_form').hide();
$('.register_form').show();
return false;
});
});
Please guide me to solve this difficulty.
Use as , $ is missing in show_register
$(function(){
$('#show_register').click(function(){
$('.login_form').hide();
$('.register_form').show();
return false;
});
});
I need to prepend a huge DIV block, which can be seen at the bottom of the question.
My current idea would be to put inside one
$('#content').prepend();
and break each like up, when I need to insert the content of a variable. That would be all the places which says TMPL_VAR
The code would be quite hard to maintain and read.
Is there a clever way to do this?
<form action="" method="post">
<input name="anchor" value="<TMPL_VAR ID>" type="hidden">
<div class="row">
<div class="cellData"> <TMPL_VAR ID> </div>
<div class="cellData"> <input name="title" id="<TMPL_VAR ID>_title" value="<TMPL_VAR TI>" type="text" /> </div>
<div class="cellData"> <input name="owner" id="<TMPL_VAR ID>_owner" value="<TMPL_VAR OW>" type="text" /> </div>
<div class="cellData"> <input name="from" id="<TMPL_VAR ID>_begin_date" value="<TMPL_VAR BD>" type="text" class="datepick" /> </div>
<div class="cellData"> <input name="to" id="<TMPL_VAR ID>_end_date" value="<TMPL_VAR ED>" type="text" class="datepick" /> </div>
<div class="cellData cellRadios"> <input name="ctype" value="individuel" type="radio" <TMPL_VAR IN>/> Individuel <br> <input name="ctype" value="course" type="radio" <TMPL_VAR CO>/> Course </div>
<div class="cellEdit"> Members <input value="Save" type="submit"> </div>
</div>
<div id="<TMPL_VAR ID>" style="display: none; background-color: #fff8e7;">
<div class="rowMembers">
<span>
<label> Users </label> <input name="users" id="<TMPL_VAR ID>_users" size="35" value="<TMPL_VAR US>" type="text" />
<label> Groups </label> <input name="groups" id="<TMPL_VAR ID>_groups" size="35" value="<TMPL_VAR GR>" type="text" />
</span>
</div>
</div>
</form>
I would personally go for jQuery.tmpl() to handle this sort of issue.
This way you could specify a template like so:
<script type="text-x-jquery/template" id="template">
<form action="" method="post">
<input name="anchor" value="${id}" type="hidden">
<div class="row">
<div class="cellData"> <TMPL_VAR ID> </div>
<div class="cellData"> <input name="title" id="${id}_title" value="${ti}" type="text" /> </div>
<div class="cellData"> <input name="owner" id="${id}_owner" value="${ow}" type="text" /> </div>
<div class="cellData"> <input name="from" id="${id}_begin_date" value="${bd}" type="text" class="datepick" /> </div>
<div class="cellData"> <input name="to" id="${id}_end_date" value="${ed}" type="text" class="datepick" /> </div>
<div class="cellData cellRadios"> <input name="ctype" value="individuel" type="radio" ${in}/> Individuel <br> <input name="ctype" value="course" type="radio" ${co}/> Course </div>
<div class="cellEdit"> Members <input value="Save" type="submit"> </div>
</div>
<div id="${id}" style="display: none; background-color: #fff8e7;">
<div class="rowMembers">
<span>
<label> Users </label> <input name="users" id="${id}_users" size="35" value="${us}" type="text" />
<label> Groups </label> <input name="groups" id="${id}_groups" size="35" value="${gr}" type="text" />
</span>
</div>
</div>
</form>
</script>
and then with jQuery populate the template with
$('#template').tmpl(myData).appendTo('#myContainer')
which will insert the populated template into #myContainer given that you have data in the javascript scope myData wich corresponds to the data format specified in the template, and that you have defined a html element with an id of myContainer which is appendable.
I'm trying to make an auto-login using Greasemonkey.
Can anyone help me?
Relevant HTML source:
<div id="login-main">
<div id="login-container">
<div id="login-left">
<div id="welcome">Welcome</div>
<form id="login-form" action="auth/login" method="post">
<div>
<label for="rememberme">Remember me</label>
<input type="checkbox" class="remember" checked="checked" name="remember me"/>
<label for="email" id="email-label" class="no-js">Email</label>
<input id="email-email" type="text" name="handle" value="" autocomplete="off"/>
<label for="combination" id="combo-label" class="no-js">Combination</label>
<input id="password-clear" type="text" value="Combination" autocomplete="off"/>
<input id="password-password" type="password" name="password" value="" autocomplete="off"/>
<input id="sumbitLogin" class="signin" type="submit" value="Sign In"/>
</div>
</form>
var f = document.getElementById("login-form");
f.elements.namedItem("email-email").value = "email#email";
f.elements.namedItem("password-password").value = "password";
f.submit();