Skip to content Skip to sidebar Skip to footer

Send Cross Domain Http Post With Html Forms

I have this HTML form that I need to do some processing before submitting:

Solution 1:

You want to use the form's onsubmit.

I changed your html (and especially inline javascript) a bit (for clarity):

<formaction="http://appid.appspot.com/api/foo"id="contact-form"method="post"name="contact-form"onsubmit="return doStuff() ? true:false;"><fieldset><inputname="email"value="Email"onblur="if(this.value===''){this.value=this.defaultValue}"onfocus="if(this.value===this.defaultValue){this.value=''}" ><br><inputname="subject"value="Subject"onblur="if(this.value===''){this.value=this.defaultValue}"onfocus="if(this.value===this.defaultValue){this.value=''}" ><br><textareaname="message"onblur="if(this.value===''){this.value=this.defaultValue}"onfocus="if(this.value===this.defaultValue){this.value=''}"
                      >Message</textarea><divclass="buttons"><ahref="#"onclick=
            "document.getElementById('contact-form').reset()">Clear</a><ahref="#"onclick=
            "if(doStuff()){document.getElementById('contact-form').submit();}">Send</a></div></fieldset></form>

As you can see the autofill/autoclear on the input-elements now kind of repeats, so you could factor it out in a separate universal function.

Here is the javascript function that runs before the form actually submits:

functiondoStuff(){
    var eml=document.getElementsByName('email')[0].value;
        msg=document.getElementsByName('message')[0];
    msg.value = 'Email: ' + eml + ' Message: ' + msg.value;
    alert ('message has been submitted');
    returntrue;
}

Working JSFiddle here

Doing this cross-domain might get tricky if the other domain uses session-cookies and/or checks document referrer.

Update: I see you updated your question and now want to check and display the server-response in your message to?

Post a Comment for "Send Cross Domain Http Post With Html Forms"