Unable to submit form using Javascript

Question

I am trying to submit my form named 'vform' by using javascript and ajax.Here Button named 'show' is being used to show the 'div' containing form named vform and that form calls codevalidate function and there it submits the form using some ajax code..Where i am getting error is vform.submit().Here's the html and js code(I know error is in if condition but do not know where)

html:

<button id="show" onClick="javascript:codefield(); return false";>Apply for Discount</button>
            <div id="apply" style="display:none">Voucher code<br>
            <form id="vform" name="vform" action="" method="post" onsubmit="javascript:codevalidate(); return false;" >
            <input type="text" name="code" id="code"><br>
            <span id="error" style="color:red"></span><br>
            <input type="submit" name="btn" value="apply" id="btn" ></form>
            </div>

javascript:

function codevalidate()
{

if(document.getElementById('code').value!=="")
{
$.post("couponajax.php",{code:$("#code").val()},
    function(data)
    {   
        if(data=='1')
        {
            //alert("success");
            vform.submit();
            return true;
        }
        else 
        {
            document.getElementById('error').innerHTML="You have entered a wrong code!";
            return false;
        }

    });

}
else
{
document.getElementById('error').innerHTML="Code can't be empty!";
return false;
}

return false;

}

codefield function is just displaying the div on onclick event and ajax call is just checking whether the code exists in database or not..if exists returns 1 else 0. The problem is alert message is being displayed but form is not being submitted. How can I fix this problem?

I have tried it but it is not working yet.(if I use vform.submit() outside the if condition then it is working.) — Divya Bhutaani, Aug 18 '14 at 10:46
can you `log` or `alert` the `data` returned by `post` request? — Vedant Terkar, Aug 18 '14 at 10:48
`action` attribute of your `form` is empty. why is that? that can be a reason. and btw on which `browser` you are testing your code? — Vedant Terkar, Aug 18 '14 at 11:01
If action attribute would have created the error then it would have never submitted the form..I mean in case I write form.submit() outside if condition it gets submit?why? — Divya Bhutaani, Aug 18 '14 at 11:18

score 1 · Answer 1 · edited Aug 18 '14 at 10:53

1

I think you are missing jquery selector.

Try to replace

vform.submit();

with

$("#vform").submit();

or you can call submit button click event like

$("#btn").click();

edited Aug 18 '14 at 10:53

Vedant Terkar

4,553
8
36
62

answered Aug 18 '14 at 10:49

vamshichalla

141
1
1
10

score 0 · Answer 2 · answered Aug 18 '14 at 10:42

0

You are not selecting the form.

Try changing;

vform.submit();

To:

$("#vform").submit();

answered Aug 18 '14 at 10:42

i-CONICA

2,361
9
30
45

score 0 · Answer 3 · edited Aug 18 '14 at 10:52

0

Please try this one, works for me.

document.getElementById("vform").submit();

edited Aug 18 '14 at 10:52

Qantas 94 Heavy

15,750
31
68
83

answered Aug 18 '14 at 10:48

Rahul Vaghela

171
2
9

For me vform.submit is also working but not in if condition. I used if(isset($_POST['btn'])){echo "form submitted";}.. – Divya Bhutaani Aug 18 '14 at 11:04

score 0 · Answer 4 · answered Aug 18 '14 at 10:54

0

Try this

document.forms["vform"].submit();

Hope this helps.

answered Aug 18 '14 at 10:54

Leo

5,017
6
32
55

score 0 · Answer 5 · answered Aug 18 '14 at 11:03

You don't have to submit form with code.

Just call validation function and control submit flow with preventDefault function.

var codevalidate = function(e) {
    if (!validationCode) { // if validation code didn't pass
        e.preventDefault(); // prevent form from submitting
    }
}
// register callback that will be called when user submits form
document.getElementById("vform").addEventListener('onsubmit', codevalidate);

That way form will be submitted by user only if validation pass.

Also check if your data is actually returning '1' by calling console.log(data);

Form will be submitted to the current address if action is empty, is that ok?

I am using the post values on the same page..so yes that's ok. and yes the data is actually returning 1.The problem is form.submit(); code is working if i am using it outside if condition..i don know why..(btw thanks a lot:) ) — Divya Bhutaani, Aug 18 '14 at 12:41

score 0 · Answer 6 · answered Aug 18 '14 at 11:09

The thing is that:

action attribute of your form element is empty. So it is being submitted but to the same page from which it is calling the .submit() method.

so you should specify action attribute first of all like:

<form id="vform" name="vform" action="vfrom_submit.php" method="post" 
  onsubmit="javascript:codevalidate(); return false;" >
        .....
</form>

Also try changing

vform.submit();

to:

$("#vform").submit();
//OR
// document.getElementById("vform").submit();
// Although vform.submit() can also work.

Hope it helps, cheers :)!

Ankit Saroch · Answer 7 · 2014-08-18T10:57:27.160

-1

You should use:

document.getElementById("vform").submit();

Update:

Try removing "return false;" from onsubmit attribute and remove "vform.submit();" from the if condition as well.

edited Aug 18 '14 at 10:57

answered Aug 18 '14 at 10:41

Ankit Saroch

680
7
14

Unable to submit form using Javascript

7 Answers7