When hit enter on the any input field form gets submitted and calling AJAX. I need to call ajax when the submit button clicked.
Please check my html code.here i used form tag and ajax jquery function.Here when i enter on the any of the input box,it call the submit function and showing form validation.How to fix this issue?
<div class="card-body">
<input id="contractnumber_aftersave" type="hidden" readonly>
<form id="contract_form" action="#" name="contact" role="form" method="post" autocomplete="off">
<div class="row">
<div id="showcontractno" class="col-md-2 pr-1">
<div class="form-group">
<label for="contractnumberl">Contract Number</label>
<input id="contract_no" type="text" class="form-control" readonly>
</div>
</div>
<div id="confirm" class="modal hide fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
Do you want to add the Activity Area?
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" id="yesconfirm">Yes</button>
<button type="button" data-dismiss="modal" id="noconfirm" class="btn">No</button>
</div>
</div>
</div>
</div>
<div class="col-md-5 pr-1">
<div class="form-group">
<label for="cusnamel">Customer Name</label><span style="color:red;"> *</span>
<input class="form-control" id="contract_customername" name="contract_customername" type="text" placeholder="Enter Customer Name" onKeyPress="return ValidateAlpha(event);" require>
</div>
</div>
<div class="col-md-5 pl-1">
<div class="form-group">
<label for="contactnamel">Contact Name</label><span style="color:red;"> *</span>
<input class="form-control" id="contact_name" name="contact_name" type="text" placeholder="Enter Contact Name">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 pr-1">
<div class="form-group">
<label for="businesstypel">Business Type</label><span style="color:red;"> *</span>
<select class="form-control" id="busin_contract" name="busin_contract">
<option value="">Select</option>
<?php
foreach($business_types as $business_type)
{ ?><option value="<?php echo $business_type->business_type_id; ?>"><?php echo $business_type->business_type; ?></option>';
<?php }
?>
</select>
<?php //echo form_dropdown('business_type', $business_type, '', 'id="businesstype" class="form-control"');?>
</div>
</div>
<div class="col-md-4 px-1">
<div class="form-group">
<label for="businesslinel">Line of Business</label><span style="color:red;"> *</span>
<select class="form-control" id="lob_contract" name="lob_contract">
<option value="">Select</option>
<?php
foreach($line_of_businesss as $line_of_business)
{ ?><option value="<?php echo $line_of_business->line_of_business_id; ?>" data-prefix="<?php echo $line_of_business->contract_prefix; ?>">
<?php echo $line_of_business->line_of_business; ?></option>';
<?php }
?>
</select>
<?php //echo form_dropdown('line_of_business', $line_of_business, '', 'id="line_of_business" class="form-control"');?>
</div>
</div>
<div class="col-md-2 px-1">
<div class="form-group">
<label for="invoicingfreq1">Invoicing Frequency</label><span style="color:red;"> *</span>
<select class="form-control" id="invfreq_contract" name="invfreq_contract">
<option value="">Select</option>
<?php
foreach($invoicing_freqs as $invoicing_freq)
{ ?><option value="<?php echo $invoicing_freq->invoicing_freq_id; ?>"><?php echo $invoicing_freq->invoicing_freq; ?></option>';
<?php }
?>
</select>
<?php //echo form_dropdown('invoicing_freq', $invoicing_freq, '', 'id="invoicing_freq" class="form-control"');?>
</div>
</div>
<div class="col-md-2 pl-1">
<div class="form-group">
<label for="phonenol">Phone Number</label><span style="color:red;"> *</span>
<input class="form-control" id="contract_phoneno" name="contract_phoneno" type="text" placeholder="Enter Phone Number"
onkeyup="formatMobile(this);" >
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="contractAddressl">Address</label><span style="color:red;"> *</span>
<textarea class="form-control" name="contractAddress" id="contractAddress" placeholder="Enter Address"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 pr-1">
<div class="form-group">
<label for="cityl">City</label><span style="color:red;"> *</span>
<select class="form-control" id="contract_city" name="contract_city">
<option value="">Select</option>
<?php
foreach($citys as $city)
{ ?><option value="<?php echo $city->city_id; ?>"><?php echo $city->city; ?></option>';
<?php }
?>
</select>
<?php //echo form_dropdown('city', $city, '', 'id="city" class="form-control"');
//foreach($citys as $city){
?>
</div>
</div>
<div class="col-md-4 px-1">
<div class="form-group">
<label for="ccmonth">Start Date</label><span style="color:red;"> *</span>
<input class="form-control contractDate" id="contractStartdate" name="contractStartdate" readonly>
</div>
</div>
<div class="col-md-4 pl-1">
<div class="form-group">
<label for="ccyear">End Date</label><span style="color:red;"> *</span>
<input class="form-control contractDate" id="contractenddate" name="contractenddate" readonly>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 pr-1">
<div class="form-group">
<label for="contractpricel">Price</label><span style="color:red;"> *</span>
<input class="form-control" id="contract_price" name="contract_price" type="text"
placeholder="0.00">
</div>
</div>
<div class="col-md-3 px-1">
<div class="form-group">
<label for="vatl">VAT</label>
<input class="form-control" id="contract_vat" data-value="5" placeholder="0.00" readonly>
</div>
</div>
<div class="col-md-3 pl-1">
<div class="form-group">
<label for="totalamtl">Total Amount</label>
<input class="form-control" id="contract_totamt" placeholder="0.00" readonly>
</div>
</div>
<div class="col-md-3 pl-1">
<div class="form-group">
<label for="contractemail1">Email ID</label>
<input class="form-control" id="contract_email" name="contract_email">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="contractscopel">Scope of Work</label><span style="color:red;"> *</span>
<textarea class="form-control" name="contractscope" id="contractscope" placeholder="Content..."></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="contractremarksl">Remarks</label>
<textarea class="form-control" id="contractRemarks" placeholder="Content..."></textarea>
</div>
</div>
</div>
<input id="contractID" type="hidden" value="">
<div class="row">
<div class="update ml-auto mr-auto">
<input type="submit" value="Save Contract" class="btn btn-success" id="savecontract">
<!-- <input type="submit" id="savecontract" value="Save Contract" class="btn btn-primary btn-round">-->
</div>
</div>
</form>
</div>
When click the submit button
$('#savecontract').on('click', function(event) {
//event.preventDefault();
$('#contract_form').validate({
rules: {
contract_customername: {
required: true
},
contact_name: {
required: true
},
contract_phoneno: {
required: true
},
contractAddress: {
required: true
},
contract_price: {
required: true
},
contractscope: {
required: true
},
contractenddate: {
required: true
},
contractStartdate: {
required: true
},
busin_contract: {
required: {
depends: function(element) {
return $("#busin_contract").val() == "";
} }
},
lob_contract: {
required: {
depends: function(element) {
return $("#lob_contract").val() == "";
} }
},
invfreq_contract: {
required: {
depends: function(element) {
return $("#invfreq_contract").val() == "";
} }
},
contract_city: {
required: {
depends: function(element) {
return $("#contract_city").val() == "";
} }
},
},
messages: {
contract_customername: {
required: "Required"
},
contact_name: {
required: "Required"
},
contract_phoneno: {
required: "Required"
},
contractAddress: {
required: "Required"
},
contract_price: {
required: "Required"
},
contractscope: {
required: "Required"
},
contractStartdate: {
required: "Please select start date",
},
contractenddate: {
required: "Please select end date",
},
busin_contract: {
required: "Please select business type",
},
lob_contract: {
required: "Please select line of business",
},
invfreq_contract: {
required: "Please select invoicing frequency",
},
contract_city: {
required: "Please select city",
},
},
submitHandler: function(form) {
var contract_customername = $('#contract_customername').val();
var contact_name = $('#contact_name').val();
var businesstype = $("#busin_contract option:selected").val();
var lineofbusiness = $("#lob_contract option:selected").val();
var lineofbusiness_prefix = $("#lob_contract option:selected").attr('data-prefix');
var invoicingfrequency = $("#invfreq_contract option:selected").val();
var contract_city = $("#contract_city option:selected").val();
var contract_phoneno = $('#contract_phoneno').val();
var contractAddress = $('#contractAddress').val();
var contractStartdate = $('#contractStartdate').val();
var contractStartdate_split = contractStartdate.split("-").reverse().join("-");
var arr = contractStartdate_split.split('-');
var startyear = arr[2]; // for contract id set
alert(startyear)
var contractenddate = $('#contractenddate').val();
var contractenddate_split = contractenddate.split("-").reverse().join("-");
var contract_price = $('#contract_price').val();
var contract_vat = $('#contract_vat').val();
var contract_totamt = $('#contract_totamt').val();
var contractscope = $('#contractscope').val();
var contractRemarks = $('#contractRemarks').val();
var contract_email = $('#contract_email').val();
var contract_no = lineofbusiness_prefix.concat('/', startyear, '/');
$.ajax({
type: "POST",
url: 'contract_submitted',
data: {
getcontract_no: contract_no,
getcontract_customername: contract_customername,
getcontact_name: contact_name,
getbusinesstype: businesstype,
getlineofbusiness: lineofbusiness,
getinvoicingfrequency: invoicingfrequency,
getcontract_city: contract_city,
getcontract_phoneno: contract_phoneno,
getcontractAddress: contractAddress,
getcontractStartdate: contractStartdate_split,
getcontract_email: contract_email,
getcontractenddate: contractenddate_split,
getcontract_price: contract_price,
getcontract_vat: contract_vat,
getcontract_totamt: contract_totamt,
getcontractscope: contractscope,
getcontractRemarks: contractRemarks
},
success: function(data){
/*var aftersave_getvalue = $.parseJSON(data);
//console.log(aftersave_getvalue);
$('#contractID').val(aftersave_getvalue.Contract_id);
*/
//
var getcontractid = data.replace(/\"/g, "");
//console.log(JSON.stringify(data));
// console.log(data.contractsdetails); //<<-- Comes back undefined
// console.log(data.contractsdetails);
// confirmDialog();
$('#contract_no').val(contract_no + getcontractid);
$('#confirm').modal({
backdrop: 'static',
keyboard: false
})
.on('click', '#yesconfirm', function(e) {
$('#contractnumber_aftersave').val(contract_no + getcontractid); //hidden value
$('#activityarea').show();
$('#showcontractno').show();
$('#contract_no_activi').val(contract_no + getcontractid);
$('#savecontract').prop('disabled', true);
$('html, body').animate({
scrollTop: $('#activityarea').offset().top
}, 'slow');
}).on('click', '#noconfirm', function(e) {
location.reload();
});
//alert(data);
}
});
}
});
});
To reset both date inputs when you click on 'Clear', give them a class--I used '.contractDate' in the following example. This allows you to call Datepicker's option method and reset both the 'minDate' and 'maxDate' properties to null.
Update: For the format 'dd-mm-yy', run Datepicker's static method 'parseDate' on the input values before passing them to the minDate/maxDate properties.