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?

I'm not sure what you want now. What should happen on button click and what on form submit? — eisbehr
– eisbehr, Commented Jul 27, 2016 at 9:27
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? — Jurik
– Jurik, Commented Jul 27, 2016 at 9:32
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. — namdh
– namdh, Commented Jul 27, 2016 at 9:36
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. — namdh
– namdh, Commented Jul 27, 2016 at 9:49

Arun CM · Accepted Answer · 2016-07-27 10:11:08Z

2

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>

edited Jul 27, 2016 at 10:11

answered Jul 27, 2016 at 10:03

Arun CM

3,4452 gold badges31 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

namdh Over a year ago

It works. Thank you. I need to change a bit to fit your answer.

namdh Over a year ago

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 Over a year ago

@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

Mohammad Kermani · Accepted Answer · 2016-07-27 10:04:46Z

1

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

edited Jul 27, 2016 at 10:04

answered Jul 27, 2016 at 9:31

Mohammad Kermani

5,4368 gold badges39 silver badges63 bronze badges

5 Comments

namdh Over a year ago

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 Over a year ago

@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 Over a year ago

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 Over a year ago

I solved it :D Thank you. Sorry because of late answer your comment.

namdh Over a year ago

sorry, I forgot it. Forgive me :D

Collectives™ on Stack Overflow

Jquery onclick submit and jquery function

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related