I'm trying to validate every input in my HTML Form. But at the same time, I want to make the textbox borders appear red, when a user didn't input anything or didn't meet the format, requirement input in my form. Any tips on how to do `
<body background='bgimg.jpg'>
<form id='forma'align='center'>
<fieldset class='fieldset-auto-width'>
<div>
<label for='fname'><b>FirstName:</b></label>
<input type='text' value='' name='fname' placeholder='Enter First Name' required='required' pattern='[a-z]'/>
</div>
<div>
<label for='lname'><b>LastName:</b></label>
<input type='text' value='' name='lname'placeholder='Enter Last Name' required='required'/>
</div>
<div>
<label for='pass'><b>Password:</b></label>
<input type='password' value'' name='pass' placeholder='Enter Password' required='required'/>
</div>
<div>
<label for='eAdd'><b>Email Address:</b></label>
<input type='text' value='' name='eAdd' placeholder='e.g: ilovehtml#html.com' required='required'/>
</div>
<div>
<label for='hAdd'><b>Home Address:</b></label>
<input type='text' value='' name='hAdd' size:'30' placeholder='Enter Current Home Address' required='required'/>
</div>
<div>
<label for='gender'><b>Gender:</b></label>
<input type='radio' value='Male' name='gender' required='required' />Male
<input type='radio' value='Female' name='gender'/> Female
</div>
<div>
<label for='status'><b>Status:</b></label>
<input type='radio' value='Single' name='status' required='required'/> Single
<input type='radio' value='Married' name='status'/> Married
<input type='radio' value='Widow' name='status'/> Widow
</div>
<div>
<label for='dob'><b>Date of Birth:</b></label>
<input type='date' value='' name='dob'placeholder='MM/DD/YY' required='required'/>
</div>
<div>
<label for='bansa'><b>Country:</b></label>
<select name='country' >
<option value='AR'>Aruba</option>
<option value='BR'>Brazil</option>
<option value='CH'>Chad</option>
<option value='DN'>Denmark</option>
<option value='EN'>England</option>
</select>
</div>
</br>
</br>
<div>
<center><b>Siblings</b></center>
<table border='1' align='center' bgcolor='#C5E3BF'>
<tr>
<td>Name</td>
<td>Age</td>
<td>Gender</td>
</tr>
<tr>
<td><input type='text' value='' name='name' /></td>
<td><input type='text' value='' name='age' size='3'/></td>
<td><input type='text' value='' name='sGender' size='8'/></td>
</tr>
<tr>
<td><input type='text' value='' name='name'/></td>
<td><input type='text' value='' name='age' size='3'/></td>
<td><input type='text' value='' name='sGender' size='8'/></td>
</tr>
<tr>
<td><input type='text' value='' name='name'/></td>
<td><input type='text' value='' name='age' size='3'/></td>
<td><input type='text' value='' name='sGender'size='8'/></td>
</tr>
</table>
</div>
</br>
<div>
<b><Center>Educations</center></b>
<table border='1' bgcolor='#C5E3BF'>
<center><tr>
<td>School Name</td>
<td>Year Graduated</td>
<td>Honor Received</td>
</tr></center>
<tr>
<td><input type='text' value='' name='sName'/></td>
<td>
<center><select name='country'>
<option value='2001'>2001</option>
<option value='2002'>2002</option>
<option value='2003'>2003</option>
<option value='2004'>2004</option>
<option value='2005'>2005</option>
</select>
</td>
<td><input type='text' value='' name='hnrReceived'/></td>
</tr></center>
<tr>
<td><input type='text' value='' name='sName'/></td>
<td>
<center><select name='country'>
<option value='2001'>2001</option>
<option value='2002'>2002</option>
<option value='2003'>2003</option>
<option value='2004'>2004</option>
<option value='2005'>2005</option>
</select></center>
</td>
<td><input type='text' value='' name='hnrReceived'/></td>
</tr>
<tr>
<td><input type='text' value='' name='sName'/></td>
<td>
<center><select name='country'>
<option value='2001'>2001</option>
<option value='2002'>2002</option>
<option value='2003'>2003</option>
<option value='2004'>2004</option>
<option value='2005'>2005</option>
</select></center>
</td>
<td><input type='text' value='' name='hnrReceived'/></td>
</tr>
</table>
</div>
<div>
<label for='abtyrslf'><b>About Yourself:</b></label>
</br>
<textarea cols='50' rows='10' placeholder='Tell us something about yourself.'></textarea>
</div>
<input type='submit' value='Submit'/>
<input type='reset' value='Reset'/>
</br>
</br>
</br>
<div>
<center><img src='gwaponess.jpg' id='pogi' height="190" width="190"/></center>
</div>
</fieldset>
</form>
<hr/>
<center><h3><h3></center>
<hr/>
</body>
See this fiddle
You can use :invalid pseudo CSS class
CSS
input:invalid {
border-color: red;
}
input:valid {
background-color: #ddffdd;
}
According to the docs
The :invalid CSS pseudo-class is applied automatically to
elements whose contents fail to validate according to the input's type
setting. This allows you to easily have invalid fields adopt an
appearance that helps the user identify and correct errors.
You can use jquery validation for that...
$('#forma').validate({
rules : {
fname: { required: true },
lname: { required: true },
eAdd: { requried: true },
pass: { required: true }
// and so on......
}
});
Just add reference for jquery lib and validation..
Related
The problem I'm facing is related with Invoicing system. There is one row exists by default but if there are more than one products then user can Add New Item which adds the new row with jQuery append function.
Invoicing system has few Inputs one of them is Item Name which autocomplete by Typehead JS.
Code of Predefined Row
<tbody id="TableBody">
<tr>
<td style="width: 220px">
<input type="text" class="form-control Item" name="Item" id="Item" placeholder="Nombre del producto" required autocomplete="off">
</td>
<td>
<input type="number" name="QTV" min="1" name="QTV" id="QTV" class="form-control text-right" placeholder="00" required>
</td>
<td>
<input step="2" type="number" class="form-control text-right" min="1" id="Rate" placeholder="0.00" readonly>
</td>
<td>
<input step="any" id="Disc" name="Disc" type="number" min="0" name="" class="form-control text-right" placeholder="00">
</td>
<td>
<input type="text" name="SubTotal" class="form-control text-right" id="Total" placeholder="Total" readonly>
</td>
<td>
<button type="button" class="btn btn-danger DelRow">Delete</button>
</td>
</tr>
</tbody>
Code to Add new Row
$('#AddNewItem').click(function() { $('#TableBody').append(`
<tr>
<td style='width: 220px'>
<input type='text' class='form-control Item' name='Item' id='Item' placeholder='Nombre del producto' required autocomplete='off'>
</td>
<td>
<input type='number' name='QTV' min='1' name='QTV' id='QTV' class='form-control text-right' placeholder='00' required>
</td>
<td>
<input step='2' type='number' class='form-control text-right' min='1' id='Rate' placeholder='0.00' readonly>
</td>
<td>
<input step='any' id='Disc' name='Disc' type='number' min='0' name='' class='form-control text-right' placeholder='00'>
</td>
<td>
<input type='text' name='SubTotal' class='form-control text-right' id='Total' placeholder='Total' readonly>
</td>
<td>
<button type="button" class="btn btn-danger DelRow">Delete</button>
</td>
</tr>
`); });
Code to show Auto suggestions
$(document).ready(function() {
$('.Item').typeahead({
source: function (query, process) {
return $.get('FetchItem.php?Item', { query: query }, function (data) {
data = $.parseJSON(data);
return process(data);
});
},
});
});
I just wanted to show suggestions on all the additional appended fields.
Any help would be much appreciated, Thank you
Screenshot
Afterall, I got the solution to my answer.
I was using jQuery document load function which was not working on the appended rows.
So instead of $(document).ready(function() { I just used $('.TableBody').on("click", ".Item", function() { and it worked.
I have a payment form and when someone selects the 'paypal' option, I want it to have the credit card details. I have taken some code from an existing from in which this function works and tried to adjust it for my edited form - but I can't seem to get it to work...
If someone could point out where I'm going wrong it would be gratingly appreciated! (I'm still very new to scripting)
The script i need help with is down the bottom of the form.
What I need it to do:
When you click on and off the 'paypal' checkbox, I want all the rows with the class of "hideCC" to toggle on and off.
<div class="checkoutForm-bg">
<div class="checkoutForm-wrapper">
<div class="shop-checkout shop-form">
<h1>Check Out</h1>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js?vs=b2206.r502081-phase1"></script>
<form name="catwebformform2140" method="post" onsubmit="return checkWholeForm2140(this)" enctype="multipart/form-data" action="https://sklzaustralia.worldsecuresystems.com/FormProcessv2.aspx?WebFormID=10850&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}&CC={module_urlcountrycode}&Referrer={module_siteurl,true,true}">
<span class="req">*</span> Required
<table class="webform" cellspacing="0" cellpadding="2" border="0">
<tbody>
<tr>
<td><label for="Title">Title</label><br />
<select name="Title" id="Title" class="cat_dropdown_smaller">
<option value="1328222">DR</option>
<option value="1328221">MISS</option>
<option value="1328218" selected="selected">MR</option>
<option value="1328219">MRS</option>
<option value="1328220">MS</option>
</select></td>
</tr>
<tr>
<td><label for="FirstName">First Name <span class="req">*</span></label><br />
<input name="FirstName" id="FirstName" class="cat_textbox" maxlength="255" type="text" /> </td>
</tr>
<tr>
<td><label for="LastName">Last Name <span class="req">*</span></label><br />
<input name="LastName" id="LastName" class="cat_textbox" maxlength="255" type="text" /> </td>
</tr>
<tr>
<td><label for="EmailAddress">Email Address <span class="req">*</span></label><br />
<input name="EmailAddress" id="EmailAddress" class="cat_textbox" maxlength="255" type="text" /> </td>
</tr>
<tr>
<td><label for="CAT_Custom_20097767">Phone number <span class="req">*</span></label><br />
<input maxlength="255" name="CAT_Custom_20097767" id="CAT_Custom_20097767" class="cat_textbox" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingAddress">Shipping Address <span class="req">*</span></label><br />
<input name="ShippingAddress" id="ShippingAddress" class="cat_textbox" maxlength="500" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingCity">City <span class="req">*</span></label><br />
<input name="ShippingCity" id="ShippingCity" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingState">State <span class="req">*</span></label><br />
<input name="ShippingState" id="ShippingState" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingZip">Zipcode/Postcode <span class="req">*</span></label><br />
<input name="ShippingZip" id="ShippingZip" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingCountry">Country <span class="req">*</span></label><br />
<select name="ShippingCountry" id="ShippingCountry" class="cat_dropdown">
<option value=" ">-- Select Country --</option>
<option value="AU" selected="selected">AUSTRALIA</option>
</select></td>
</tr>
<tr>
<td><label for="Company">Company</label><br />
<input name="Company" id="Company" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingInstructions">Shipping Instructions</label><br />
<textarea name="ShippingInstructions" id="ShippingInstructions" cols="10" rows="4" class="cat_listbox"></textarea></td>
</tr>
<tr>
<td><label for="BillingAddress">Billing Address <span class="req">*</span></label><br />
<input name="BillingAddress" id="BillingAddress" class="cat_textbox" maxlength="500" type="text" /></td>
</tr>
<tr>
<td><label for="BillingCity">City <span class="req">*</span></label><br />
<input name="BillingCity" id="BillingCity" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="BillingState">State <span class="req">*</span></label><br />
<input name="BillingState" id="BillingState" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="BillingZip">Zipcode/Postcode <span class="req">*</span></label><br />
<input name="BillingZip" id="BillingZip" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="BillingCountry">Country <span class="req">*</span></label><br />
<select name="BillingCountry" id="BillingCountry" class="cat_dropdown">
<option value=" ">-- Select Country --</option>
<option value="AU" selected="selected">AUSTRALIA</option>
</select></td>
</tr>
<tr>
<td><label>Payment Method <span class="req">*</span></label><br />
<input checked="checked" name="PaymentMethodType" id="PaymentMethodType_1" value="1" type="radio" />Credit Card<br />
<input name="PaymentMethodType" id="PaymentMethodType_5" value="5" type="radio" />PayPal<br />
<input name="PaymentMethodType" id="PaymentMethodType_9" value="9" type="radio" />Gift Voucher</td>
</tr>
<tr class="hideCC">
<td><label for="CardName">Name on Card <span class="req">*</span></label><br />
<input name="CardName" id="CardName" class="cat_textbox" autocomplete="off" type="text" /></td>
</tr>
<tr class="hideCC">
<td><label for="CardNumber">Card Number <span class="req">*</span></label><br />
<input name="CardNumber" id="CardNumber" class="cat_textbox" autocomplete="off" type="text" /></td>
</tr>
<tr class="hideCC">
<td><label>Card Expiry <span class="req">*</span></label><br />
<select name="CardExpiryMonth" id="CardExpiryMonth" class="cat_dropdown_smaller">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select><select name="CardExpiryYear" id="CardExpiryYear" class="cat_dropdown_smaller">
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select></td>
</tr>
<tr class="hideCC">
<td><label for="CardType">Card Type <span class="req">*</span></label><br />
<select name="CardType" id="CardType" class="cat_dropdown">
<option value="1">Visa</option>
<option value="2">Mastercard</option>
<option value="4">American Express</option>
</select></td>
</tr>
<tr class="hideCC">
<td><label for="CardCCV">CCV Number <span class="req">*</span></label><br />
<input name="CardCCV" id="CardCCV" class="cat_textbox" autocomplete="off" type="text" /></td>
</tr>
<tr>
<td><label for="Amount">Amount <span class="req">*</span> <span id="constraint-300-label"></span></label><br />
<input name="Amount" id="Amount" class="cat_textbox" type="text" /></td>
</tr>
<tr>
<td><input class="cat_button" value="Submit" id="catwebformbutton" type="submit" /></td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
var submitcount2140 = 0;function checkWholeForm2140(theForm){var why = "";if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name"); if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name"); if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value); if (theForm.ShippingAddress) why += isEmpty(theForm.ShippingAddress.value, "Shipping Address"); if (theForm.ShippingCity) why += isEmpty(theForm.ShippingCity.value, "Shipping City"); if (theForm.ShippingState) why += isEmpty(theForm.ShippingState.value, "Shipping State"); if (theForm.ShippingZip) why += isEmpty(theForm.ShippingZip.value, "Shipping Zipcode"); if (theForm.ShippingCountry) why += checkDropdown(theForm.ShippingCountry.value, "Shipping Country"); if (theForm.BillingAddress) why += isEmpty(theForm.BillingAddress.value, "Billing Address"); if (theForm.BillingCity) why += isEmpty(theForm.BillingCity.value, "Billing City"); if (theForm.BillingState) why += isEmpty(theForm.BillingState.value, "Billing State"); if (theForm.BillingZip) why += isEmpty(theForm.BillingZip.value, ""); if (theForm.BillingCountry) why += checkDropdown(theForm.BillingCountry.value, "Billing Country"); if (theForm.PaymentMethodType) why += checkSelected(theForm.PaymentMethodType, "Payment Method");if (!theForm.PaymentMethodType || getRadioSelected(theForm.PaymentMethodType) == 1) { if (theForm.CardName) why += isEmpty(theForm.CardName.value, "Name on Card"); if (theForm.CardNumber) why += isNumeric(theForm.CardNumber.value, "Card Number"); if (theForm.Amount) why += isCurrency(theForm.Amount.value, "Amount"); } if (theForm.CAT_Custom_20097767) why += isCurrency(theForm.CAT_Custom_20097767.value, "Phone number");if(why != ""){alert(why);return false;}if(submitcount2140 == 0){submitcount2140++;theForm.submit();return false;}else{alert("Form submission is in progress.");return false;}}
// Credit Card info is not required if paying by PayPal, Hosted Credit Card, COD etc
function ShowCCFields(val) {
if (!document.getElementsByClassName("hideCC"))
return;
if (val != 1)
document.getElementsByClassName("hideCC").style.display = "none";
else
document.getElementsByClassName("hideCC").style.display = "inline";
}
//]]>
</script>
</form>
</div>
</div>
</div>
Since you are including jQuery why not try this:
$(document).ready(function() {
$('[name="PaymentMethodType"]').change(function () {
if ($(this).val() == 1) {
$('.hideCC').show();
} else {
$('.hideCC').hide();
}
});
});
<div class="checkoutForm-bg">
<div class="checkoutForm-wrapper">
<div class="shop-checkout shop-form">
<h1>Check Out</h1>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js?vs=b2206.r502081-phase1"></script>
<form name="catwebformform2140" method="post" onsubmit="return checkWholeForm2140(this)" enctype="multipart/form-data" action="https://sklzaustralia.worldsecuresystems.com/FormProcessv2.aspx?WebFormID=10850&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}&CC={module_urlcountrycode}&Referrer={module_siteurl,true,true}">
<span class="req">*</span> Required
<table class="webform" cellspacing="0" cellpadding="2" border="0">
<tbody>
<tr>
<td><label for="Title">Title</label><br />
<select name="Title" id="Title" class="cat_dropdown_smaller">
<option value="1328222">DR</option>
<option value="1328221">MISS</option>
<option value="1328218" selected="selected">MR</option>
<option value="1328219">MRS</option>
<option value="1328220">MS</option>
</select></td>
</tr>
<tr>
<td><label for="FirstName">First Name <span class="req">*</span></label><br />
<input name="FirstName" id="FirstName" class="cat_textbox" maxlength="255" type="text" /> </td>
</tr>
<tr>
<td><label for="LastName">Last Name <span class="req">*</span></label><br />
<input name="LastName" id="LastName" class="cat_textbox" maxlength="255" type="text" /> </td>
</tr>
<tr>
<td><label for="EmailAddress">Email Address <span class="req">*</span></label><br />
<input name="EmailAddress" id="EmailAddress" class="cat_textbox" maxlength="255" type="text" /> </td>
</tr>
<tr>
<td><label for="CAT_Custom_20097767">Phone number <span class="req">*</span></label><br />
<input maxlength="255" name="CAT_Custom_20097767" id="CAT_Custom_20097767" class="cat_textbox" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingAddress">Shipping Address <span class="req">*</span></label><br />
<input name="ShippingAddress" id="ShippingAddress" class="cat_textbox" maxlength="500" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingCity">City <span class="req">*</span></label><br />
<input name="ShippingCity" id="ShippingCity" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingState">State <span class="req">*</span></label><br />
<input name="ShippingState" id="ShippingState" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingZip">Zipcode/Postcode <span class="req">*</span></label><br />
<input name="ShippingZip" id="ShippingZip" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingCountry">Country <span class="req">*</span></label><br />
<select name="ShippingCountry" id="ShippingCountry" class="cat_dropdown">
<option value=" ">-- Select Country --</option>
<option value="AU" selected="selected">AUSTRALIA</option>
</select></td>
</tr>
<tr>
<td><label for="Company">Company</label><br />
<input name="Company" id="Company" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="ShippingInstructions">Shipping Instructions</label><br />
<textarea name="ShippingInstructions" id="ShippingInstructions" cols="10" rows="4" class="cat_listbox"></textarea></td>
</tr>
<tr>
<td><label for="BillingAddress">Billing Address <span class="req">*</span></label><br />
<input name="BillingAddress" id="BillingAddress" class="cat_textbox" maxlength="500" type="text" /></td>
</tr>
<tr>
<td><label for="BillingCity">City <span class="req">*</span></label><br />
<input name="BillingCity" id="BillingCity" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="BillingState">State <span class="req">*</span></label><br />
<input name="BillingState" id="BillingState" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="BillingZip">Zipcode/Postcode <span class="req">*</span></label><br />
<input name="BillingZip" id="BillingZip" class="cat_textbox" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label for="BillingCountry">Country <span class="req">*</span></label><br />
<select name="BillingCountry" id="BillingCountry" class="cat_dropdown">
<option value=" ">-- Select Country --</option>
<option value="AU" selected="selected">AUSTRALIA</option>
</select></td>
</tr>
<tr>
<td><label>Payment Method <span class="req">*</span></label><br />
<input checked="checked" name="PaymentMethodType" id="PaymentMethodType_1" value="1" type="radio" />Credit Card<br />
<input name="PaymentMethodType" id="PaymentMethodType_5" value="5" type="radio" />PayPal<br />
<input name="PaymentMethodType" id="PaymentMethodType_9" value="9" type="radio" />Gift Voucher</td>
</tr>
<tr class="hideCC">
<td><label for="CardName">Name on Card <span class="req">*</span></label><br />
<input name="CardName" id="CardName" class="cat_textbox" autocomplete="off" type="text" /></td>
</tr>
<tr class="hideCC">
<td><label for="CardNumber">Card Number <span class="req">*</span></label><br />
<input name="CardNumber" id="CardNumber" class="cat_textbox" autocomplete="off" type="text" /></td>
</tr>
<tr class="hideCC">
<td><label>Card Expiry <span class="req">*</span></label><br />
<select name="CardExpiryMonth" id="CardExpiryMonth" class="cat_dropdown_smaller">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select><select name="CardExpiryYear" id="CardExpiryYear" class="cat_dropdown_smaller">
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select></td>
</tr>
<tr class="hideCC">
<td><label for="CardType">Card Type <span class="req">*</span></label><br />
<select name="CardType" id="CardType" class="cat_dropdown">
<option value="1">Visa</option>
<option value="2">Mastercard</option>
<option value="4">American Express</option>
</select></td>
</tr>
<tr class="hideCC">
<td><label for="CardCCV">CCV Number <span class="req">*</span></label><br />
<input name="CardCCV" id="CardCCV" class="cat_textbox" autocomplete="off" type="text" /></td>
</tr>
<tr>
<td><label for="Amount">Amount <span class="req">*</span> <span id="constraint-300-label"></span></label><br />
<input name="Amount" id="Amount" class="cat_textbox" type="text" /></td>
</tr>
<tr>
<td><input class="cat_button" value="Submit" id="catwebformbutton" type="submit" /></td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
var submitcount2140 = 0;function checkWholeForm2140(theForm){var why = "";if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name"); if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name"); if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value); if (theForm.ShippingAddress) why += isEmpty(theForm.ShippingAddress.value, "Shipping Address"); if (theForm.ShippingCity) why += isEmpty(theForm.ShippingCity.value, "Shipping City"); if (theForm.ShippingState) why += isEmpty(theForm.ShippingState.value, "Shipping State"); if (theForm.ShippingZip) why += isEmpty(theForm.ShippingZip.value, "Shipping Zipcode"); if (theForm.ShippingCountry) why += checkDropdown(theForm.ShippingCountry.value, "Shipping Country"); if (theForm.BillingAddress) why += isEmpty(theForm.BillingAddress.value, "Billing Address"); if (theForm.BillingCity) why += isEmpty(theForm.BillingCity.value, "Billing City"); if (theForm.BillingState) why += isEmpty(theForm.BillingState.value, "Billing State"); if (theForm.BillingZip) why += isEmpty(theForm.BillingZip.value, ""); if (theForm.BillingCountry) why += checkDropdown(theForm.BillingCountry.value, "Billing Country"); if (theForm.PaymentMethodType) why += checkSelected(theForm.PaymentMethodType, "Payment Method");if (!theForm.PaymentMethodType || getRadioSelected(theForm.PaymentMethodType) == 1) { if (theForm.CardName) why += isEmpty(theForm.CardName.value, "Name on Card"); if (theForm.CardNumber) why += isNumeric(theForm.CardNumber.value, "Card Number"); if (theForm.Amount) why += isCurrency(theForm.Amount.value, "Amount"); } if (theForm.CAT_Custom_20097767) why += isCurrency(theForm.CAT_Custom_20097767.value, "Phone number");if(why != ""){alert(why);return false;}if(submitcount2140 == 0){submitcount2140++;theForm.submit();return false;}else{alert("Form submission is in progress.");return false;}}
// Credit Card info is not required if paying by PayPal, Hosted Credit Card, COD etc
$(document).ready(function() {
$('[name="PaymentMethodType"]').change(function () {
if ($(this).val() == 1) {
$('.hideCC').show();
} else {
$('.hideCC').hide();
}
});
});
//]]>
</script>
</form>
</div>
</div>
</div>
I have created a dynamic form and I am trying to send the form data to mysql through PHP but its not working. Data is not getting sent even from the very first row without adding a dynamic row. I'm new to this topic, so I'm out of ideas to solve it. How can I make this form a correct one and send accurate data to mysql?
In my form I have 3 fields that are not dynamic.
Here is the form code:
<form name="newbillform" method="POST" action="save_purchase_details.php">
<table style=" border:1px solid black" cellpadding="5px" cellspacing="0px" align="center" border="0">
<tr>
<td colspan="4" style="background:#0066FF; color:#FFFFFF; fontsize:20px" align="center">
ADD NEW PURCHASE RECORD
</td>
</tr>
<tr>
<td>Date:</td>
<td>
<input type="date" name="p_date"/>
</td>
</tr>
<tr>
<td>Invoice Number:</td>
<td>
<input type="text" name="invoice_no" size="50">
</td>
</tr>
<tr>
<td>Balance:</td>
<td>
<input type="text" name="balance" size="50">
</td>
</tr>
</table>
<h2 style="padding-left:10px;">Enter Product Details Below:-</h2>
<table id="product_details" style="margin-top:8px;" align='center' border='1' width="900px">
<tr id="row1">
<td>
<input type="text" name="qty[]" value="" placeholder="Quantity" size="6">
</td>
<td>
<input type="text" name="pack[]" value="" placeholder="Pack" size="6">
</td>
<td>
<input type="text" name="item_name[]" value="" placeholder="Item Name" size="16">
</td>
<td>
<input type="text" name="batch[]" value="" placeholder="Batch" size="6">
</td>
<td>
<input type="text" name="expiry[]" value="" placeholder="Expiry" size="6">
</td>
<td>
<input type="text" name="mrp[]" value="" placeholder="M.R.P" size="6">
</td>
<td>
<input type="text" name="rate[]" value="" placeholder="Rate" size="6">
</td>
<td>
<input type="text" name="vat[]" value="" placeholder="VAT" size="6">
</td>
<td>
<input type="text" name="discount[]" value="" placeholder="Discount" size="6">
</td>
<td>
<input type="button" class="button-add-row" onclick="add_row();" value="ADD ROW" size="8">
</td>
</tr>
</table>
<center>
<input type="submit" name="submit_row" value="SUBMIT">
</center>
</form>
Here is the javascript code:
<script type="text/javascript">
function add_row()
{
$rowno = $("#product_details tr").length;
$rowno = $rowno + 1;
$("#product_details tr:last").after("<tr id='row"+$rowno+"'><td><input type='text' name='qty[]' placeholder='Quantity' size='6'></td><td><input type='text' name='pack[]' placeholder='Pack' size='6'></td><td><input type='text' placeholder='Item Name' name='item_name[]' size='16'></td><td><input type='text' name='batch[]' placeholder='Batch' size='6'></td><td><input type='text' name='expiry[]' placeholder='Expiry' size='6'></td><td><input type='text' name='mrp[]' placeholder='M.R.P' size='6'></td><td><input type='text' name='rate[]' placeholder='Rate' size='6'></td><td><input type='text' name='vat[]' placeholder='VAT' size='6'></td><td><input type='text' name='discount[]' placeholder='Discount' size='6'></td><td><input type='button' class='button-add-row' value='DELETE' onclick=delete_row('row"+$rowno+"')></td></tr>");
}
function delete_row(rowno)
{
$('#'+rowno).remove();
}
</script>
Here is the PHP code:
<?php
$connect = mysql_connect("localhost","root","") or die(mysql_error());
mysql_select_db("store_records",$connect) or die(mysql_error());
if(isset($_POST['submit_row']))
{
$amount;
$grand_total;
for($i = 0; $i < count($_POST['item_name']); $i++)
{
$qty = $_POST['qty'][$i];
$p_date = $_POST['p_date'];
$invoice_no = $_POST['invoice_no'];
$balance = $_POST['balance'];
$pack = $_POST['pack'][$i];
$item_name = $_POST['item_name'][$i];
$batch = $_POST['batch'][$i];
$expiry = $_POST['expiry'][$i];
$mrp = $_POST['mrp'][$i];
$rate = $_POST['rate'][$i];
$vat = $_POST['vat'][$i];
$discount = $_POST['discount'][$i];
$amount = $balance+($qty*$rate)-$discount;
$grand_total = $amount+(($amount*$vat)/100);
$query =mysql_query("insert into bill_records values('', '$p_date', '$invoice_no', '$balance', '$qty','$pack','$item_name', '$batch', '$expiry', '$mrp', '$rate', '$vat', '$discount', '$amount', '$grand_total')");
}
}
?>
It would be of great help. Thank You..
In the reserved area I wish to show errors that will show up if something doesn't go right with input. One prerequisite I have is that there must be some value within first name. If there is no value, within reserved should show "Name must be filled out".
As of right now I have an alert that shows up if the name is not filled out.
How can I make my errors be posted within the "Reserved" section?
JS:
function validateForm()
{
var x = document.forms["application"]["fName"].value;
if (x == null || x == "")
{
alert("Name must be filled out");
return false;
}
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>int222_162d16 - Assignment 3 - Home Page</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/sitecss.css" type="text/css" media="screen" />
<script src='javascript/myscript.js' type='text/javascript'></script>
</head>
<body>
<form name="application" id="application" method="post" action="https://zenit.senecac.on.ca/~emile.ohan/cgi-bin/cardApplication.cgi" onsubmit="return validateForm();">
<fieldset>
<legend class="t"><img src="https://zenit.senecac.on.ca/~emile.ohan/int222/bank-logo.png" alt="Assignment #3" />Seneca Bank - Credit Card Application</legend>
<div class="clearfix">
<aside class="l">
<fieldset>
<legend>Primary Applicant's Information</legend>
<table>
<tr>
<td>First Name*</td>
<td><input type="text" name="fName" id="fName" size="20" maxlength="20" autofocus="autofocus" ></td>
</tr>
<tr>
<td>Surname*</td>
<td><input type="text" name="sName" id="sName" size="20" maxlength="30"></td>
</tr>
<tr>
<td>Date of Birth*</td>
<td><input type="text" name="dob" id="dob" size="10" placeholder="MMMYYYY" maxlength="7"></td>
</tr>
<tr>
<td>Email Address*</td>
<td><input type="text" name="email" id="email" size="20" maxlength="60"></td>
</tr>
<tr>
<td>Phone No.*</td>
<td><input type="text" name="phone" id="phone" size="20" maxlength="12"></td>
</tr>
</table>
</fieldset>
</aside>
<section class="s">
<fieldset>
<legend>Primary Applicant's Address</legend>
<table>
<tr>
<td>Home Address*</td>
<td>Apt.</td>
</tr>
<tr>
<td><input type="text" name="address" id="address" size="30" maxlength="60"></td>
<td><input type="text" name="apt" id="apt" size="5" maxlength="4"></td>
</tr>
<tr>
<td><br />City* </td>
</tr>
<tr>
<td><input type="text" name="city" id="city" size="20" maxlength="40">
</tr>
<tr>
<td><br />Province*</td>
<td><br />Postal Code</td>
</tr>
<tr>
<td>
<select id="province" name="province" size="2">
<optgroup label="Province">
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland & Labrador">Newfoundland & Labrador</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Ontario">Ontario</option>
<option value="Prince Edward Island">PE</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
</optgroup>
<optgroup label="Territory">
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nunavut">Nunavut</option>
<option value="Yukon">Yukon</option>
</optgroup>
</select>
</td>
<td>
<input type="text" name="postal" id="postal" size="8" maxlength="7" placeholder="ANA NAN">
</td>
</tr>
</table>
</fieldset>
</section>
<aside class="r">
<fieldset>
<legend>Housing Status</legend>
<table>
<tr>
<td>Do you:</td>
<td>$Monthly Payment* </td>
</tr>
<tr>
<td><input type="checkbox" name="hStatus" id="s01" value="Own" />Own the property</td>
<td><input type="text" name="payment" id="payment" size="8" maxlength="6"></td>
</tr>
<tr>
<td><input type="checkbox" name="hStatus" id="s02" value="Rent" />Rent the property</td>
</tr>
<tr>
<td>Monthly Income*</td>
<td><input type="text" name="income" id="income" size="8" maxlength="6"></td>
</tr>
<tr>
<td>Years at current location*</td>
<td><input type="text" name="currYears" id="currYears" size="3" maxlength="2"></td>
</tr>
<tr>
<td>Pre-authorized Code*</td>
<td><input type="text" name="preCode" id="preCode" size="8"></td>
</tr>
</table>
</fieldset>
</aside>
</div>
<div class="clearfix">
<section class="s">
<fieldset>
<legend>Reserved - See below</legend>
<p><b>If you submit your application with errors and/or omissions, a list of errors and/or omissions will show here. Make the corrections and re-submit.</b></p>
<p><b>If you continue to have a problem submitting your application, make a note of the Reference No. and call us at 1-800-010-2000.</b></p>
<script>document.write</script>
</fieldset>
</section>
<aside class="l">
<fieldset>
<legend>Credit Check / Email Consent</legend>
<p><b>I consent to have a credit check performed</b></p>
<input type="checkbox" class="BoxCheck" name="creditCheck" id="c01" value="Yes" onclick="check(this);" />Yes
<input type="checkbox" class="BoxCheck" name="creditCheck" id="c02" value="No" onclick= "check(this);" />No
<br />
<p><b>I consent to have email messages sent to me</b></p>
<input type="radio" name="emailConsent" id="m01" value="Yes" />Yes
<input type="radio" name="emailConsent" id="m02" value="No" />No
<br />
Submitted on:
<script>
var d = new Date();
document.write(d.toDateString());
</script>
Ref. # <input type="text" name="refNo" id="refNo" size="8" readonly="readonly"> <br />
<!--Submit Application--> <input type="submit" value="Submit Application">
<!--Start Over--> <input type="reset" value="Start Over">
<input type="hidden" name="hName" id="hName" value="Mahmood"> <br />
<input type="hidden" name="hId" id="hId" value="int222_162d16"> <br />
</fieldset>
</aside>
</div>
</fieldset>
</form>
<footer class=f>
My zenit Account My JavaScript My CSS My Honesty
<script>
var dt=new Date(document.lastModified); // Get document last modified date
document.write('<p>This page was last updated on '+dt.toLocaleString()) + '</p>';
</script>
</footer>
</body>
</html>
Option 1:
You can use the "required" property on your input.
Option 2:
1- Create a div with style="display:none" where ever you like in your dom and assign an ID to that div. IE:
<div id="err1" style="display:none"></div>
2- In your javascript, on error:
if (x == null || x == "")
{
var errDiv = document.getElementById("err1");
errDiv.innerHTML = "Please fill input";
errDiv.style.display = 'block';
return false;
}
If I understand you correctly, just add a <span> element to your <section class="s">. Give the span an id like 'err_log' or just 'err' and use this to output the error
function validateForm()
{
var x = document.forms["application"]["fName"].value;
if (x == null || x == "")
{
alert("Name must be filled out");
document.getElementById('youridofthespan').innerHTML='Name must be filled out';
return false;
}else{
document.getElementById('youridofthespan').innerHTML='';
}
}
If you want to show and delete multiple errors, you can simply create on span for every error and do above to use them.
Hope this helps :)
Iam stuck while doing some calculations in Javascript. I have some rows of records being shown, each rows has calculations. The actual scenario is the system has to calculate quantity * unitprice and fill the total in Total Field. When i change the currency from a dropdown, it has to go through some if conditions which i have given in javascript, its not taking that. Dont know what is the actual issue. Can anyone help? Iam putting the html form below:
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.3.js'></script>
<script type="text/javascript">
function isNum(value)
{
return 123;
}
function calcTotals()
{
var total = 0;
var i = 0;
while (document.forms['cart'].elements['unitprice[]'][i])
{
unitpriceObj = document.forms['cart'].elements['unitprice[]'][i];
item_quantityObj = document.forms['cart'].elements['item_quantity[]'][i];
total_inr_valueObj = document.forms['cart'].elements['total_inr[]'][i];
totalObj = document.forms['cart'].elements['total[]'][i];
totalObj.value = parseFloat((item_quantityObj.value*1) * unitpriceObj.value*1);
//Currency_change formulae
var e = document.getElementById("currency_change[]");
var currency_selected = e.options[e.selectedIndex].value;
var price = $(this).find(':selected').data('price');
if (currency_selected.value() == 'INR'){
total_inr_valueObj.value=totalObj.value;
} else if (currency_selected.value() == 'USD'){
total_inr_valueObj.value = totalObj.value * price.value;
} else {
total_inr_valueObj.value = (inrvalue.value / price.value) * totalObj.value;
}
}
i++;
}
return;
}
</script>
</head>
<body>
<form name='cart' method='post' class='single' action='generate_quot_cust_edititems_save_complete.php?tender_id=1' >
<table width="100%" border="1" style="border-collapse: collapse;" cellpadding="1" cellspacing="1">
<tr bgcolor="#E6E6FA">
<td width=4%>SlNo</td>
<td width=10%>Item Name</td>
<td width=4%>Qty</td>
<td width=3%>Units</td>
<td width=4%>Unitprice</td>
<td width=6%>Currency</td>
<td width=6%>Total</td>
<td width=6%>Total INR</td>
</tr>
<tr>
<td width='4%'>
<input size='1' type='hidden' name='id[0]' value='' readonly/>
<input size='1' type='text' name='sl[0]' value='1' readonly/>
</td>
<td width='10%'><input type='text' size='28' id='item_name0' name='item_name[0]' placeholder='filter 3' value='filter 3' /</td>
<td width='4%'><input size='1' class='item_quantity' type='text' name='item_quantity[]' id='item_quantity[]' value='25' /></td>
<td width='3%'><input size='1' class='item_units' type='text' name='item_units[]' id='item_units[]' value='Nos' readonly/></td>
<td width='4%'><input size='5' class='unitprice' type='text' name='unitprice[]' id='unitprice[]' value='' onchange='calcTotals()'/></td>
<td width='6%'>
<select id='currency_change[]' name='currency_change[]'>
<option value=''>select</option>
<option value=USD data-price=1>USD</option>
<option value=INR data-price=65.831111>INR</option>
<option value=GBP data-price=0.643864>GBP</option>
<option value=EUR data-price=0.88469>EUR</option>
<option value=SGD data-price=1.398912>SGD</option>
</select></td>
<td width='8%'><input size='9' type='text' name='total[]' id='total[]' value='' readonly class='total'/></td>
<td width='8%'><input size='7' type='text' id='total_inr[]' name='total_inr[]' value=''/></td>
</tr>
<tr>
<td width='4%'><input size='1' type='hidden' name='id[1]' value='' readonly/><input size='1' type='text' name='sl[1]' value='2' readonly/></td>
<td width='10%'><input type='text' size='28' id='item_name1' name='item_name[1]' placeholder='Filter2' value='Filter2' /</td>
<td width='4%'><input size='1' class='item_quantity' type='text' name='item_quantity[]' id='item_quantity[]' value='15' /></td>
<td width='3%'><input size='1' class='item_units' type='text' name='item_units[]' id='item_units[]' value='Nos' readonly/></td>
<td width='4%'><input size='5' class='unitprice' type='text' name='unitprice[]' id='unitprice[]' value='' onchange='calcTotals()'/></td>
<td width='6%'>
<select id='currency_change[]' name='currency_change[]'>
<option value=''>select</option>
<option value=USD data-price=1>USD</option>
<option value=INR data-price=65.831111>INR</option>
<option value=GBP data-price=0.643864>GBP</option>
<option value=EUR data-price=0.88469>EUR</option>
<option value=SGD data-price=1.398912>SGD</option>
</select>
</td>
<td width='8%'><input size='9' type='text' name='total[]' id='total[]' value='' readonly class='total'/></td>
<td width='8%'><input size='7' type='text' id='total_inr[]' name='total_inr[]' value=''/></td>
</tr>
</table></div>
<br><br>INR Value -><input type="text" class="inrvalue" id="inrvalue" name="inrvalue" value="65.831111">
<br><br>
<table><td><input type='submit' value='--Save Data--' /></td></tr></table></form>
There are multiple problems in your script.
A more jQuery-ish solution will be something like
$('#table :input').change(function() {
var $tr = $(this).closest('tr'),
$totInr = $tr.find('[name="total_inr[]"]'),
unitprice = +$tr.find('[name="unitprice[]"]').val() || 0,
qty = +$tr.find('[name="item_quantity[]"]').val() || 0,
$currency = $tr.find('[name="currency_change[]"] option:selected'),
currency = $currency.val(),
inr = $('#inrvalue').val();
var total = unitprice * qty;
$tr.find('[name="total[]"]').val(total);
if (currency == 'INR') {
$totInr.val(total);
} else if (currency == 'USD') {
$totInr.val(total * unitprice);
} else {
$totInr.val((inr / ($currency.data('price') || 1)) * total);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name='cart' method='post' class='single' action='generate_quot_cust_edititems_save_complete.php?tender_id=1'>
<table width="100%" border="1" style="border-collapse: collapse;" cellpadding="1" cellspacing="1" id="table">
<tr bgcolor="#E6E6FA">
<td width=4%>SlNo</td>
<td width=10%>Item Name</td>
<td width=4%>Qty</td>
<td width=3%>Units</td>
<td width=4%>Unitprice</td>
<td width=6%>Currency</td>
<td width=6%>Total</td>
<td width=6%>Total INR</td>
</tr>
<tr>
<td width='4%'>
<input size='1' type='hidden' name='id[0]' value='' readonly/>
<input size='1' type='text' name='sl[0]' value='1' readonly/>
</td>
<td width='10%'>
<input type='text' size='28' id='item_name0' name='item_name[0]' placeholder='filter 3' value='filter 3' /</td>
<td width='4%'>
<input size='1' class='item_quantity' type='text' name='item_quantity[]' value='25' />
</td>
<td width='3%'>
<input size='1' class='item_units' type='text' name='item_units[]' id='item_units[]' value='Nos' readonly/>
</td>
<td width='4%'>
<input size='5' class='unitprice' type='text' name='unitprice[]' id='unitprice[]' value='' />
</td>
<td width='6%'>
<select id='currency_change[]' name='currency_change[]'>
<option value=''>select</option>
<option value=USD data-price=1>USD</option>
<option value=INR data-price=65.831111>INR</option>
<option value=GBP data-price=0.643864>GBP</option>
<option value=EUR data-price=0.88469>EUR</option>
<option value=SGD data-price=1.398912>SGD</option>
</select>
</td>
<td width='8%'>
<input size='9' type='text' name='total[]' id='total[]' value='' readonly class='total' />
</td>
<td width='8%'>
<input size='7' type='text' id='total_inr[]' name='total_inr[]' value='' />
</td>
</tr>
<tr>
<td width='4%'>
<input size='1' type='hidden' name='id[1]' value='' readonly/>
<input size='1' type='text' name='sl[1]' value='2' readonly/>
</td>
<td width='10%'>
<input type='text' size='28' id='item_name1' name='item_name[1]' placeholder='Filter2' value='Filter2' /</td>
<td width='4%'>
<input size='1' class='item_quantity' type='text' name='item_quantity[]' id='item_quantity[]' value='15' />
</td>
<td width='3%'>
<input size='1' class='item_units' type='text' name='item_units[]' id='item_units[]' value='Nos' readonly/>
</td>
<td width='4%'>
<input size='5' class='unitprice' type='text' name='unitprice[]' id='unitprice[]' value='' />
</td>
<td width='6%'>
<select id='currency_change[]' name='currency_change[]'>
<option value=''>select</option>
<option value=USD data-price=1>USD</option>
<option value=INR data-price=65.831111>INR</option>
<option value=GBP data-price=0.643864>GBP</option>
<option value=EUR data-price=0.88469>EUR</option>
<option value=SGD data-price=1.398912>SGD</option>
</select>
</td>
<td width='8%'>
<input size='9' type='text' name='total[]' id='total[]' value='' readonly class='total' />
</td>
<td width='8%'>
<input size='7' type='text' id='total_inr[]' name='total_inr[]' value='' />
</td>
</tr>
</table>
</div>
<br>
<br>INR Value ->
<input type="text" class="inrvalue" id="inrvalue" name="inrvalue" value="65.831111">
<br>
<br>
<table>
<td>
<input type='submit' value='--Save Data--' />
</td>
</tr>
</table>
</form>
I suggest you use AngularJS Numbers:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>