CODEWITHSUNDEEP
javascriptjqueryhtmlwordpress
acr
acr

Reputation: 1746

submit a form using jquery is not working

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.

Upvotes: 1

Views: 224

Answers (2)

Haritsinh Gohil
Haritsinh Gohil

Reputation: 6272

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.

Upvotes: 0

DPS
DPS

Reputation: 1003

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 );
    }

Upvotes: 0

Related Questions