Create a form action dynamically with JavaScript

Question

Create a form action dynamically with JavaScript

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

I am attempting to set the form action in JavaScript after a successful ajax call, but unfortunately, it doesn't seem to be working as expected. Any suggestions or solutions would be greatly appreciated. Thank you in advance!

javascript ajax forms

Answer 1

Answer №1

In order to achieve your desired outcome, you may encounter some challenges due to the asynchronous nature of the process. It will be necessary to divide the task into multiple parts for successful execution.

To begin with, consider renaming the button to avoid potential conflicts:

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

Next, establish a form submission binding using jQuery instead of inline events:

$("#form4").on("submit", function(event) {
    // Prevent default submission behavior
    event.preventDefault();
    // Call the required functions
    show();
});

Finally, ensure that the submit action is manually triggered after setting the appropriate 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");
                } 
            }
        }); 
}

Answer 2

In order to achieve your desired outcome, you may encounter some challenges due to the asynchronous nature of the process. It will be necessary to divide the task into multiple parts for successful execution.

To begin with, consider renaming the button to avoid potential conflicts:

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

Next, establish a form submission binding using jQuery instead of inline events:

$("#form4").on("submit", function(event) {
    // Prevent default submission behavior
    event.preventDefault();
    // Call the required functions
    show();
});

Finally, ensure that the submit action is manually triggered after setting the appropriate 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");
                } 
            }
        }); 
}

Answer 3

Answer №2

Allow me to take a guess. It seems like you are inquiring about why the form is not submitting. If that's the case, it could be due to the absence of the form-submit function:

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

Answer 4

Allow me to take a guess. It seems like you are inquiring about why the form is not submitting. If that's the case, it could be due to the absence of the form-submit function:

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

Create a form action dynamically with JavaScript

Answer №1

Answer №2

Similar questions

Ensuring model accuracy in Asp.Net Core prior to initiating an Ajax request via JavaScript

Controlling Material-UI using a custom .css stylesheet

Ways to conceal and reveal image and text elements based on array loop output

Using jQuery, identify when any of the elements within every function are missing

Retrieve information about the clicked item using the Backbone framework

Hiding content in HTML with the Display:none property

Is it possible for nextAll() to exclude a specific parent element and search only for children inside that parent?

A guide on crafting a test scenario for an AngularJS controller using the Jasmine framework

Exploring the process of traversing a function for each ng-repeat element

Ajax request fetching distinct data from database

Looking for assistance with navigating through this URL using Python (requests, beautifulsoup, or selenium) or Javascript (node js, puppeteer)?

A numeric input area that only accepts decimal numbers, with the ability to delete and use the back

Depending on external software packages

Variations in jQuery's append method when dealing with a string, a reference to a jQuery object

Starting your React application with the `npm start` command

Encounter issue when attempting to insert multiple items into MongoDB

The functionality of the AJAX Script is failing to load properly on mobile devices

Can a library be developed that works with both Java and JavaScript/TypeScript?

"Encountering an issue with ASP.NET MVC and Angular when making an AJAX call with multiple parameters, the HttpPostedFileBase

What is the best way to automatically log out a user once their session cookie has expired during an online exam?