AJAX without redirection to other page

ravi_k · November 17, 2018

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

dsonesuk · November 17, 2018

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 November 17, 2018 by dsonesuk

davej · November 17, 2018

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

ravi_k · November 18, 2018

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

dsonesuk · November 18, 2018

You place function call using form element using event attribute 'onsubmit'

https://www.w3schools.com/tags/ev_onsubmit.asp

dsonesuk · November 18, 2018

You are also using duplicate attribute 'name' values 'val'.

ravi_k · November 18, 2018

Hi

With onsubmit, no value is received on server .nothing is sent by client.

Thanks

With Regards

Ravi

dsonesuk · November 18, 2018

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>';
}

ravi_k · November 19, 2018

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

Sign In

AJAX without redirection to other page

Recommended Posts

ravi_k

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

davej

Link to comment

Share on other sites

ravi_k

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

ravi_k

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

ravi_k

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity