change style of input submit on focus of input field - javascript

I am trying to change the button color when any input field is on focus. Okay to use javascript or CSS. Thanks for the help.
.redbutton {
background-color:red;
}
<form accept-charset="UTF-8" method="post" action="http://go.pardot.com/l/213532/2016-08-08/jr9" class="form" id="pardot-form">
<p class="form-field first_name pd-text required required-custom">
<label class="field-label" for="213532_2892pi_213532_2892">First Name *</label>
<input type="text" name="213532_2892pi_213532_2892" id="213532_2892pi_213532_2892" value="" class="text" size="30" maxlength="40" onchange="" />
</p>
<p class="form-field last_name pd-text required required-custom">
<label class="field-label" for="213532_2894pi_213532_2894">Last Name *</label>
<input type="text" name="213532_2894pi_213532_2894" id="213532_2894pi_213532_2894" value="" class="text" size="30" maxlength="80" onchange="" />
</p>
<p class="form-field email pd-text required required-custom">
<label class="field-label" for="213532_2896pi_213532_2896">Email *</label>
<input type="text" name="213532_2896pi_213532_2896" id="213532_2896pi_213532_2896" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 213532, 2896, 14168);" />
</p>
<p class="submit">
<input type="submit" accesskey="s" value="SUBMIT" />
</p>
</form>

You can use focus and blur callback of jQuery. Decide the currect state on the inside and do whatever you want to ...
$("input[type=text]").on("focus blur", function() {
if( $("input[type=text]:focus").length > 0 ) {
$("input[type=submit]").addClass("redbutton");
}
else {
$("input[type=submit]").removeClass("redbutton");
}
});
.redbutton {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form accept-charset="UTF-8" method="post" action="http://go.pardot.com/l/213532/2016-08-08/jr9" class="form" id="pardot-form">
<p class="form-field first_name pd-text required required-custom">
<label class="field-label" for="213532_2892pi_213532_2892">First Name *</label>
<input type="text" name="213532_2892pi_213532_2892" id="213532_2892pi_213532_2892" value="" class="text" size="30" maxlength="40" onchange="" />
</p>
<p class="form-field last_name pd-text required required-custom">
<label class="field-label" for="213532_2894pi_213532_2894">Last Name *</label>
<input type="text" name="213532_2894pi_213532_2894" id="213532_2894pi_213532_2894" value="" class="text" size="30" maxlength="80" onchange="" />
</p>
<p class="form-field email pd-text required required-custom">
<label class="field-label" for="213532_2896pi_213532_2896">Email *</label>
<input type="text" name="213532_2896pi_213532_2896" id="213532_2896pi_213532_2896" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 213532, 2896, 14168);" />
</p>
<p class="submit">
<input type="submit" accesskey="s" value="SUBMIT" />
</p>
</form>

Try this
$(document).ready(function(){
$("input").focus(function(){
$("input[type='submit']").addClass("changeBg");
});
$("input").focusout(function(){
$("input[type='submit']").removeClass("changeBg");
});
});
.redbutton {
background-color:red;
}
.changeBg{background:yellow;}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form accept-charset="UTF-8" method="post" action="http://go.pardot.com/l/213532/2016-08-08/jr9" class="form" id="pardot-form">
<p class="form-field first_name pd-text required required-custom">
<label class="field-label" for="213532_2892pi_213532_2892">First Name *</label>
<input type="text" name="213532_2892pi_213532_2892" id="213532_2892pi_213532_2892" value="" class="text" size="30" maxlength="40" onchange="" />
</p>
<p class="form-field last_name pd-text required required-custom">
<label class="field-label" for="213532_2894pi_213532_2894">Last Name *</label>
<input type="text" name="213532_2894pi_213532_2894" id="213532_2894pi_213532_2894" value="" class="text" size="30" maxlength="80" onchange="" />
</p>
<p class="form-field email pd-text required required-custom">
<label class="field-label" for="213532_2896pi_213532_2896">Email *</label>
<input type="text" name="213532_2896pi_213532_2896" id="213532_2896pi_213532_2896" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 213532, 2896, 14168);" />
</p>
<p class="submit">
<input type="submit" accesskey="s" value="SUBMIT" />
</p>
</form>

Below code you change the background-color of the submit button is any field is focus
$("input").not("input[type=submit]").focus(function(){
$("input[type=submit]").css("background-color","green")
})
Reset the background-color of the submit button if field loose focus
$("input").not("input[type=submit]").blur(function(){
$("input[type=submit]").css("background-color","")
})
Working Fiddle

you can do this like so :
i selected the items in a more detailed way, but you can simplify if you want. i just wanted to be more clear as to what i am selecting
ALSO change the type of input from the email field, from text to input type="email"
$("p:not(:last-child) input").focus(function() {
$(this).parent("p").siblings("p").find("input[type='submit']").addClass("redbutton")
});
$("p:not(:last-child) input").focusout(function() {
$(this).parent("p").siblings("p").find("input[type='submit']").removeClass("redbutton")
});
.redbutton {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form accept-charset="UTF-8" method="post" action="http://go.pardot.com/l/213532/2016-08-08/jr9" class="form" id="pardot-form">
<p class="form-field first_name pd-text required required-custom">
<label class="field-label" for="213532_2892pi_213532_2892">First Name *</label>
<input type="text" name="213532_2892pi_213532_2892" id="213532_2892pi_213532_2892" value="" class="text" size="30" maxlength="40" onchange="" />
</p>
<p class="form-field last_name pd-text required required-custom">
<label class="field-label" for="213532_2894pi_213532_2894">Last Name *</label>
<input type="text" name="213532_2894pi_213532_2894" id="213532_2894pi_213532_2894" value="" class="text" size="30" maxlength="80" onchange="" />
</p>
<p class="form-field email pd-text required required-custom">
<label class="field-label" for="213532_2896pi_213532_2896">Email *</label>
<input type="email" name="213532_2896pi_213532_2896" id="213532_2896pi_213532_2896" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 213532, 2896, 14168);" />
</p>
<p class="submit">
<input type="submit" accesskey="s" value="SUBMIT" />
</p>
</form>

Related

How to allow all character types into an input

Im attempting to limit what the user can enter in each input... Everything is working as planned except the nothing() function:
I want this function to allow ALL characters to be entered into the inputs where onKeyDown="nothing();". For some reason the ones within the nothing() function follow the same layout as username (which is text and numbers only).
please help it will be much appreciated. Thanks for your time..
<?php
session_start();
?>
<html>
<head>
<title>Registration</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form action="registration.php" method="post" name = "register" >
<div style="width:50%; margin:auto;">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="username"><b>Username:</b></label>
<input type="text" placeholder="Username" name="username" pattern="[^-,]+" onKeyDown="ValidateName();" >
<label style="width:50%" for="fname"><b>First Name:</b></label>
<input type="text" placeholder="Enter First Name" pattern="[^-,]+" name="fname" onKeyDown="ValidateFname();">
<label for="lname"><b>Last Name:</b></label>
<input type="text" placeholder="Ender Last Name" pattern="[^-,]+" name="lname" onKeyDown="ValidateLname();"><br><br>
<label for="dob"><b>Date of Birth</b></label>
<input type="date" placeholder="" name="dob"> <br><br>
<label for="ingame"><b>In Game Name:</b></label>
<input type="text" placeholder="Enter In Game Name" name="ingame" onKeyDown="ValidateIGN();">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" pattern="[^-,]+" onKeyDown="nothing()">
<label for="pw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pw" pattern="[^-,]+" onKeyDown="nothing()">
<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" name="confpw" pattern="[^-,]+" onKeyDown="nothing()">
<button onclick="" name="register" type="submit" class="register">Register</button>
</div>
<div <div style="width:50%; margin;auto;">
<p>Already have an account? Sign in (unfinished).</p>
</form>
</body>
<footer>
<script>
function ValidateName() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^0-9|A-Z|a-z]/g, ''));
}) //IE
}
</script>
<script>
function ValidateFname() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
</script>
<script>
function ValidateLname() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
</script>
<script>
function ValidateIGN() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
</script>
<script>
function nothing() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^A-Z|a-z|^-,]/g, ''));
}) //IE
}
</script>
</footer>
</div>
</div>
</html>
Remove all onKeyDown="functionNameXXX();" from input tag.
The problem is you are registering event every time when input value changes.
I just modified your code and it worked well.
JS Code remove all html inline method and add two handlers one for username and second for other names nothing to do with password and email if you are not willing to validate them.
//for validating username
$('input[name="username"]').keyup( function (e,i) {
$(this).val($(this).val().replace(/[^0-9|A-Z|a-z]/g, ''));
}) ;
//for validating fname, lname and IGN
$('.name').keyup(function (){
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
});
HTML remove onkeydown from all input and added class in fname, lname and IGN fields
<form action="registration.php" method="post" name = "register" >
<div style="width:50%; margin:auto;">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="username"><b>Username:</b></label>
<input type="text" placeholder="Username" name="username" pattern="[^-,]+" >
<label style="width:50%" for="fname"><b>First Name:</b></label>
<input type="text" placeholder="Enter First Name" pattern="[^-,]+" name="fname" class="name" >
<label for="lname"><b>Last Name:</b></label>
<input type="text" placeholder="Ender Last Name" pattern="[^-,]+" name="lname" class="name"><br><br>
<label for="dob"><b>Date of Birth</b></label>
<input type="date" placeholder="" name="dob"> <br><br>
<label for="ingame"><b>In Game Name:</b></label>
<input type="text" placeholder="Enter In Game Name" name="ingame" class="name">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" pattern="[^-,]+" >
<label for="pw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pw" pattern="[^-,]+" >
<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" name="confpw" pattern="[^-,]+" >
<button onclick="" name="register" type="submit" class="register">Register</button>
</div>
<div <div style="width:50%; margin;auto;">
<p>Already have an account? Sign in (unfinished).</p>
</form>
First of all your pattern for nothing is wrong (will throw error) ,
you said it will accept all charcter , so just remove the keyDown event no need for the nothing function ...
function ValidateName() {
$("input").on("input", function() {
$(this).val($(this).val().replace(/[^0-9|A-Z|a-z]/g, ''));
}) //IE
}
function ValidateFname() {
$("input").on("input", function() {
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
function ValidateLname() {
$("input").on("input", function() {
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
function ValidateIGN() {
$("input").on("input", function() {
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
/*
function nothing() {
$("input").on("input", function() {
$(this).val($(this).val().replace(/[^A-Z|a-z][^-,]/g, ''));
}) //IE
}
*/
input {display:block}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width:50%; margin:auto;">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="username"><b>Username:</b></label>
<input type="text" placeholder="Username" name="username" pattern="[^-,]+" onKeyDown="ValidateName();">
<label style="width:50%" for="fname"><b>First Name:</b></label>
<input type="text" placeholder="Enter First Name" pattern="[^-,]+" name="fname" onKeyDown="ValidateFname();">
<label for="lname"><b>Last Name:</b></label>
<input type="text" placeholder="Ender Last Name" pattern="[^-,]+" name="lname" onKeyDown="ValidateLname();"><br><br>
<label for="dob"><b>Date of Birth</b></label>
<input type="date" placeholder="" name="dob"> <br><br>
<label for="ingame"><b>In Game Name:</b></label>
<input type="text" placeholder="Enter In Game Name" name="ingame" onKeyDown="ValidateIGN();">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" pattern="[^-,]+" onKeyDown="nothing()">
<label for="pw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pw" pattern="[^-,]+">
<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" name="confpw" pattern="[^-,]+">
<button onclick="" name="register" type="submit" class="register">Register</button>
</div>
Wrong parts:
You can't use this when you are using html inline event listeners.
$('input') means every input, which will bind same events to every input, causing duplication every times when you input text.
What should you do:
Try not to use inline event listeners.
This is more like an advice, but it makes your code harder to read and harder to manage. Try to bind events from JS.
Again, $('input') means literally every input in document, which will prevent you from making separate filters. You should select elements with more specific selectors, such as $("input[name='username']"). You can see various selectors from here : https://www.w3schools.com/cssref/css_selectors.asp
This will be your code :
$("input[name='username']").on('input', function(){
$(this).val( $(this).val().replace(/[^0-9A-Za-z]/g, ''));
})
$("input[name='fname']").on('input', function(){
$(this).val($(this).val().replace(/[^A-Za-z]/g, ''));
})
$("input[name='lname']").on('input', function(){
$(this).val($(this).val().replace(/[^A-Za-z]/g, ''));
})
$("input[name='ingame']").on('input', function(){
$(this).val($(this).val().replace(/[^A-Za-z]/g, ''));
})
<html>
<head>
<title>Registration</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form action="registration.php" method="post" name = "register" >
<div style="width:50%; margin:auto;">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="username"><b>Username:</b></label>
<input type="text" placeholder="Username" name="username">
<label style="width:50%" for="fname"><b>First Name:</b></label>
<input type="text" placeholder="Enter First Name" name="fname">
<label for="lname"><b>Last Name:</b></label>
<input type="text" placeholder="Ender Last Name" name="lname"><br><br>
<label for="dob"><b>Date of Birth</b></label>
<input type="date" placeholder="" name="dob"> <br><br>
<label for="ingame"><b>In Game Name:</b></label>
<input type="text" placeholder="Enter In Game Name" name="ingame">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email">
<label for="pw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pw">
<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" name="confpw">
<button onclick="" name="register" type="submit" class="register">Register</button>
</div>
<div style="width:50%; margin;auto;">
<p>Already have an account? Sign in (unfinished).</p>
</div>
</form>
</body>
</html>

Change background color of an input when user clicks

First of all, I think this question maybe is having an answer somewhere here on site and sorry for being repetitive but I can`t find what I want.
So... I have a form with 4 inputs, I want when someone clicks on the input to type in the value background color to be changed, and when the user clicks somewhere else to change it back to normal.
If anyone has multiple examples please write it down, I want to know more about how javascript works.
<form>
<div>
<label for="name">NAME</label>
<input class="input" type="text" name="name" id="name" placeholder="Please enter your name">
</div>
<div>
<label for="company">COMPANY</label>
<input class="input" type="text" name="company" id="company"
placeholder="Leave it empty if you don`t have a name">
</div>
<div>
<label for="phone">PHONE</label>
<input class="input" type="text" name="phone" id="phone"
placeholder="Please,enter your mobile phone">
</div>
<div>
<label for="email">EMAIL</label>
<input class="input" type="email" name="email" id="email" placeholder="Your email address">
</div>
<div class="message">
<label for="message">MESSAGE</label>
<textarea class="input" name="message" id="message" cols="54" rows="15"></textarea>
</div>
Send
</form>
Use :focus pseudo-class selector to apply CSS when the element is focused.
input:focus {
background-color: #ddd;
}
<form>
<div>
<label for="name">NAME</label>
<input class="input" type="text" name="name" id="name" placeholder="Please enter your name">
</div>
<div>
<label for="company">COMPANY</label>
<input class="input" type="text" name="company" id="company" placeholder="Leave it empty if you don`t have a name">
</div>
<div>
<label for="phone">PHONE</label>
<input class="input" type="text" name="phone" id="phone" placeholder="Please,enter your mobile phone">
</div>
<div>
<label for="email">EMAIL</label>
<input class="input" type="email" name="email" id="email" placeholder="Your email address">
</div>
<div class="message">
<label for="message">MESSAGE</label>
<textarea class="input" name="message" id="message" cols="54" rows="15"></textarea>
</div>
Send
</form>
UPDATE : If you want to toggle between states on each click then you need to toggle(probably a class) based on click event.

Send data of form to div on submitting , outside the form using jQuery, laravel 5.3

this is my form
<form method="post" action="{{url('/vpage')}}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<label>First Name</label>
<input type="text" name="firstname" placeholder="First Name" value="{{$user->firstname}}" >
<label>Email Address</label>
<input type="text" name="email" placeholder="Email Address" value="{{$user->email}}" >
<label>Phone Number <span> (optional)</span></label>
<input type="text" name="phone" placeholder="(888) 888-888" value="{{$user->phone}}" >
<button id="hitme" class="submitBTN getstart" type="submit" onclick='return false;'> Get Started </button>
</form>
this is div outside the form
<div class="vgasRit">
<p>SUMMARY</p>
<div class="sfieldz w100">
<label>Name:</label>
<input type="text" placeholder="John Smith" value="{{$user->firstname}}">
</div>
<div class="w100">
<label>Email Address:</label>
<input type="text" placeholder="johnsmith#gmail.com" value="{{$user->email}}" >
</div>
<div class="w100">
<label>Phone Number:</label>
<input type="text" placeholder="(888) 888-888" value="{{$user->phone}}">
</div>
</div>
I want to access the value of the "fistname" , "lastname" and "phone" as user submit the form,so that i can display it in summary div.
Note: i have tried compact function of php in my controller so that i can send the whole database object in my view but this solution not working , after using compact function i was access the object like this
<input type="text" placeholder="John Smith" value="<?= (!empty($group_data)) ? $group_data->firstname : '';?>">
Any ideas regarding this ? i am new to laravel. I have served several hours on internet but nothing found out.
Assuming everything is on the same page, give your form's inputs an id:
<form id="form" method="post" action="{{url('/vpage')}}">
<label>First Name</label>
<input id="firstname" type="text" name="firstname" placeholder="First Name" value="{{$user->firstname}}" >
<label>Email Address</label>
<input id="email" type="text" name="email" placeholder="Email Address" value="{{$user->email}}" >
<label>Phone Number <span> (optional)</span></label>
<input id="phone" type="text" name="phone" placeholder="(888) 888-888" value="{{$user->phone}}" >
Give your summary div inputs an id too:
<p>SUMMARY</p>
<div class="sfieldz w100">
<label>Name:</label>
<input id="firstname2" type="text" placeholder="John Smith" value="{{$user->firstname}}">
</div>
<div class="w100">
<label>Email Address:</label>
<input id="email2" type="text" placeholder="johnsmith#gmail.com" value="{{$user->email}}" >
</div>
<div class="w100">
<label>Phone Number:</label>
<input id="phone2" type="text" placeholder="(888) 888-888" value="{{$user->phone}}">
</div>
Then, use jquery to get those values when the user submits the form:
$('#form').submit(function() {
// set our summary div inputs values with our form values
$('firstname2').val($('firstname').val());
$('email2').val($('email').val());
$('phone2').val($('phone').val());
});
That should be it.
Your view (I assumed that form and summery div in same view):
<form method="post" action="{{url('/vpage')}}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<label>First Name</label>
<input type="text" name="firstname" placeholder="First Name" value="{{$user->firstname}}">
<label>Email Address</label>
<input type="text" name="email" placeholder="Email Address" value="{{$user->email}}">
<label>Phone Number <span> (optional)</span></label>
<input type="text" name="phone" placeholder="(888) 888-888" value="{{$user->phone}}">
<button id="hitme" class="submitBTN getstart" type="submit" onclick='return false;'> Get Started</button>
</form>
#if($Data->input('firstname'))
<p>SUMMARY</p>
<div class="sfieldz w100">
<label>Name:</label>
<input id="firstname2" type="text" placeholder="John Smith" value="{{$Data->input('firstname')}}">
</div>
<div class="w100">
<label>Email Address:</label>
<input id="email2" type="text" placeholder="johnsmith#gmail.com" value="{{$Data->input('email')}}" >
</div>
<div class="w100">
<label>Phone Number:</label>
<input id="phone2" type="text" placeholder="(888) 888-888" value="{{$Data->input('phone')}}">
</div>
#endif
Contoroller
function vpageController(Request $r){
return view("path.to.view",['Data'=>$r]);
}
Route:
Route::Route::match(['POST', 'GET'],'/vpage', 'ControllerName#vpageController');

JavaScript Validation needed for this form, it does not work whatever I try

This form needs to calculate cost for each course (which is not done yet). It needs JavaScript Validation, and PHP for Username and Password info to go somewhere. The credentials will be used in a PHP login. Can you help?
<form form name="myform" id="myform" method="post">
<p>
<label for="name">Name</label>
<input type=text name="name" placeholder="Enter your full name" />
</p>
<p>
<label for="gender">Gender</label>
<input type="radio" name="gender" value="M"> Male
<input type="radio" name="gender" value="F"> Female
</p>
<p>
<label for="birthday">Date of Birth</label>
<input type="date" name="bday" />
</p>
<p>
<label for="username">Create Username</label>
<input type="text" id="username" name="username">
</p>
<p>
<label for="password" name="name">Password</label>
<input type="password" id="password" name="username" value="">
</p>
<p>
<label for="Comments">Address</label>
</p>
<textarea cols="40" rows="5" name="Address" id="address" placeholder="Address"></textarea>
<br>
<p>
<label for="postcode">Postcode</label>
<input type="text" name="postcode" id="postcode" placeholder="Enter your postcode" />
</p>
<p>
<label for="contactnumber">Contact Number</label>
<input type="number" id="contactnumber" placeholder="Enter your number" />
</p>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" placeholder="Enter your email" />
</label>
</p>
<p>
<label for="select">Select Course</label>
</p>
<select id="course" name="courses">
<option value="000" selected="selected">[Select course]</option>
<option value="screenplay">Screenplay FL0330 04-01-16</option>
<option value="camerawork">Camerawork FL566 05-01-16</option>
<option value="soundrecording">Sound Recording FB700 06-01-16</option>
<option value="lighting">Lighting FN250 11-01-16</option>
<option value="editing">Editing FB420 12-01-16</option>
<option value="3dgraphics">3D Graphics FA554 13-01-16</option>
<option value="makeup">Make up and Prosthetics FA128 15-01-16</option>
</select>
<br>
<input type="submit" name="submit" value="Submit Now">
</form>

Post Values to an alert box after been validated

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

Categories

Resources