Ajax result evaluation

Question

i have a HTML from, and i want to validate it before it is submited, and i used ajax in the validation, i want it to submit the form if the ajax result is "OK" and to show an alert if else, The result is definatly "OK" but it is not submiting the form, pls help!!

---

here is the HTML code i used

 <form action="newplan.php" onsubmit="return validateplan();" method="post">
                      <TABLE style="font-size: small;width: 100%;background:  #7cdafe;">
    <Tr>
    <td>
        Planer Name <input type="text" disabled value="<?=$me['name']?>">
    </TD>
    <td>
        Title
        <input type="text" id="title" name="title" placeholder="Title this plan">
             </td>
             <tD>
        <LABEL for="month">Month</LABEL>
        <SELECT id="month" name="month">
            <OPTION value="0">Choose</OPTION>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </SELECT>

        <LABEL for="week">Week</LABEL>
        <select name="week" id="week">
            <OPTION>Choose</OPTION>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
    </td>
</tR>
</TABLE>
<div>
         <LABEL for="subdate">Submition Date</LABEL><input type="text" id="subdate"         name="subdate" value='<?=date("F d,Y")?>'></input>
         <input type="submit" name="go" value="Save">
         <input type="test" id="clar" value="0">
         <input type="submit" name="go" value="Submit">
         </div>
         </form>

---

And here is the js, i have linked jquery in the head of the page

JS

---

<script type="text/javascript">

    function validateplan(){
        var title = $("#title").val();
        var month = $("#week").val();
        var subdate = $("#subdate").val();
        var week = $("#week").val();

        $.ajax({
            url: 'ajax/plan_validate.php',
            data: {title: title,month: month,subdate: subdate,week: week},
            success: function(data){
                if (data == 'OK'){
                    alert("We are OK so far");
                    return true;
                }
                else
                {
                    alert(data);
                }

            },
            error: function(){
               alert("There is something wrong");
            }
        });

        return false;
    }
 </script>

Answer 1

Here is what your code looks to be doing:

_{please clarify if any of these assumptions are incorrect.}

1. User fills out the form, clicks submit.
2. Javascript validateplan() function is called.
3. validateplan() sends an AJAX request with the form data to ajax/plan_validate.php
4. plan_validate.php processes the input and checks for errors. Response is returned.
5. Your success function is checking that the data equals the bare string 'OK'.
6. Nothing else is done with your data.

What is plan_validate.php supposed to be doing? Just error checking the form? Or actually doing something with the data? You say:

The result is definatly "OK" but it is not submiting the form.

Are you seeing your alert("We are OK so far");? If yes, then you are submitting the form, but only to plan_validate.php, not to your form action newplan.php. If you are expecting the form to be submitted to newplan.php, then you need program it to do that.

Your code in the form tag that says onsubmit="return validateplan();" is telling the browser to use the return value of validateplan() to decide whether or not to submit to the action attribute.

The last line of your validateplan() function is return false;, thus validateplan always returns false and the form is never submitted. When you return true; from inside your success function, you are only returning from that anonymous function, not the validateplan function.

If you want to submit the form to newplan.php after getting an OK response from plan_validate.php, you need to add that in your success: function after your OK alert.

This question is a reasonable starting point for figuring out how to do the rest of what you need. Since you're already referencing jQuery (at least, that's what I assume your $ calls are for), you can look at the [.on()][2] and [.submit()`]3 helpers for some shortcuts you can use with jQuery.

Note: You probably do not want to change your validateplan() to return true;, as this would always submit your form to newplan.php regardless of the response from plan_validate.php. This is because your AJAX is asynchronous and it executes outside of the rest of the flow through validateplan().

Note 2: If you were to change your form to have onsubmit=validateplan() without the return in there, some browsers would ignore the return value of validateplan and always submit the form. Just something to be aware of.

Answer 2

Ajax is asynchronous, so before it is validating at server side, it is returning false. Thats why your form is not submitting.

instead of <form action="newplan.php" onsubmit="return validateplan();" method="post">

You can submit the form in ajax success function and else show the alert; try this : change your form tag like this and

<form action="newplan.php" method="post" id="myform">

call the submit in ajax success function

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