I have an HTML form and a button which when the user clicks will check whether or not the form is filled. The details for billing address is input from database using php
<button id="btnConfirm" type="submit" onclick="validate()"style="float: right" value="Confirm Payment" >Confirm Payment</button>
<form id="au" name="paymentform" method="post" action="" >
<fieldset class="billing">
<legend>Billing Details</legend>
<br />
<label class="reglabel" for="fname">First Name:</label>
<input id="fname" name="billingfname" required="" type="text" value="<?php echo $fname ?>" /><br />
<label class="reglabel" for="lname">Last Name:</label>
<input id="lname" name="billinglname" required="" type="text" value="<?php echo $lname ?>" /><br />
<label class="reglabel" for="address">Address:</label>
<input id="address" name="billingaddress" required="" type="text" value="<?php echo $address ?>" /><br />
<label class="reglabel" for="town">Town:</label>
<input id="town" name="billingtown" required="" type="text" value="<?php echo $town ?>" /><br />
<label class="reglabel" for="postcode">Post Code:</label>
<input id="postcode" name="billingpostcode" required="" type="text" value="<?php echo $postcode ?>" /><br />
<label class="reglabel" for="phone">Phone:</label>
<input id="phone" name="billingphone" required="" type="text" value="<?php echo $phone ?>" /><br />
<label id="EmailLabel" class="reglabel" for="email">E-mail:</label>
<input id="email" name="billingemail" required="" type="email" value="<?php echo $email ?>" /><br />
</fieldset>
<fieldset class="shipping">
<legend>Shipping Details</legend>
<br />
<input name="shippingsame" onclick="fillShipping(this.form)" type="checkbox">Check
this box if billing address and shipping address are the same <br />
<label class="reglabel" for="fname">First Name:</label>
<input id="fname" name="shippingfname" placeholder="Required" required="" type="text" /><br />
<label class="reglabel" for="lname">Last Name:</label>
<input id="lname" name="shippinglname" placeholder="Required" required="" type="text" /><br />
<label class="reglabel" for="address">Address:</label>
<input id="address" name="shippingaddress" placeholder="Required" required="" type="text" /><br />
<label class="reglabel" for="town">Town:</label>
<input id="town" name="shippingtown" placeholder="Required" required="" type="text" /><br />
<label class="reglabel" for="postcode">Post Code:</label>
<input id="postcode" name="shippingpostcode" placeholder="Required" required="" type="text" /><br />
<label class="reglabel" for="phone">Phone:</label>
<input id="phone" name="shippingphone" placeholder="Required" required="" type="text" /><br />
<label id="EmailLabel" class="reglabel" for="email">E-mail:</label>
<input id="email" name="shippingemail" placeholder="Required" required="" type="email" /><br />
</fieldset>
</form>
This is the code which Im trying to check whether or not he field is empty, but it doesnt seem to work. It alerts undefined
function validate()
{
var firstname = document.getElementsByName("shippingfname").value;
if (firstname == "")
{
alert('empty');
}
else
{
alert(firstname);
}
}
the function document.getElementsByName returns an array, so you should try this:
function validate()
{
var firstname = document.getElementsByName("shippingfname")[0].value;
if (firstname == "")
{
alert('empty');
}
else
{
alert(firstname);
}
}
Or you can use jquery validation plugin easily. ıt is great for client side validations http://docs.jquery.com/Plugins/validation
getElementsByName() returns an array. Not an individual element. In your example you will want to use the ID attribute to access individual elements.
<input name="shippingsame" id="shippingsame" onclick="fillShipping(this.form)" type="checkbox">
function validate()
{
var firstname = document.getElementByID("shippingfname").value;
if (firstname == "")
{
alert('empty');
}
else
{
alert(firstname);
}
}
Related
I have a .js file that my web app uses to read today's schedule. I want this file to be easily edited, say by an HTML form.
I am trying to make an HTML form that defines all the schedules for the day. A small portion of the form is below.
<form action="/admin/special.php" method="POST">
<div data-role="fieldcontain">
<label for="date">Today's Date</label>
<input type="date" name="date" id="date" value="" /><br /><br />
<label for="code">Code</label>
<input type="text" name="code" id="code" value="" /><br /><br />
<label for="hour">Hour</label>
<input type="text" name="hour" id="hour" value="" />
<label for="minute">Minute</label>
<input type="text" name="minute" id="minute" value="" />
<label for="event">Period Name:</label>
<input type="text" name="event" id="event" value="" /><br /><br />
<input type="submit" value="Save" />
</div>
</form>
How do I turn this into something javascript can understand? My web app's schedule looks like this.
function Schedule() {
scheduletype = "Demo Schedule"
schedule = [
[sc1, 'sc1', 8, 35, "Period 1"],
[sc2, 'sc2', 9, 35, "Period 2"],
[sc3, 'sc3', 10, 35, "Period 3"],
[sc4, 'sc4', 12, 00, "Period 4"],
[sc5, 'sc5', 13, 25, "Period 5"]
];
}
Any help is appreciated.Thank you.
var form = document.querySelector("form");
function getFormData(form) {
return [].filter.call(form.querySelectorAll("input"), function(input) {
return input.type !== "submit";
}).map(function(input) {
return input.type === "number" ? +input.value : input.value;
});
}
form.addEventListener("submit", function(ev) {
console.log(getFormData(form));
ev.preventDefault();
});
<form action="/admin/special.php" method="POST">
<div data-role="fieldcontain">
<label for="date">Today's Date</label>
<input type="date" name="date" id="date" value="" /><br /><br />
<label for="code">Code</label>
<input type="text" name="code" id="code" value="" /><br /><br />
<label for="hour">Hour</label>
<input type="number" name="hour" id="hour" value="" />
<label for="minute">Minute</label>
<input type="number" name="minute" id="minute" value="" />
<label for="event">Period Name:</label>
<input type="text" name="event" id="event" value="" /><br /><br />
<input type="submit" value="Save" />
</div>
</form>
I am currently deploying a contact form to a website via twitter bootstrap where the form posts to a php script that sends an email to an administrator. The problem is that the form does not submit if the file js/plugins/validator/jquery.form-validator.min.js is used for validation
I can get the form to function and submit an email successfully when I remove the validation file below:
js/plugins/validator/jquery.form-validator.min.js
from the script section at the bottom of the page, but this removes all the validation on the form
<form method="post" action="sendmail.php" class="input-group input-group-lg" id="subscribeForm" >
<input type="text class="form-control" placeholder="Name" id="name" name="name" />
<input type="text" name="company" class="form-control" placeholder="company" /><br />
<input type="text" name="phone" class="form-control" placeholder="phone" /><br />
<input type="email" class="form-control" placeholder="email" id="sEmail" name="email">
<span class="input-group-btn">
<input type="submit" button class="btn bg-primary">Invite Me!</button>
</span></form><!-- /input-group -->
And the content of the sendmail.php
<?php
$name = $_REQUEST['name'];
$company = $_REQUEST['company'];
$email = $_REQUEST['email'] ;
$phone = $_REQUEST['phone'];
$emess = "Name: ".$name."\n";
$emess.= "Company: ".$company."\n";
$emess.= "Email : ".$email."\n";
$emess.= "Phone number: ".$phone."\n";
mail( "send-to-email", "Information Request",
$emess, "From: $email" );
header( "Location: http://www.google.com" );?>
In your code you have
<input type="text class="form-control" placeholder="Name" id="name" name="name" />
^ right there
which you are missing a quote " after text. Throw that in and it should work.
Another thing to note on the php side, use $name = $_POST['name']; instead since you are sending a form via post and $_REQUEST, by default, contains the contents of $_GET, $_POST and $_COOKIE.
Edit: As Fred pointed out on the input button it should be
<input type="submit" class="btn bg-primary" value="Invite Me!" />
Changed the input submit tag
<form method="post" action="sendmail.php" class="input-group input-group-lg" id="subscribeForm" >
<input type="text" class="form-control" placeholder="Name" id="name" name="name" />
<input type="text" name="company" class="form-control" placeholder="company" /><br />
<input type="text" name="phone" class="form-control" placeholder="phone" /><br />
<input type="email" class="form-control" placeholder="email" id="sEmail" name="email">
<span class="input-group-btn">
<input type="submit" value="Invite Me!" />
</span></form>
I've looked all over, and can see many ways to get the value of a radio button, but not take it the next step and set the same value to a similar set of radio buttons. Copying text values works fine, just can't get the radio buttons to copy also.
EDIT:
I added the entire relevant html:
<div class="form-container">
<div class="form-titles">
<h4>Customer <span>Shipping</span> Information</h4>
</div>
<div id="fillout-form">
<label for="name"><span>*</span>Contact Name:</label>
<input type="text" id="name" name="name" maxlength="50" class="required" />
<label for="company"><span>*</span>Company Name:</label>
<input type="text" id="company" name="company" maxlength="50" class="required" />
<label for="land-line"><span>*</span>Primary Phone:</label>
<input type="text" id="land-line" name="land-line" maxlength="50" class="required" />
<label for="cell">Cell Phone:</label>
<input type="text" id="cell" name="cell" maxlength="50" />
<label for="email"><span>*</span>Email:</label>
<input type="email" id="email" name="email" maxlength="50" class="required" />
<label for="fax">Fax:</label>
<input type="text" id="fax" name="fax" maxlength="50" />
<label for="address"><span>*</span>Street Address:</label>
<input type="text" id="address" name="address" maxlength="50" class="required" />
<label for="address-2">Street Address 2:</label>
<input type="text" id="address-2" name="address-2" maxlength="50" />
<label for="city"><span>*</span>City:</label>
<input type="text" id="city" name="city" maxlength="50" class="required" />
<label for="state"><span>*</span>State or Province:</label>
<input type="text" id="state" name="state" maxlength="50" class="required" />
<label for="zip"><span>*</span>Zip / Postal Code:</label>
<input type="text" id="zip" name="zip" maxlength="50" class="required" />
</div>
<div id="vertical-radio">
<div id="radio-buttons">
<label for="country"><span>*</span>Country:</label>
<div id="multi-line-radio"><input type="radio" name="country" id="country" value="USA" class="required" checked >United States</div>
<div id="multi-line-radio"><input type="radio" name="country" id="country" value="Canada" >Canada</div>
</div>
</div>
<div class="form-container">
<div class="form-titles">
<h4>Customer <span>Billing</span> Information</h4>
<div class="same-address">
<input type="checkbox" name="same-address" value="same-address" id="copyCheck"><p>Same as Shipping Address?</p>
</div>
</div>
<div id="fillout-form">
<label for="name_2"><span>*</span>Contact Name:</label>
<input type="text" id="name_2" name="name_2" maxlength="50" class="required" />
<label for="company_2"><span>*</span>Company Name:</label>
<input type="text" id="company_2" name="company_2" maxlength="50" class="required" />
<label for="land-line_2"><span>*</span>Primary Phone:</label>
<input type="text" id="land-line_2" name="land-line_2" maxlength="50" class="required" />
<label for="cell_2">Cell Phone:</label>
<input type="text" id="cell_2" name="cell_2" maxlength="50" />
<label for="email_2"><span>*</span>Email:</label>
<input type="email" id="email_2" name="email_2" maxlength="50" class="required" />
<label for="fax_2">Fax:</label>
<input type="text" id="fax_2" name="fax_2" maxlength="50" />
<label for="PO-Box_2">PO-Box:</label>
<input type="text" id="PO-Box_2" name="PO-Box_2" maxlength="50" />
<label for="address_2">Street Address:</label>
<input type="text" id="address_2" name="address_2" maxlength="50" />
<label for="address-2_2">Street Address 2:</label>
<input type="text" id="address-2_2" name="address-2_2" maxlength="50" />
<label for="city_2"><span>*</span>City:</label>
<input type="text" id="city_2" name="city_2" maxlength="50" class="required" />
<label for="state_2"><span>*</span>State or Province:</label>
<input type="text" id="state_2" name="state_2" maxlength="50" class="required" />
<label for="zip_2"><span>*</span>Zip / Postal Code:</label>
<input type="text" id="zip_2" name="zip_2" maxlength="50" class="required" />
</div>
<div id="vertical-radio">
<div id="radio-buttons">
<div id="country_option_2">
<label for="country_2"><span>*</span>Country:</label>
<div id="multi-line-radio"><input type="radio" name="country_2" id="country_2" value="USA" class="required" checked >United States</div>
<div id="multi-line-radio"><input type="radio" name="country_2" id="country_2" value="Canada" >Canada</div>
</div>
</div>
</div>
And jQuery:
$(document).ready(function(){
$(function(){
$("#copyCheck").change(function() {
if ($("#copyCheck:checked").length > 0) {
bindGroups();
} else {
unbindGroups();
}
});
});
var bindGroups = function() {
$("input[id='name_2']").val($("input[id='name']").val());
$("input[id='company_2']").val($("input[id='company']").val());
$("input[id='land-line_2']").val($("input[id='land-line']").val());
$("input[id='cell_2']").val($("input[id='cell']").val());
$("input[id='email_2']").val($("input[id='email']").val());
$("input[id='fax_2']").val($("input[id='fax']").val());
$("input[id='address_2']").val($("input[id='address']").val());
$("input[id='address-2_2']").val($("input[id='address-2']").val());
$("input[id='city_2']").val($("input[id='city']").val());
$("input[id='state_2']").val($("input[id='state']").val());
$("input[id='zip_2']").val($("input[id='zip']").val());
$("input:radio[name=country_2]:checked").val($("input:radio[name=country]:checked").val());
$("input[id='name']").keyup(function() {
$("input[id='name_2']").val($(this).val());
});
$("input[id='company']").keyup(function() {
$("input[id='company_2']").val($(this).val());
});
$("input[id='land-line']").keyup(function() {
$("input[id='land-line_2']").val($(this).val());
});
$("input[id='cell']").keyup(function() {
$("input[id='cell_2']").val($(this).val());
});
$("input[id='email']").keyup(function() {
$("input[id='email_2']").val($(this).val());
});
$("input[id='fax']").keyup(function() {
$("input[id='fax_2']").val($(this).val());
});
$("input[id='address']").keyup(function() {
$("input[id='address_2']").val($(this).val());
});
$("input[id='address-2']").keyup(function() {
$("input[id='address-2_2']").val($(this).val());
});
$("input[id='city']").keyup(function() {
$("input[id='city_2']").val($(this).val());
});
$("input[id='state']").keyup(function() {
$("input[id='state_2']").val($(this).val());
});
$("input[id='zip']").keyup(function() {
$("input[id='zip_2']").val($(this).val());
});
};
var unbindGroups = function() {
$("input[id='name']").unbind("keyup");
$("input[id='company']").unbind("keyup");
$("input[id='land-line']").unbind("keyup");
$("input[id='cell']").unbind("keyup");
$("input[id='email']").unbind("keyup");
$("input[id='fax']").unbind("keyup");
$("input[id='address']").unbind("keyup");
$("input[id='address-2']").unbind("keyup");
$("input[id='city']").unbind("keyup");
$("input[id='state']").unbind("keyup");
$("input[id='zip']").unbind("keyup");
};
});
Close your input tags
for example
<input type="radio" name="country" value="Canada">
should be
<input type="radio" name="country" value="Canada"/>
IDs are unique
and exist once, and only once, in a particular document.
for example
<div id="radio-buttons">...</div><div id="radio-buttons">...</div>
should be something like
<div id="radio-buttons-1">...</div><div id="radio-buttons-2">...</div>
or
<div class="radio-buttons">...</div><div class="radio-buttons">...</div>
open your mind
There doesn't seem to be a need to handle each of these on an individual basis, you should think "how can i get those to copy here" not "lets copy this one and this one and this one..."
which would give you jquery that looks more like this:
var ship = $('.form-container').eq(0).find('input'),//first fields
bill = $('.form-container').eq(1).find('input').not('#copyCheck,#PO-Box_2');//second fields
$('#copyCheck').on('change', function () {
if ($(this).prop('checked')) { bindGroups(); }//checked:bind answers
else { unbindGroups(); }//!checked:remove answers
});
function brains(e,i) {//runs on bindgroups and on irt
var tc;
if (e.is('[type=radio]')) {//if radio
tc = e.prop('checked');//get checked
bill.eq(i).prop('checked',tc);//add checked to corresponding element
} else if(e.is('[type=text],[type=email]')) {//if text or email
tc = e.val();//get value
bill.eq(i).val(tc);//add value to corresponding element
}
}
function bindGroups() {//copy
ship.each(function(i){//for each input
brains($(this),i);//run brains
$(this).on('keyup change', function() {//on keyup or change
brains($(this),i);//run brains
});
});
}
function unbindGroups() {//clear the deck
ship.each(function(i){//for each input
if ($(this).is('[type=radio]')) {//if radio
bill.eq(i).prop('checked',false);//reset radio optional
} else if($(this).is('[type=text],[type=email]')) {//if text or email
bill.eq(i).val('');//empty text optional
}
}).unbind();//unbind actions
}
That way your not writing jquery for every element individually.
made a fiddle: http://jsfiddle.net/filever10/bC3mQ/
I have registration form with date element of HTML 5 (use for user b-date).
Yes, it works find but, I see some problem.
If I choose month (e.g I choose month APRIL) the modal will close and the date element left.
Thank you so much.
I have this form:
<form role="form" action="" method="post">
<input type="hidden" name="class" value="client" />
<input type="hidden" name="func" value="add" />
<div class="form-group">
<label for="recordnumber">Record Number</label>
<input type="text" autocapitalize="off" autocorrect="off" class="form-control" id="record_number" name="record_number" placeholder="Enter Record Number" required>
</div>
<div class="form-group">
<label for="firstname">First Name</label>
<input type="text" autocapitalize="off" autocorrect="off" class="form-control" id="fname" placeholder="Enter First Name" name="fname" required>
</div>
<div class="form-group">
<label for="lastname">Last Name</label>
<input type="text" autocapitalize="off" autocorrect="off" class="form-control" id="lname" placeholder="Enter Last Name" name="lname" required>
</div>
<div class="form-group">
<label for="birthdate">Birth Date</label>
<input type="text" autocapitalize="off" autocorrect="off" class="form-control" id="date_birth" name="date_birth" placeholder="Enter Birth Date" required>
</div>
<div class="form-group">
<label for="deathdate">Date of Death</label>
<input type="text" autocapitalize="off" autocorrect="off" style="z-index: 10520" class="form-control" id="date_death" name="date_death" placeholder="Enter Date of Death" required>
</div>
<div class="form-group">
<label for="clinictype">Client Type</label>
<select class="form-control" name="client_type" id="client_type" required>
<option value="">Select Client Type</option>
<?php
$_data = $type->get_all('client');
if($_data!=false): foreach($_data['value'] as $data ): ?>
<option value="<?php echo $data ?>"><?php echo $data ?></option>
<?php endforeach; endif; ?>
</select>
</div>
<input style="margin-top: 20px;" type="submit" class="btn btn-success btn-default">
</form>
I have a problem with a regular expression. console.log shows me the login regular expression isn't respected, but my span doesn't show, my email span works.
I think it's a basic JS/jQuery problem, but I couldn't find the solution.
HTML:
<form name="formSignup">
<fieldset>
<label for="nom">Nom :</label>
<input type="text" name="nom" id="nom" class="required" />
<label for="prenom">Prenom :</label>
<input type="text" name="prenom" id="prenom" class="required" />
<label for="email">Votre Email:</label>
<input type="email" name="email" id="email" class="required" onclick="spanHide()" />
<label for="username">Login:</label>
<input type="text" name="username" id="username" class="required" />
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="required" />
<input id="Submit1" type="button" value="Login" data-role="button" data-inline="true" data-theme="b" onclick='createuser()' />
</fieldset>
</form>
JS:
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
var loginReg= /^[a-zA-Z0-9]+$/;
if (email == '') {
$("#email").after('<span id="errormail" class="error">Please enter your email address.</span>');
}
if (!loginReg.test(myLogin)) {
console.log("error");
$("#username").after('<span id="errorlogin" class="error">only letter + digits plz</span>');
}
if (!emailReg.test(email)) {
$("#email").after('<span id="errormail" class="error">Enter a valid email address.</span>');
}