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
– pherris, Commented Feb 27, 2015 at 18:25
Here's another question with code showing how to set the action from javascript. stackoverflow.com/questions/2701041/… — Nicholas Hirras
– Nicholas Hirras, Commented Feb 27, 2015 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
– epascarello, Commented Feb 27, 2015 at 18:28

epascarello · Accepted Answer · 2015-02-27 18:32:08Z

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

bvaughn · Accepted Answer · 2015-02-27 18:28:11Z

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, 2015 at 18:28

bvaughn

13.5k49 silver badges46 bronze badges

2 Comments

epascarello Over a year ago

Um, that is really not the case. The form IS submitting since the button is a submit button.

bvaughn Over a year ago

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. :)

Collectives™ on Stack Overflow

Form "action" using javascript

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related