0

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>
Community
  • 1
  • 1
Saahir Foux
  • 654
  • 4
  • 12
  • 27
  • I believe it would be best if I used onSubmit for the
    rather than onClick for the . Still debugging.
    – Saahir Foux Nov 15 '11 at 16:32
  • It looks like what you really want is AJAX. You can use jQuery for that http://api.jquery.com/jQuery.ajax/ (there's a shothand for this called post http://api.jquery.com/jQuery.post/) – Vala Nov 15 '11 at 16:36
  • 1
    Can you not use xmlhttprequest (see [this example](http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first)) – puk Nov 15 '11 at 16:38
  • If you only want to remain on the same page because you don't want to redirect the user to htpp://subDomain.myDomain.com/, it might be a better idea to make the POST request from the server, in stead of from the client. I think it is important to realize that when you do that, the security of your site depends on the security of subDomain.myDomain.com. – RC-1290 Nov 16 '11 at 10:24

2 Answers2

1

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

Jwalin Shah
  • 2,451
  • 1
  • 17
  • 22
1

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.

RC-1290
  • 595
  • 6
  • 10
  • Thanks RC. I'm actually trying out the Ajax approach you mentioned now, using prototype. So far it doesn't look like it will function as desired since my request will be cross-domain. I'm still trying to work around it. – Saahir Foux Nov 15 '11 at 21:06
  • 1
    Cross domain shouldn't matter. As long as you format your request so that the server can handle it you shouldn't have a problem sendning an AJAX request. – Matthew Nov 15 '11 at 22:57
  • If the data you need to access, you will indeed need to find a way to get around the same origin policy. I only tried to answer the question "How can a form be submitted without loading a new page?". There are some methods for circumventing the same origin policy, although you should keep in mind that the policy is there to defend against cross site scripting attacks. – RC-1290 Nov 15 '11 at 23:24
  • RC, Matt, you are right. I found and fixed a coding issue in my Ajax request and the data is being received by the server now. The behavior of the page is also working as I need. Thanks! – Saahir Foux Nov 16 '11 at 14:13