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>
Related
I have array of input field like this;
<input type="text" name="pname[283]" value="" class="input" />
<input type="text" name="pname[678]" value="" class="input" />
<input type="text" name="pname[876]" value="" class="input" />
<input type="text" name="pname[454]" value="" class="input" />
Now i want to get the array indexes of every field inside foreach loop something like this
$('.input').each(function(e) {
console.log('get array indexes'); eg: 283, 678, 876, 454
});
You can parse the name attribute manually.
$('.input').each(function() {
const name = $(this).prop('name');
console.log(name.slice(name.indexOf('[') + 1, -1));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="pname[283]" value="" class="input" />
<input type="text" name="pname[678]" value="" class="input" />
<input type="text" name="pname[876]" value="" class="input" />
<input type="text" name="pname[454]" value="" class="input" />
I'm trying to change the value of the submit button, only after required fields are filled. but as per my below code the value is changing even the required fields are not filled, additionally I'm need advice on how to mark at least one checkbox field as required.
$('#formSubmit').click(function(){
$(this).val("Processing");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label>Call Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="CAll Me">
</label>
<br />
<label>Email Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="Email Me">
</label>
<br />
<hr />
<input type="text" id="formName" name="formName" placeholder="Please Enter Your Name" required>
<br />
<input type="email" id="formEmail" name="formEmail" placeholder="Please Enter Your Email Address" required>
<br />
<input type="text" id="formMobile" name="formMobile" placeholder="Please Enter Your Contact No" min="10" max="10" required>
<br />
<input type="submit" id="formSubmit" value="Submit" />
</form>
You can listen to submit event instead:
$(document).ready(function(e) {
$('#myForm').on('submit', function(e){
e.preventDefault();
$('#formSubmit').val("Processing");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form id="myForm">
<label>Call Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="CAll Me">
</label>
<br />
<label>Email Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="Email Me">
</label>
<br />
<hr />
<input type="text" id="formName" name="formName" placeholder="Please Enter Your Name" required>
<br />
<input type="email" id="formEmail" name="formEmail" placeholder="Please Enter Your Email Address" required>
<br />
<input type="text" id="formMobile" name="formMobile" placeholder="Please Enter Your Contact No" min="10" max="10" required>
<br />
<input type="submit" id="formSubmit" value="Submit" />
</form>
</body>
$(document).ready(function(e) {
function validateForm() {
var isValid = true;
$('input[required]').each(function() {
if ( $(this).val() === '' ){
isValid = false;
}
});
return isValid;
}
$('#formSubmit').click(function(){
if(validateForm()) {
$(this).val("Processing");
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form>
<label>Call Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="CAll Me">
</label>
<br />
<label>Email Me
<input type="checkbox" name="contactMethod[]" id="contactMethod[]" value="Email Me">
</label>
<br />
<hr />
<input type="text" id="formName" name="formName" placeholder="Please Enter Your Name" required>
<br />
<input type="email" id="formEmail" name="formEmail" placeholder="Please Enter Your Email Address" required>
<br />
<input type="text" id="formMobile" name="formMobile" placeholder="Please Enter Your Contact No" min="10" max="10" required>
<br />
<input type="submit" id="formSubmit" value="Submit" />
</form>
</body>
I'm adding my solution since nobody seems to answer the second part of the question. You need to modify your markup a little as done below in the answer.
function makeChecks() {
checkBoxes = $("input:checked"); //Find checked checkboxes
if (checkBoxes.length) { //Only submit if some checked checkbox(es) exist
$('#exampleForm').find('input').each(function() {
if ($(this).prop('required') && $(this).val() !== "") {
$("#formSubmit").val("Processing");
}
});
}
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form id="exampleForm">
<label>Call Me
<input type="checkbox" name="contactMethod[]"
id="contactMethod[]" value="CAll Me">
</label>
<br />
<label>Email Me
<input type="checkbox" name="contactMethod[]"
id="contactMethod[]" value="Email Me">
</label>
<br />
<hr />
<input type="text" id="formName" name="formName" placeholder="Please Enter Your Name" required>
<br />
<input type="email" id="formEmail" name="formEmail" placeholder="Please Enter Your Email Address" required>
<br />
<input type="text" id="formMobile" name="formMobile" placeholder="Please Enter Your Contact No" min="10" max="10" required>
<br />
<input type="submit" id="formSubmit" onclick="makeChecks()" value="Submit" />
</form>
</body>
Id must be unique. Unique id must be assigned to each checkbox. Add required attribute to the checkbox controls.
<label>Call Me
<input type="checkbox" name="contactMethod[]" id="callMe" value="CAll Me" required>
</label>
<br />
<label>Email Me
<input type="checkbox" name="contactMethod[]" id="emailMe" value="Email Me" required>
</label>
You can use $(elem).val() != '' to check if a input element has been entered.
For checkbox, you can use $(elem).prop('checked') to check if a checkbox has been checked.
$(document).ready(function(e) {
$('#formSubmit').click(function(e){
if((!$('#callMe').prop('checked') || !$('#emailMe').prop('checked')) && $('#formName').val() != '' && $('#formEmail').val() != '' && $('#formMobile').val() != '')
$(this).val("Processing");
});
});
https://jsfiddle.net/snehansh/nwh0vct8/3/
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 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);
}
}
I'm using a JavaScript validator from http://www.javascript-coder.com/html-form/javascript-form-validation.phtml. The problem I'm facing is that I have one button that saves the registration (here I need to check for name and last name) and the second button which checks the entire form. However, if I press any button, it checks the entire form.
<form id="ministerial" name="register" action="" method="post">
<label>Title: </label>
<input type="text" name="title" value="" />
<label>First Name: </label>
<input type="text" name="first_name" value="" />
<label>Last Name: </label>
<input type="text" name="last_name" value="" />
<label>Organization: </label>
<input type="text" name="organization" value="" />
...
<input type="submit" name="save" value="SAVE REGISTRATION" />
<input type="submit" name="submit" value="SUBMIT REGISTRATION" />
</form>
<script type="text/javascript">
var frmvalidator = new Validator("ministerial");
frmvalidator.addValidation("title","req","Please enter a title");
frmvalidator.addValidation("first_name","req","Please enter the first name");
frmvalidator.addValidation("last_name","req","Please enter the last name");
frmvalidator.addValidation("organization","req","Please enter the organization");
</script>
Maybe this will work. Add validation for proper input fields onClick:
<form id="ministerial" name="register" action="" method="post">
<label>Title: </label>
<input type="text" name="title" value="" />
<label>First Name: </label>
<input type="text" name="first_name" value="" />
<label>Last Name: </label>
<input type="text" name="last_name" value="" />
<label>Organization: </label>
<input type="text" name="organization" value="" />
...
<input type="submit" name="save" value="SAVE REGISTRATION" onclick="return btnSave_click();" />
<input type="submit" name="submit" value="SUBMIT REGISTRATION" onclick="return btnRegister_click();" />
</form>
<script type="text/javascript">
var frmvalidator = new Validator("ministerial");
function btnSave_click(){
frmvalidator.clearAllValidations();
frmvalidator.addValidation("first_name","req","Please enter the first name");
frmvalidator.addValidation("last_name","req","Please enter the last name");
return true;
}
function btnRegister_click(){
frmvalidator.clearAllValidations();
frmvalidator.addValidation("title","req","Please enter a title");
frmvalidator.addValidation("organization","req","Please enter the organization");
return true;
}
</script>
I guess you will need to write a custom validation function