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

Result of jQuery Ajax responseText: "An issue occurred while processing your request."

ajax-triggered forms

When a cookie is set in NextJS with a static export, it reverts back to its original

How can I combine an ordinary image and a CSS2D image in THREE.js CSS2DRenderer and save them together as a single .jpg file?

Analyzing length of strings by dividing content within div tags using their unique ids

The dot notation in JSON syntax allows for easy access

What is the best way to gradually transform a continuously shifting text color into a single, consistent hue?

Rearrange element's placement using Jquery Drag & Drop

Is there a way to verify the selection of all mandatory fields prior to concealing a div?

Display data fetched from concurrent Ajax calls in a React Component

Button with a Jquery icon design

Choosing various files from separate directories within an HTML input type="file" element

A method for calculating the product of two selected numbers and then adding them together

TimePicker Component for ASP.Net MVC with Razor Syntax

Keeping state between navigations in Ionic and AngularJS: A guide

Browser Fails to Recognize AJAX Links as Visited

Spider login page

The AnchorEL component becomes unusable once a function has been executed for the first time

What is the best way to have a button activate a file input when onChange in a React application?

Is there a way for me to utilize a single set of checkboxes for submitting multiple times in order to generate multiple selections simultaneously?