Jump to content
ravi_k

AJAX without redirection to other page

Recommended Posts

Hi guys

How to submit a form using ajax without redirection to other page and stays on same page.

Now redirection is not happening but i get the below message on client web page.

Value selected : -----------------------------117571124310148 Content-Disposition: form-data; value="zero" 0 -----------------------------117571124310148--

Thanks 

With Regards

Ravi

Share this post


Link to post
Share on other sites

1) When the form is submitted it should run a function attached to onsubmit attribute on form element.

2) In the function the first thing to do is disable the default action of submitting to another page using preventDefault()

https://www.w3schools.com/jsref/event_preventdefault.asp

3) Since you are prevent submission the data will not be sent the normal way, each of the values has to be retrieved from the form and sent through ajax request send() within this function.

https://www.w3schools.com/xml/ajax_xmlhttprequest_send.asp

Edited by dsonesuk

Share this post


Link to post
Share on other sites

As Dsonesuk says above, study the examples. Are you using GET or POST?

Share this post


Link to post
Share on other sites

Hi

Am using a post request.

As suggested above am already using preventDefault() in my code using form data .

<form  action="/val" method="post" id="val" name="val" >

                       Value:&emsp;<select name='val'  >
                          <option value="0">Zero</option>
                          <option value="1">One</option>
                        </select>
                    <input type="submit"  value="Submit" onclick="myFunction_value(event)">
                    </form>
                    <script>
                    function myFunction_value(event) {

    var myForm  = document.getElementById('val');
    event.preventDefault();
    formData = new FormData(myForm);
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("val").innerHTML = this.responseText;
        }
      };
      xhttp.open("POST", "val",true);

      xhttp.send(formData);
      return true;
    }
</script>

 

Thanks 

With Regards

Ravi

 

Share this post


Link to post
Share on other sites

This isn't another senergy board server or whatever problem again is it?

"val"

should point to a server language page "val.php" or "val.aspx", the server script will process to show html/text content, this content is return to show on the page which sent the ajax request, if it is senergy board it does not act the same, SO until you find a way that it will! From the boards forum, we will just be going round and round in circles trying to solve a problem that is not ajax related, as it WILL work if the board processed ajax  requested like php, aspx.

IF not! sorry!

Your form page should be similar to this

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0">
        <title>Document Title</title>
    </head>
    <body>
        <form  action="val.php" method="post" id="valform" name="valform" onsubmit="myFunction_value(event)">

            Value:&emsp;<select name='valselect'>
                <option value="0">Zero</option>
                <option value="1">One</option>
            </select>
            <input type="submit"  value="Submit" >
        </form>
        <div id="val">No Results To Show</div>
        <script>
            function myFunction_value(e) {

                var myForm = document.getElementById('valform');
                e.preventDefault();
                formData = new FormData(myForm);
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("val").innerHTML = this.responseText;
                    }
                };
                xhttp.open("POST", "val.php", true);

                xhttp.send(formData);
                return true;
            }
        </script>
    </body>
</html>

the server language page will be similar to this

val.php

<?php

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    var_dump($_POST);
    $backgnd = "";
    if ($_POST["valselect"] == 0) {
        $backgnd = "Red";
    } else {
        $backgnd = "lime";
    }
    echo '<div style="padding: 10px; background-color: ' . $backgnd . '; display: inline-block;">' . $_POST["valselect"] . '</div>';
}

 

Share this post


Link to post
Share on other sites

Hi

If i don't send anything form server for the post request( using the earlier method of onclick), then the form is submitted and no data is received on client side except that client request is received 3 to 6 times continuously for 1 post request send.(here if i can avoid multiple requests , issue is solved)

 

Above method suggested by Dsonesuk, i will try this once 

Thanks 

With Regards

Ravi

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×