submit a form using jquery is not working

Question

I am trying to submit a form using button click result_submit event. Here I am using type as button instead of submit.

Reason for changing button type from submit to button: I was trying to show some hidden div after the form submit, but I couldn't achieve that using a submit function. when I changed it type=button, I was able to do it with onclick function.

The problem I am facing here is I am not getting any results now.As soon as I change button type back to submit, it will work. Any suggestions here to resolve this ?

form html:

<form method="post" id="form_result" action="">

<----some options to select here->


    <div class="form-group">

    <button  onclick="show_result()" type="button" name="result_submit" id="result_submit"  style="display: none;margin:1%;" >Submit</button>

    </div>


</form>

Jquery:

function show_result() {

document.getElementById('form_result').submit();

}

Php (file name : functions.php):

if(isset($_POST['result_submit'])){


include_once 'dbConnection.php';

<--some codes here----->

if ($_POST['result_options'] == 'Current_Month'){   

<---some codes here----->
}
}

Important Note:-

my PHP codes are on default WordPress functions.php file. I added action for form, but not working.

Also tried to move the PHP code from functions.php to a new file. that is also not working. I think there is something wrong with my other codes.

Possible duplicate of [Submit a form using jQuery](https://stackoverflow.com/questions/1200266/submit-a-form-using-jquery) — Omi, Oct 22 '18 at 05:01
if you are going to submit form and not using Ajax to process form. it seem unnecessary then — Alive to die - Anant, Oct 22 '18 at 05:05
@acr Not sure why there is `display: none;` on the button... — CodeThing, Oct 22 '18 at 05:13
@CodeThing button will be displayed only after user select all options before that — acr, Oct 22 '18 at 05:15

score 0 · Answer 1 · answered Oct 22 '18 at 06:23

Try this one. On click function , it will fetch form_data and serializes form values

    $('#result_submit').click(function () {

            var form_data = $("#form_result");
            var data = form_data.serialize();
            console.log(data );
    }

score 0 · Answer 2 · answered Oct 22 '18 at 07:57

First of all remove style="display: none;margin:1%;" from your result_submit button otherwise, it will be not visible.

Your Code is working as it should be, but the problem is with your php file functions.php.

In it you are checking condition like if(isset($_POST['result_submit'])){, so condition returns true when you use input type='submit', but returns false when you use <button>, read below for reason.

it is not working Because named input type="submit" will be also submitted together with the other form's named fields while a named type="button" will not be submitted.

In the example below, the button with name='button' WON'T get submitted, while the input type=submit with name='submit' WILL get submitted.

sample form.html

<form action="insert.php" method="POST">

<!-- this won't get submitted despite being named -->
<button type="button" name="button">Normal Button</button>
<!-- this also won't get submitted despite being named -->
<input type="button" name="button1" value="Button1" >

<!-- this one does; so the input's TYPE is important! -->
<input type="submit" name="submit" value="Submit Button">

</form>

So change your functions.php file as below and it will work as you expect:

if( isset($_POST) && $_POST){

 include_once 'dbConnection.php';

 //some code here

 if (isset($_POST['result_options']) && $_POST['result_options'] == 'Current_Month'){   

   //some codes here

 }
}

It will work using your same above code, just change your functions.php file or file to which you are submitting your form.

submit a form using jquery is not working

2 Answers2