don't work submit in JQuery
Question
I have this code code of submit form:
$('.nav_step ul li').live('click', function(event){
$( "#"+where_it ).submit();
event.preventDefault();
});
HTML
<div class="row nav_step">
<ul>
<li class="first">
<a href="/~162/appsite/requirement/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">1</span> Requirements
</span>
</span>
</span>
</a>
</li>
<li class="">
<a href="/~162/appsite/profile/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">2</span> Profile
</span>
</span>
</span>
</a>
</li>
<li class="">
<a href="/~162/appsite/assets/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">3</span> Assets
</span>
</span>
</span>
</a>
</li>
<li class="active">
<a href="/~162/appsite/liability/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">4</span> Liabilities
</span>
</span>
</span>
</a>
</li>
<li class="">
<a href="/~162/appsite/third/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">5</span> Third Parties
</span>
</span>
</span>
</a>
</li>
<li class="">
<a href="/~162/appsite/compliance/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">6</span> Compliance
</span>
</span>
</span>
</a>
</li>
<li class="">
<a href="/~162/appsite/document/index.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">7</span> Documents
</span>
</span>
</span>
</a>
</li>
<li class="last">
<a href="/~162/appsite/document/result.html">
<span class="left_bg">
<span class="right_bg">
<span class="center_bg">
<span class="namber_box">8</span> Submit
</span>
</span>
</span>
</a>
</li>
</ul>
</div>
<form class="form-vertical" id="client-liability-form" action="/~162/appsite/liability/update.html" method="post">
<div style="display:none"><input type="hidden" value="ccc127985bc916e7ee507b4a238173097edf2338" name="YII_CSRF_TOKEN"></div> <fieldset>
<div class="large-15 columns button_holder">
<div class="indent_holder_2">
<strong class="btn_previous movePrev"><a href="#">Previous</a></strong>
<strong class="btn_save moveSave"><a href="#">Save</a></strong>
<strong class="btn_next moveNext"><a href="#">Next</a></strong>
</div>
</div>
<div id="itemsHolder" class="liability">
<div class="large-15 columns box_bg_holder_2 iner_2 liabilityBlock" rel="0">
<div class="indent_holder">
<div class="row indent_5">
<div class="large-3 columns">
<div class="row_label_2">
<label></label>
</div>
<div class="row_input">
<select class="select_box_2 selectLiability" name="ApplicationLiability[0][item_type]" id="ApplicationLiability_0_item_type">
<option value="0" selected="selected">Property Loan</option>
<option value="1">Credit Card</option>
<option value="2">Car Lease</option>
<option value="3">Personal Loan</option>
<option value="4">Other</option>
</select><span class="required_field_text" id="ApplicationLiability_item_type_em_" style="display: none"></span>
</div>
</div>
<div class="large-3 columns">
<div class="row_label">
<label for="ApplicationLiability_address">Address</label> </div>
<div class="row_input">
<input class="input_box_2" name="ApplicationLiability[0][address]" id="ApplicationLiability_0_address" type="text" maxlength="255"><span class="required_field_text" id="ApplicationLiability_address_em_" style="display: none"></span>
</div>
</div>
<div class="large-6 columns">
<div class="row_label_2">
<label></label>
</div>
<div class="row_input top_margin">
<div class="row_input_4">
<span class="ownership_text" rel="0"><a href="#">Ownership</a></span>
</div>
<div class="row_input_4">
<strong class="hint_holder iner">
<a href="#" tabindex="-9999">Monthly Payment</a>
</strong>
<input class="input_box_2 maskMoney monthly_payment" name="ApplicationLiability[0][monthly]" id="ApplicationLiability_0_monthly" type="text" value="$ 0"><span class="required_field_text" id="ApplicationLiability_monthly_em_" style="display: none"></span>
</div>
<div class="row_input_4">
<strong class="hint_holder">
<a href="#" tabindex="-9999">Limit</a>
</strong>
<input class="input_box_2 maskMoney limit" name="ApplicationLiability[0][limit]" id="ApplicationLiability_0_limit" type="text" value="$ 0"><span class="required_field_text" id="ApplicationLiability_limit_em_" style="display: none"></span>
</div>
<div class="row_input_4">
<strong class="hint_holder">
<a href="#" tabindex="-9999">Balance</a>
</strong>
<input class="input_box_2 maskMoney balance" name="ApplicationLiability[0][balance]" id="ApplicationLiability_0_balance" type="text" value="$ 0"><span class="required_field_text" id="ApplicationLiability_balance_em_" style="display: none"></span>
</div>
</div>
</div>
<div class="large-3 columns indent_top">
<strong class="btn_delete liability"><a href="#">Delete</a></strong>
<strong class="btn_add_more liability"><a>Add More</a></strong>
</div>
</div>
<div class="row">
<div class="large-3 columns">
<div class="row_label_2">
</div>
</div>
<div class="large-3 columns">
<div class="row_input_2">
<div class="row_label">
<label class="line" for="ApplicationLiability_bsb">BSB</label> </div>
<div class="row_input">
<input class="input_box_2" name="ApplicationLiability[0][bsb]" id="ApplicationLiability_0_bsb" type="text" maxlength="255"><span class="required_field_text" id="ApplicationLiability_bsb_em_" style="display: none"></span>
</div>
</div>
<div class="row_input_2">
<div class="row_label double_width iner">
<label for="ApplicationLiability_account_number">Account Number</label> </div>
<div class="row_input">
<input class="input_box_2" name="ApplicationLiability[0][account_number]" id="ApplicationLiability_0_account_number" type="text" maxlength="255"><span class="required_field_text" id="ApplicationLiability_account_number_em_" style="display: none"></span>
</div>
</div>
</div>
<div class="large-3 columns">
</div>
</div>
<div class="ownership_block" style="display: none;">
<div class="row indent_5">
<div class="row_label">
Tom Tomas </div>
<div class="row_input">
<input type="text" value="50" name="Ownership[0][118][percent]" id="Ownership_0_118_percent"><span>%</span>
<input type="hidden" value="118" name="Ownership[0][118][applicant_id]" id="Ownership_0_118_applicant_id"> </div>
</div>
<div class="row indent_5">
<div class="row_label">
Tom Tomas </div>
<div class="row_input">
<input type="text" value="50" name="Ownership[0][125][percent]" id="Ownership_0_125_percent"><span>%</span>
<input type="hidden" value="125" name="Ownership[0][125][applicant_id]" id="Ownership_0_125_applicant_id"> </div>
</div>
<div class="row indent_5">
<div class="row_label">
</div>
<div class="row_input">
<input type="text" value="0" name="Ownership[0][126][percent]" id="Ownership_0_126_percent"><span>%</span>
<input type="hidden" value="126" name="Ownership[0][126][applicant_id]" id="Ownership_0_126_applicant_id"> </div>
</div>
<input type="submit" value="Save" class="btn_save">
</div>
</div>
</div> </div>
<div class="large-15 columns box_bg_holder">
<div class="indent_holder iner">
<div class="row">
<div class="large-6 columns">
<div class="row_label_2">
<label for="ApplicationLiability_monthly_exp">What are your current Monthly expenses?</label> </div>
</div>
<div class="large-6 columns">
<div class="row_input">
<div class="row_input_4 none">
<strong class="total_price"></strong>
</div>
<div class="row_input_4">
<input class="input_box_2 maskMoney monthly_payment" name="ApplicationLiability[0][monthly_exp]" id="ApplicationLiability_0_monthly_exp" type="text" value="$ 0"><span class="required_field_text" id="ApplicationLiability_monthly_exp_em_" style="display: none"></span>
</div>
<div class="row_input_4 none">
<strong class="btn_help_box">
<a href="#">help</a>
<span class="help_box">There Will Be any written comment</span>
</strong>
</div>
</div>
</div>
<div class="large-1 columns">
</div>
</div>
</div>
</div>
<div class="large-15 columns box_bg_holder_2 iner_4">
<div class="indent_holder">
<div class="row">
<div class="large-6 columns">
<div class="row_label_2">
<label></label>
</div>
</div>
<div class="large-6 columns">
<div class="row_label_2">
<label></label>
</div>
<div class="row_input">
<div class="row_input_4">
<strong class="total_price">Total:</strong>
</div>
<div class="row_input_4">
<strong class="hint_holder iner">
<a href="#" tabindex="-9999">Monthly Payment</a>
</strong>
<strong class="total_price" id="monthly_payment_result">
$ 0 </strong>
</div>
<div class="row_input_4">
<strong class="hint_holder">
<a href="#" tabindex="-9999">Limit</a>
</strong>
<strong class="total_price" id="limit_result">
$ 0 </strong>
</div>
<div class="row_input_4">
<strong class="hint_holder">
<a href="#" tabindex="-9999">Balance</a>
</strong>
<strong class="total_price" id="balance_result">
$ 0 </strong>
</div>
</div>
</div>
<div class="large-3 columns indent_top">
</div>
</div>
</div>
</div>
<div class="large-15 columns box_bg_holder">
<div class="indent_holder iner" style="padding-left: 0;">
<div class="large-9 columns">
<div class="row_label">
<label for="ApplicationLiability_comment">Income details (if any):</label> </div>
<div class="row_input">
<textarea class="textarea_box_2" name="ApplicationLiability[0][comment]" id="ApplicationLiability_0_comment"></textarea><span class="required_field_text" id="ApplicationLiability_comment_em_" style="display: none"></span>
</div>
</div>
<div class="large-3 columns"></div>
</div>
</div>
<div class="large-15 columns button_holder">
<div class="indent_holder_2">
<strong class="btn_previous movePrev"><a href="#">Previous</a></strong>
<strong class="btn_save moveSave"><a href="#">Save</a></strong>
<strong class="btn_next moveNext"><a href="#">Next</a></strong>
</div>
</div>
</fieldset>
<input id="moveType" type="hidden" value="save" name="moveType"> </form>
With event.preventDefault(); links does not work after clicking, without event.preventDefault(); i can't see error message after validation and form is submitted but error message i can't see and page reload without notify user about errors.
If i am use this code for detect errors, form does'n submit and it not work.
$( "#"+where_it ).submit(function( event ) {
alert( "Handler for .submit() called." );
});
where_it this is id of form - work fine.
UPDATE: I want what form submit if is errors users notify about it, if not errors i am go to link.
UPDATE1 When i am use this code
$( "#"+where_it ).submit(function(event)
{
event.preventDefault();
if( /* no error */)
{
$( "#"+where_it ).submit();
}else{
alert( "error." );
}
});
I will have just redirect. Not submit form and not any errors. Handler for .submit() not work. This is strange.
UPDATE2
$(document).ready(function(){
$('.nav_step ul li').on('click', function(event){
$( "#"+where_it ).submit(function( event ) {
alert( "Handler for .submit() called." );
});
$( "#"+where_it ).submit();
event.preventDefault();
});
});
In this code works all. But if all good i am can't redirected after click event coz event.preventDefault(); not allow it. If this is remove i can't see error message after validation. i think possible solution is do something this if success redirect(url: this .nav_step ul li a). But i don't know how do it.
1 answers
solution1
2 ACCPTED 2014-01-28 13:42:38
You need to use event.preventDefault() but you should submit the form manually after everything was ok. $( "#"+where_it ).submit(); . something like this:
$('form').submit(function(event)
{
event.preventDefault();
if( /* no error */)
{
$('form').submit();
}
});
This is a simple demo you can check it out and change your code.
HTML :
<form>
<input type='text' id='name' name='name'>
<input type='text' id='last_name' name='name'>
<input type='submit' id='send' value='SEND'>
</form>
<span></span>
JS :
$('form').on('submit', function(event)
{
event.preventDefault();
if($('#name').val() != '' && $('#last_name').val() != '')
{
// here you can submit the form
alert('submitted');
//$('form').submit();
}
else
{
$('span').text('fill the textboxes.');
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Jquery form submit event don't work if i trigger manually
Html submit button don't work after add jquery
bootstrap form validation don't work when submit from jquery
Form validation on submit don't work
Form button submit value don't work
Submit method don't work in rails
jQuery on submit doesn't work
jQuery objects don't work
Flask jQuery don't work
jQuery className don't work
Related Tags