CODEWITHSUNDEEP
javascripthtmlformshttp-redirectform-submit
Saahir Foux
Saahir Foux

Reputation: 674

How to submit form and remain on the same page

There is a similar question which demonstrates how to do it in jQuery. Unfortunately, I'm using prototype and translating the code isn't very straight forward.

Submit form and stay on same page?

What needs to happen is the value (email) is posted to the page on the subDomain and the user does not get redirected. I do not have any control to edit the page on the subDomain.

Any assistance would be appreciated. 

function submitEmailForm(){
        var userEmail = $('Text').value;
        $('EmailForm').action = 'http://subDomain.myDomain.com/?email_address='+userEmail;
        $('EmailForm').request({ onComplete: function(){ return false;} });
    }

<form method="post" id="EmailForm" onsubmit="submitMobileEmailForm(); return false;">
          <input type="text" id="Text"/>
          <input type="submit" id="Submit" value=""/>
</form>

Upvotes: 0

Views: 3612

Answers (2)

RC-1290
RC-1290

Reputation: 595

You can simulate form submissions with AJAX.

(Note: I used an old project I worked on as a template, so some techniques I used might be a little old. For example, event handling might work differently.)

function ajaxFormSubmission(form)
{
    xhrThingy = yourFunctionForObtainingXMLHttpRequestInstance();// XHR support is different for various browsers, so you might need to have browser specific code.
    xhrThingy.onreadystatechange = eventHandlerHere;
    xhrThingy.open('POST', 'theFileThatWillHandleYourRequest.php', true);// The used arguments are: HTTP request Method, request url, asynchronous flag
    xhrThingy.setRequestHeader("Content-type", "application/x-www-form-urlencoded");// Simulating Form Submission


    var emailData = form.elements['Text'].value;// Extracting needed data from form
    var postData = "emailAddress=" + emailData;
    xhrThingy.send(postData);
}

The eventHandlerHere function can then check for a response. Something like this:

function eventHandlerHere()
{
    if (xhrThingy.readyState==4 && xhrThingy.status==200)
    {
        var response = xhrThingy.responseText
        // Do whatever you need to do with the email adress
    }
}

In the project I worked on, I used a nested method for quick prototyping, so your exact implementation will look different. For example, I reference the xhrThingy, which is only in scope because the function was nested inside the ajaxFormSubmission function.

Upvotes: 1

Jwalin Shah
Jwalin Shah

Reputation: 2521

You need to redirect it on the same page on click of button by JQuery.

http://www.webdeveloper.com/forum/archive/index.php/t-105181.html

Upvotes: 1

Related Questions