Jquery onclick submit and jquery function

Question

I have a button, when click, it do a jquery function and submit form too.

This is my HTML code:

<?php echo Form::open(array("class"=>"form-horizontal","method"=>"POST" ,"id"=>"frmMainOrders","enctype" => "multipart/form-data" )); ?>
 <div class="search">
 <tr class="tblAdvancedSearch">
 <th scope="row">備考</th>
 <td>
 <input class="input_text_search" type="text" name="multi_column" id="multi_column_search" value=""/>
 </td>
 </tr>
 <input type="submit" id="btn_submit" value="検 索" name="adv_search">
 </div>
<?php echo Form::close();?>

This is my script jquery:

$('.search').on('click', function() {
 showAdvancedForm(); // when click in div class=search, it do a jquery function name showAdvanceForm().
});
function showAdvancedForm() {
 if($(".tblAdvancedSearch").css('display') == 'none') {
 $(".tblAdvancedSearch").css('display', 'table-row');
 } else {
 $(".tblAdvancedSearch").css('display', 'none');
 }
}

I have tried:

<input type="submit" id="btn_submit" value="検 索" name="adv_search" onclick="$('form').submit()">

This way allow me submit form, but my controller can not get attribute name="adv_search", so my function doesn't work.

I have tried preventDefault() and $('#btn_submit').click(false). But both of them prevent all submit and jquery function.

Is there a way to submit the form but prevent ONLY jquery function when I click submit button?

• eisbehr: I'm not sure what you want now. What should happen on button click and what on form submit?
• Jurik: Hi and welcome to Stackoverflow! Please take a minute and read this tutorial for better questions, especially examples about good and bad titles: stackoverflow.com/help/how-to-ask - and please provide us more code - how does your form look alike and what is showAdvancedForm() function?
• namdh: I have one form and one button in in class="search", and script allow me show/hide this form when i click on <div class="search">. This submit button inside this form too, so when i click submit button, it does both script jquery and after that, it submit form. What i want is when i click submit button, it should not run script jquery, but still submit the form.
• Arun CM: @EagleEyes Have you tried event.stopPropagation() ?
• namdh: Hi Jurik, i have read all i can about my problem in Stackoverflow and api.jquery.com. I still not found anything can solve my problem. I added more code too.

Answer 1

You can use e.target.name to find out the name of the element. So based on that you can conditionally fire the method showAdvancedForm() .

e.target - Get the element that triggered a specific event

$('.search').on('click', function(e) {
 if (e.target.name == "multi_column") {
 console.log('calling method : showAdvancedForm');
 showAdvancedForm(); // when click in div class=search, it do a jquery function name showAdvanceForm().
 }
});
function showAdvancedForm() {
 if ($(".tblAdvancedSearch").css('display') == 'none') {
 $(".tblAdvancedSearch").css('display', 'table-row');
 } else {
 $(".tblAdvancedSearch").css('display', 'none');
 }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="page.html" class="form-horizontal">
 <div class="search">
 <tr class="tblAdvancedSearch">
 <th scope="row">備考</th>
 <td>
 <input class="input_text_search" type="text" name="multi_column" id="multi_column_search" value="" />
 </td>
 </tr>
 <input type="submit" id="btn_submit" value="検 索" name="adv_search">
 </div>
</form>

• namdh: It works. Thank you. I need to change a bit to fit your answer.
• namdh: e.target.name helped me so much :D :D By the way, when i click up vote your answer, i got this : Thanks for the feedback! Votes cast by those with less than 15 reputation are recorded, but do not change the publicly displayed post score. How can i up vote your answer?
• Arun CM: @EagleEyes Yes you need 15+ points in order to up vote , you can accept my answer by clicking the tick mark and it will become green after that. :). When you get more points mark cast your vote :-P

Answer 2

If you have a form and you want to send data via Ajax you should do something like this:

$('#formID').submit(function(e) {
 e.preventDefault();
 var submitButtonValue=$(this).children('input[type=submit]').val(); //This is 検 索
 var data=$(this).serialize()+ "&adv_search="+submitButtonValue;
 //probably your ajax call here... 
})

Serialize is a function that you can get all your inputs' values in your form by it, and you also can easily send it via Ajax

You should use submit, because it also will check validations and more

• namdh: I am using framework Fuel, i tried to use AJAX, it just can send data to my controller. My controller look like this: if($_POST['adv_search']) {do my function} My code check name of submit to work.
• Mohammad Kermani: @EagleEyes I edited my answer to what you need, you just need to add the content value of your submit to the serialized data, That will work
• namdh: Now i am doing like this: $("input[type=submit]").on('click', function(e) { if(!e.isDefaultPrevented()) { showAdvancedForm(); // when click btn_submit, form will be open and close immediately } }); I know, what i did is not really correct. But my customer just give me more strange requirement. I will do the way you give me later. Thank you.
• namdh: I solved it :D Thank you. Sorry because of late answer your comment.
• namdh: sorry, I forgot it. Forgive me :D