How to show/hide HTML elements with checkboxes - javascript

I was trying to create a checkbox checked by default for an ecommerce website, I want to show the div when the checkbox is unchecked. and hide the div when the checkbox is checked.
My Fiddle: http://jsfiddle.net/ScnQT/3161/

You can check whether checkbox is checked using $(this).prop('checked')
if checked $(this).prop('checked') returns true else false
for more details here
Updated fiddle
$('.shipping_address_details').hide();
$('#checkedforShippingAddress').change(function(){
if($(this).prop('checked')){
$('.shipping_address_details').hide();
}else{
$('.shipping_address_details').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input type="checkbox" name="shipping_address" checked="checked" id="checkedforShippingAddress">
<span>Ship to the same address</span>
</p>
<div class="shipping_address_details">
<br/>
<h3>Shipping Address</h3>
<p class="form-row form-row form-row-first ">
<label>First Name <abbr class="required" title="required">*</abbr></label>
<input type="text" class="input-text " name="billing_first_name" >
</p>
<p class="form-row form-row form-row-last " >
<label>Last Name <abbr class="required" title="required">*</abbr></label>
<input type="text" class="input-text " >
</p>
<div class="clear"></div>
<p class="form-row form-row form-row-first" >
<label>Email Address <abbr class="required" title="required">*</abbr></label>
<input type="email" class="input-text ">
</p>
<p class="form-row form-row form-row-last" >
<label>Postal Code <abbr class="required" title="required">*</abbr></label>
<input type="tel" class="input-text ">
</p>
<p class="form-row form-row form-row-first" >
<label>State <abbr class="required" title="required">*</abbr></label>
<input type="email" class="input-text ">
</p>
<p class="form-row form-row form-row-last" >
<label>City <abbr class="required" title="required">*</abbr></label>
<input type="tel" class="input-text ">
</p>
<div class="clear"></div>
<p class="form-row form-row form-row-wide" >
<label>Address <abbr class="required" title="required">*</abbr></label>
<input type="text" class="input-text">
</p>
<p class="form-row form-row form-row-wide address-field">
<input type="text" class="input-text">
</p>
</div><!-- shipping address container ends -->
</form>

$('.shipping_address_details').hide();
$('#checkedforShippingAddress').change(function(){
if($(this).prop('checked')){
$('.shipping_address_details').hide();
}
else if(!$(this).prop('checked')){
$('.shipping_address_details').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input type="checkbox" name="shipping_address" checked="checked" id="checkedforShippingAddress">
<span>Ship to the same address</span>
</p>
<div class="shipping_address_details">
<br/>
<h3>Shipping Address</h3>
<p class="form-row form-row form-row-first ">
<label>First Name <abbr class="required" title="required">*</abbr></label>
<input type="text" class="input-text " name="billing_first_name" >
</p>
<p class="form-row form-row form-row-last " >
<label>Last Name <abbr class="required" title="required">*</abbr></label>
<input type="text" class="input-text " >
</p>
<div class="clear"></div>
<p class="form-row form-row form-row-first" >
<label>Email Address <abbr class="required" title="required">*</abbr></label>
<input type="email" class="input-text ">
</p>
<p class="form-row form-row form-row-last" >
<label>Postal Code <abbr class="required" title="required">*</abbr></label>
<input type="tel" class="input-text ">
</p>
<p class="form-row form-row form-row-first" >
<label>State <abbr class="required" title="required">*</abbr></label>
<input type="email" class="input-text ">
</p>
<p class="form-row form-row form-row-last" >
<label>City <abbr class="required" title="required">*</abbr></label>
<input type="tel" class="input-text ">
</p>
<div class="clear"></div>
<p class="form-row form-row form-row-wide" >
<label>Address <abbr class="required" title="required">*</abbr></label>
<input type="text" class="input-text">
</p>
<p class="form-row form-row form-row-wide address-field">
<input type="text" class="input-text">
</p>
</div><!-- shipping address container ends -->
</form>

Your fiddle is almost right, but you have a small error. Here's a working fiddle:
http://jsfiddle.net/3ku3me4o/
You need if($(this).prop('checked') === true) rather than if($(this).prop('checked', true). The latter is setting the "checked" property to be true rather than testing if it's true.

https://jsfiddle.net/ScnQT/3165/
Although you can use .prop. If i'm not mistaken. .prop should be used for setting attributes, over checking them.
if($(this).is(':checked')){}
Should solve your problem.

$('.shipping_address_details').hide();
$('#checkedforShippingAddress').click(function(){
if($(this).is(":checked"))
$('.shipping_address_details').hide();
else
$('.shipping_address_details').show();
})
Fiddle

Related

WooCommerce Checkout - Input required if checkbox is checked

In my WooCommerce checkout form, I have an additional checkbox that displays a new input when selected.
I would like this input to be required when the checkbox is checked.
Can I solve it somehow using JavaScript without interfering directly with the form's code?
I attach screenshots of the form:
screenshot1,
screenshot2.
Possibly you have other ideas on how to do it properly?
<p class="form-row form-row-first validate-required woocommerce-invalid woocommerce-invalid-required-field" id="billing_first_name_field" data-priority="10">
<label for="billing_first_name" class="">First name <abbr class="required" title="pole wymagane">*</abbr></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_first_name" id="billing_first_name" placeholder="" value="Dominik" autocomplete="given-name">
</span>
</p>
<p class="form-row form-row-last validate-required woocommerce-invalid woocommerce-invalid-required-field" id="billing_last_name_field" data-priority="20">
<label for="billing_last_name" class="">Last name <abbr class="required" title="pole wymagane">*</abbr></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_last_name" id="billing_last_name" placeholder="" value="Test" autocomplete="family-name">
</span>
</p>
<p class="form-row form-row-wide" id="billing_company_field" data-priority="30">
<label for="billing_company" class="">Company name <span class="optional">(optional)</span></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_company" id="billing_company" placeholder="" value="" autocomplete="organization">
</span>
</p>
<p class="form-row form-row-wide woocommerce-validated" id="billing_invoice_ask_field" data-priority="30">
<span class="woocommerce-input-wrapper">
<label class="checkbox">
<input type="checkbox" class="input-checkbox " name="billing_invoice_ask" id="billing_invoice_ask" value="1"> I want to receive an invoice<span class="optional">(optional)</span>
</label>
</span>
</p>
<p class="form-row form-row-wide" id="billing_vat_number_field" data-priority="30" style="display: none;">
<label for="billing_vat_number" class="">VAT Number</label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_vat_number" id="billing_vat_number" placeholder="" value="">
</span>
</p>
$('.input-checkbox').change(function(){
$('#billing_vat_number_field').toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="form-row form-row-first validate-required woocommerce-invalid woocommerce-invalid-required-field" id="billing_first_name_field" data-priority="10">
<label for="billing_first_name" class="">First name <abbr class="required" title="pole wymagane">*</abbr></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_first_name" id="billing_first_name" placeholder="" value="Dominik" autocomplete="given-name">
</span>
</p>
<p class="form-row form-row-last validate-required woocommerce-invalid woocommerce-invalid-required-field" id="billing_last_name_field" data-priority="20">
<label for="billing_last_name" class="">Last name <abbr class="required" title="pole wymagane">*</abbr></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_last_name" id="billing_last_name" placeholder="" value="Test" autocomplete="family-name">
</span>
</p>
<p class="form-row form-row-wide" id="billing_company_field" data-priority="30">
<label for="billing_company" class="">Company name <span class="optional">(optional)</span></label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_company" id="billing_company" placeholder="" value="" autocomplete="organization">
</span>
</p>
<p class="form-row form-row-wide woocommerce-validated" id="billing_invoice_ask_field" data-priority="30">
<span class="woocommerce-input-wrapper">
<label class="checkbox">
<input type="checkbox" class="input-checkbox " name="billing_invoice_ask" id="billing_invoice_ask" value="1"> I want to receive an invoice<span class="optional">(optional)</span>
</label>
</span>
</p>
<p class="form-row form-row-wide" id="billing_vat_number_field" data-priority="30" style="display: none;">
<label for="billing_vat_number" class="">VAT Number</label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="billing_vat_number" id="billing_vat_number" placeholder="" value="">
</span>
</p>
To play around:
$('.check').change(function(){
var is_hidden = $('input[type="text"]').prop('hidden');
var make_hidden = true;
if (is_hidden === true){
make_hidden = false;
}
$('input[type="text"]').prop('hidden', make_hidden);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check"><label>Check</label>
<input type="text" hidden>
I solved my problem with the script below
jQuery(function ($) {
$('#billing_invoice_ask').change(function(){
if($(this).is(":checked")) {
$('#billing_vat_number_field').addClass('validate-required');
} else {
$('#billing_vat_number_field').removeClass('validate-required');
}
});
});

in jquery not able to show a specific div in side a click event

i am working in asp.net mvc application ,have writen following code in jquery
$(document).ready(function () {
$(".field-validation-error").hide();
$(".select-billing-address-button").click(function () {
$(".edit-address").hide();
$("#billing-address-select").val(this.value);
$(".new-address-next-step-button").click();
$('html,body').animate({
scrollTop: $(".new-billing-address").offset().top
}, 'slow');
});
$(".adress-new-submit").click(function () {
$(".field-validation-error").show();
$(".new-address-next-step-button").click();
$('html,body').animate({
scrollTop: $(".new-billing-address").offset().top
}, 'slow');
});
$(".field-validation-error").hide(); this code the field validation field
but i want to unhide the field validation field when i click adress-new-submit
button. using the code $(".field-validation-error").show(); but i am not able
the achive the goal using the above code.can any one help me
my html view is as follows
<div class="edit-address">
<div class="inputs">
<label for="BillingNewAddress_FirstName">First name:</label>
<input class="text-box single-line" data-val="true" data-val-required="First name is required." id="BillingNewAddress_FirstName" name="BillingNewAddress.FirstName" type="text" value="John">
<span class="required">*</span>
<span class="field-validation-valid" data-valmsg-for="BillingNewAddress.FirstName" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="BillingNewAddress_LastName">Last name:</label>
<input class="text-box single-line" data-val="true" data-val-required="Last name is required." id="BillingNewAddress_LastName" name="BillingNewAddress.LastName" type="text" value="Smith">
<span class="required">*</span>
<span class="field-validation-valid" data-valmsg-for="BillingNewAddress.LastName" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="BillingNewAddress_Email">Email:</label>
<input class="text-box single-line" data-val="true" data-val-email="Wrong email" data-val-required="Email is required." id="BillingNewAddress_Email" name="BillingNewAddress.Email" type="text" value="rakshiraik#gmail.com">
<span class="required">*</span>
<span class="field-validation-valid" data-valmsg-for="BillingNewAddress.Email" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="BillingNewAddress_Company">Company:</label>
<input class="text-box single-line" id="BillingNewAddress_Company" name="BillingNewAddress.Company" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="BillingNewAddress.Company" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="BillingNewAddress_CountryId">Country:</label>
<span class="required">*</span>
<span class="field-validation-error" data-valmsg-for="BillingNewAddress.CountryId" data-valmsg-replace="true" style="display: none;">Country is required.</span>
</div>
<div class="inputs">
<label for="BillingNewAddress_StateProvinceId">State / province:</label>
<span id="states-loading-progress" style="display: none;" class="please-wait"></span>
<span class="field-validation-valid" data-valmsg-for="BillingNewAddress.StateProvinceId" data-valmsg-replace="true"></span>
</div>
<input id="Location" name="Location" type="text" value="" placeholder="Enter a location" autocomplete="off" style="width:400px;"><br><br>
<div class="inputs">
<label for="BillingNewAddress_City">City:</label>
</div>
<div class="inputs">
<label for="BillingNewAddress_Address1">Address 1:</label>
<span class="required">*</span>
</div>
<div class="inputs">
<label for="BillingNewAddress_Address2">Address 2:</label>
<input class="text-box single-line" id="BillingNewAddress_Address2" name="BillingNewAddress.Address2" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="BillingNewAddress.Address2" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
</div>
<div class="inputs">
<label for="BillingNewAddress_PhoneNumber">Phone number:</label>
</div>
<div class="inputs">
<input class="text-box single-line" id="BillingNewAddress_FaxNumber" name="BillingNewAddress.FaxNumber" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="BillingNewAddress.FaxNumber" data-valmsg-replace="true"></span>
</div>
<button type="button" title="Continue" class="button-1 adress-new-submit">Continue</button>
You can try .toggle() in place of .show()
$(".field-validation-error").toggle();
Some times using the ID works, in place of $(".field-validation-error").toggle(); use "#idName" after giving it an id.
Make sure you try everything.

radio button selection using javascript?

I need help for i had develop the radio buttons one is cheque and anothewr one is online- transfer when ever user click cheque it displays one form and if user click online-transfer it display another form using java script ok it is working but click one radio button after refresh the browser no form can be displayed.Here is below attached my code please verify and suggest me.
html code:
<html>
<head>
<script text="text/javascript">
function optionChanged()
{
var a=document.withdrawform;
if(a.withdraw_by[0].checked)
{
a.reset();a.withdraw_by[0].checked=true;
document.getElementById("cheque_msg").style.visibility="visible";
document.getElementById("cheque_msg").style.display="block";
document.getElementById("accountInfo").style.visibility="hidden";
document.getElementById("accountInfo").style.display="none";
}
else
{
a.reset();a.withdraw_by[1].checked=true;
document.getElementById("accountInfo").style.visibility="visible";
document.getElementById("accountInfo").style.display="block";
document.getElementById("cheque_msg").style.visibility="hidden";
document.getElementById("cheque_msg").style.display="none";
}
}
</script>
</head>
<body>
<!--<a target="popup" onclick="window.open('https://www.facebook.com/','name','width=600,height=400')">Open page in new window</a>-->
<div class="main_content">
<p class="ca_head">Withdraw Cash</p>
<ul class="step_bar">
<li>1. Give your information</li>
<li class="active">2. Select Withdraw Option</li>
</ul>
<form id="withdrawform" name="withdrawform" method="post" action="withdraw-confirmation.html" onsubmit="clearErrors();">
<input type="hidden" name="bankAccount" id="bankAccount" value="0"/>
<input type="hidden" name="monthlyWithdraw" id="monthlyWithdraw" value="0"/>
<input type="hidden" name="withdrawableBalance" id="withdrawableBalance" value="0.37"/>
<input type="hidden" id="ecsCharge" value="0"/>
<input type="hidden" id="chequeCharge" value="0"/>
<input type="hidden" id="freeWithdrawCount" value="0"/>
<input type="hidden" id="withdrawError" value=""/>
<input type="hidden" name="ifsc" id="ifsc" value="N"/>
<div class="content_area">
<h3 class="sub_head">Submit your withdraw request for processing</h3>
<div class="form_row">
<label>Your Withdrawable Balance <strong>:</strong></label>
<strong><span class="rupeefont">r </span> 0.37</strong>
</div>
<div class="form_row">
<label for="new_mobile">Withdraw by <strong>:</strong></label>
<div class="flt_lt wid_256" id="withdraw_options">
<label class="lbl_flt">
<input type="radio" name="withdraw_by" id="withdraw_by" onclick="optionChanged()" value="Cheque" /> Cheque
</label>
<label class="lbl_flt">
<input type="radio" name="withdraw_by" id="withdraw_by" onclick="optionChanged()" value="Online Transfer"/> Online Transfer
</label>
</div>
</div>
<div id="cheque_msg" style="display:none;visibility:hidden"><span><p style="color:RED" align="justify">Please Note that Withdrawal by cheque would take upto 12 working days. Online Transfer is a much faster
option.Also, cheque would be dispatched to your regsitered mailing address.Submit your withdrawal request only if the address below is valid.If you wish to
update your address,please write to fairplay#RummyNo1.com along with your address proof.
</p>
<div class="form_row">
<label for="trackAmount">Enter the Amount <strong>:</strong></label>
<input type="text" name="trackAmount" id="trackAmount" class="flt_lt" style="width:138px;" maxlength="15"/>
</div>
</div>
<div id="accountInfo" style="display: none;">
<div class="form_row" style="position:relative;">
<div class="form_row">
<label for="accountNumber">Account number <strong>:</strong></label>
<input type="text" maxlength="45" name="accountNumber" id="accountNumber" class="flt_lt" style="width:138px;"/>
</div>
<div class="form_row">
<label for="reAccountNumber">Re enter account number <strong>:</strong></label>
<input type="text" maxlength="45" name="reAccountNumber" id="reAccountNumber" class="flt_lt" style="width:138px;"/>
</div>
<div class="form_row">
<label for="micr">MICR Code <!-- <img src="https://rcmg.in/rc/icon_info.png" border="0" />--> <strong> :</strong></label>
<input type="text" maxlength="9" name="micr" id="micr" class="flt_lt" style="width:138px;" />
</div>
<div class="form_row">
<label for="reMicr">Re enter MICR code <strong>:</strong></label>
<input type="text" maxlength="9" name="reMicr" id="reMicr" class="flt_lt" style="width:138px;"/>
</div>
<div class="form_row">
<label for="ifsc_code">IFSC Code <!-- <img src="https://rcmg.in/rc/icon_info.png" border="0" />--> <strong>:</strong></label>
<input type="text" maxlength="11" name="ifsc_code" id="ifsc_code" class="flt_lt" style="width:138px;" onkeypress="return onlyAlphaNumericsForIfsc(event)" />
</div>
<div class="form_row">
<label for="bank_name">Bank Name <strong>:</strong></label>
<input type="text" maxlength="30" name="bank_name" id="bank_name" class="flt_lt" style="width:138px;" onkeypress="return onlyAlphaNumerics(event)" />
</div>
<div class="form_row">
<label for="branch_name">Branch Name <strong>:</strong></label>
<input type="text" maxlength="30" name="branch_name" id="branch_name" class="flt_lt" style="width:138px;" onkeypress="return onlyAlphaNumerics(event)" />
</div>
</div>
<div class="form_row">
<label for="trackAmount">Enter the Amount <strong>:</strong></label>
<input type="text" name="trackAmount" id="trackAmount" class="flt_lt" style="width:138px;" maxlength="15"/>
</div>
<div class="form_row" id="withdrawButton">
<label> </label>
<input type="submit" name="submit_btn" title="Continue" value="Continue" class="btn_submit" id="withdrawsubmit"/>
</div>
<p class="info_txt">
For more information on service charges and withdrawing cash from your account,
click here.
</p>
<!-- -->
</div>
</form>
</div>
</body>
</html>

How can I change the text field size of number value entered?

This is my UI for a registration form. As you can see the text-fields which entered number value (Service_fee, Supplier_price, Total) are hiding the half on entered value. I used bootsrap to design this UI. And I tried by changing txtfield's class property by using input-large.
** **
But still complete value is not showing.. :(
Given below is my code. Please help me..
<body>
<div class="container">
<form action="MobilePhoneRepairing.php" method="POST" class="form-inline">
<h1 class="font">Mobile Phone Registration</h1>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="span10" >
<div class="control-group form-horizontal">
<p>
<label class="floated" for="sdate"><b>Select Date :</b></label>
<input type="date" name="sdate" id="sdate" class="input-medium" />
<br class="clear"/>
</p>
</div>
<div class="control-group form-inline">
<p>
<label class="floated" for="model_no"><b>Model no :</b></label>
<input type="text" name="model_no" id="model_no" class="input-medium" placeholder="Enter Modle No" />
<br class="clear" />
</p>
</div>
<div class="control-group form-inline">
<p>
<label class="floated" for="service_fee"><b>Service fee :</b></label>
<input type="number" name="service_fee" id="service_fee" class="input-medium" />
<br class="clear" />
</p>
</div>
<div class="control-group form-inline">
<p>
<label class="floated" for="sp_name"><b>Supplier name :</b></label>
<input type="text" name="sp_name" id="sp_name" class="input-medium" placeholder="Enter Supplier name " />
<br class="clear" />
</p>
</div>
<div class="control-group form-inline">
<p>
<label class="floated" for="sp_price"><b>Supplier price :</b></label>
<input type="number" name="sp_price" id="sp_price" class="input-medium" onkeyup="doMath();"/>
<br class="clear" />
</p>
</div>
<div class="control-group form-inline">
<p>
<label class="floated" for="description"><b>Description :</b></label>
<textarea class="textarea" name="description" rows="2" cols="12" placeholder="Enter item description"></textarea>
<br class="clear" />
</p>
</div>
<div class="control-group form-inline">
<p>
<label class="floated " for="total"><b>Total :</b></label>
<input type="number" name="total" id="total" class="input-medium" />
<br class="clear" />
</p>
</div>
<div class="control-group form-inline">
<p>
<label class="floated"> &nspar; </label>
<input type="submit" class="btn-info " name="save_data" value="Save" id='savedata' />
<input type="reset" class="btn-primary " name="reset" value="Reset Form" id='reset' />
<br class="clear"/>
</p>
</div>
</div>
</form>
</div>
</body>
use CSS to add a customized height:
.input-medium{
height: 35px;
}
If this doesn't wok for you, try using "!important":
.input-medium{
height: 35px !important;
}
Hope it helps!

jquery.validation() - validation works but no submit

I've encountered this strange situation where jQuery.validation method works - validates the form, but for some reason blocks form submission even if all required conditions are met.
Form HTML and JS:
<div id="createcustomer">
<form method="POST" action="http://localhost/actionurl..." id="create-customer-form">
<div class="input-table">
<div class="input-row">
<div class="input-cell-label" >
Skrót (Kod)
</div>
<div class="input-cell">
<input type="text" id="input-shortname" name="shortname" class="required" maxlength="25" value="" />
</div>
</div>
<div class="input-row">
<div class="input-cell-label" >
Pełna nazwa
</div>
<div class="input-cell">
<input type="text" id="input-fullname" name="fullname" class="required" maxlength="255" value="" />
</div>
</div>
<div class="input-row">
<div class="input-cell-label" >
Adres
</div>
<div class="input-cell">
<input type="text" id="input-address" name="address" class="" maxlength="90" value="" />
</div>
</div>
<div class="input-row">
<div class="input-cell-label" >
Kod pocztowy
</div>
<div class="input-cell">
<input type="text" id="input-postal_code" name="postal_code" class="" maxlength="6" value="" />
</div>
</div>
<div class="input-row">
<div class="input-cell-label" >
Miasto
</div>
<div class="input-cell">
<input type="text" id="input-city" name="city" class="" maxlength="45" value="" />
</div>
</div>
<div class="input-row">
<div class="input-cell-label" >
Państwo
</div>
<div class="input-cell">
<input type="text" id="input-country" name="country" class="required" maxlength="45" value="" />
</div>
</div>
<div class="input-row">
<div class="input-cell-label" >
Telefon
</div>
<div class="input-cell">
<input type="text" id="input-phone" name="phone" class="" maxlength="45" value="" />
</div>
</div>
<div class="input-row">
<div class="input-cell-label" >
Faks
</div>
<div class="input-cell">
<input type="text" id="input-fax" name="fax" class="" maxlength="45" value="" />
</div>
</div>
<div class="input-row">
<div class="input-cell-label" >
Email
</div>
<div class="input-cell">
<input type="text" id="input-email" name="email" class="" maxlength="45" value="" />
</div>
</div>
<div class="input-row">
<div class="input-cell-label" >
Strona www
</div>
<div class="input-cell">
<input type="text" id="input-website" name="website" class="" maxlength="45" value="" />
</div>
</div>
<div class="input-row">
<div class="input-cell" >
</div>
<div class="input-cell" >
<input type="submit" name="submit_create" value="Utwórz" class="submit"/><input type="Reset" value="Wyczyść" />
</div>
</div>
</div>
</form>
<script>
$(function(){
$("#create-customer-form").validate();
});
$(document).ready(function(){
});
No error message, no bugs in firebug, no nothing. JS works stable. I've tried to simplify it and try with only 1 input field - the same result. Form works perfectly fine without validation method aplied.
How is this caused and how can I solve it?
Not sure if it will work for you, just try:
$(document).ready(function(){
$("#create-customer-form").validate({
submitHandler: function(form) {
form.submit();
}
});
});

Categories