Form "action" using javascript

Question

html code :

<section class="main">
<form class="form-4" name="form4" id="form4" method="POST">
    <p class="submit">
        <button type="submit" name="submit" onclick="show()"><i class="icon-thumbs-up icon-large"></i></button>                     
    </p>
</form>
</section>

js code :

function show(){

      $.ajax({        
      type: "POST",
      url: "check_login_points.php",
      data: {test : JSON.stringify(arr)},
      success: function(data) {

                if(data == 0)
                {

                  alert("       SORRY :( \n misplaced cue points.");
                }
                else if(data == 1)
                {
                  document.getElementById("form4").action = "http://localhost/profile_book/login_key.php";
                  //alert("WELCOME !!!");
                  //$("#form4").attr('action', 'http://localhost/profile_book/login_key.php');
                }
                else if(data == 2)
                {

                  alert("enter cue-points");
                } 
            }
        }); 
}

Am trying to put form action in javascript when an ajax function succeeds. But the form action doesn't seem to work. Suggestions are highly appreciated. Thanks in advance !

are you trying to submit the form on a successful ajax request? you might just update the HTML to leave the action in the form tag (assuming it is a static url) and submit the form with `document.getElementById("form4").submit()` — pherris, Feb 27 '15 at 18:25
Here's another question with code showing how to set the action from javascript. https://stackoverflow.com/questions/2701041/how-to-set-form-action-through-javascript — Nicholas Hirras, Feb 27 '15 at 18:27
You can not do what you want to do because the Ajax is asynchronous. By the time the form submits, the Ajax call has not come back yet. You need to break up the submission. — epascarello, Feb 27 '15 at 18:28

score 3 · Answer 1 · answered Feb 27 '15 at 18:32

You can not do what you want to do because Asynchronous nature. It will need to be broken up into multiple parts.

First thing, rename the button to something else. You are going to run into issues.

<button type="submit" name="btnSubmit" />

second bind the form submission with jQuery, not inline events.

$("#form4").on("submit", function(event) {
    //cancel the submission
    event.preventDefault();
    //call your logic
    show();
});

Now last thing is to manually trigger the submit after setting the action.

function show (){
      $.ajax({        
      type: "POST",
      url: "check_login_points.php",
      data: {test : JSON.stringify(arr)},
      success: function(data) {

                if(data == 0) {
                  alert("SORRY :( \n misplaced cue points.");
                } else if(data == 1) {
                  $("#form4").attr("action", "http://localhost/profile_book/login_key.php")[0].submit();
                } else if(data == 2) {    
                  alert("enter cue-points");
                } 
            }
        }); 
}

score 0 · Accepted Answer · answered Feb 27 '15 at 18:28

0

Going out on a limb here. Going to assume you're really just asking why the form isn't submitting, in which case it's because you're missing the form-submit:

var form = document.getElementById("form4");
form.action = "http://localhost/profile_book/login_key.php";
form.submit()

answered Feb 27 '15 at 18:28

bvaughn

13,300
45
46

Um, that is really not the case. The form IS submitting since the button is a submit button. – epascarello Feb 27 '15 at 18:41
Oh, sorry. I assumed you were blocking the form-submit by returning false and/or calling preventDefault. I see someone else already pointed that out though, so good. :) – bvaughn Feb 27 '15 at 18:45

Form "action" using javascript

2 Answers2