javascript - Send cross domain HTTP Post with HTML forms - Stack Overflow

admin管理员组

文章数量:1425006

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

<form action="" id="contact-form" method="post"
name="contact-form">
    <fieldset>
        <label><input name="email" onblur=
        "if(this.value=='') this.value='Email'" onfocus=
        "if(this.value =='Email' ) this.value=''" value="Email"></label>
        <label><input name="subject" onblur=
        "if(this.value=='') this.value='Subject'" onfocus=
        "if(this.value =='Subject' ) this.value=''" value="Subject"></label> 
        <textarea name="message" onblur=
        "if(this.value=='') this.value='Message'" onfocus=
        "if(this.value =='Message' ) this.value=''">
Message
</textarea>

        <div class="buttons">
            <a href="#" onclick=
            "document.getElementById('contact-form').reset()">Clear</a>
            <a href="#" onclick=
            "document.getElementById('contact-form').submit()">Send</a>
        </div>
    </fieldset>
</form>

Basically, what I need to do are:

• When the submit button is clicked, a popup window will appear to indicate that the message have been submitted (by checking the server response) anyway,

• I need to copy the value of a specific form input, say the value of the input element. And then prepend, say, the email to the actual message, such that the form "message" will be for example "Email: [email protected] Message: Hello world" <-- this will be the value of the input element with name="message" just before sending the form fields to the api

Update:

What I mean in my question is that I want to migrate this basic HTML form based POST into an Ajax call if that would be better, so I can easily achieve the goals I have outlined above.

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

<form action="http://appid.appspot./api/foo" id="contact-form" method="post"
name="contact-form">
    <fieldset>
        <label><input name="email" onblur=
        "if(this.value=='') this.value='Email'" onfocus=
        "if(this.value =='Email' ) this.value=''" value="Email"></label>
        <label><input name="subject" onblur=
        "if(this.value=='') this.value='Subject'" onfocus=
        "if(this.value =='Subject' ) this.value=''" value="Subject"></label> 
        <textarea name="message" onblur=
        "if(this.value=='') this.value='Message'" onfocus=
        "if(this.value =='Message' ) this.value=''">
Message
</textarea>

        <div class="buttons">
            <a href="#" onclick=
            "document.getElementById('contact-form').reset()">Clear</a>
            <a href="#" onclick=
            "document.getElementById('contact-form').submit()">Send</a>
        </div>
    </fieldset>
</form>

Basically, what I need to do are:

• When the submit button is clicked, a popup window will appear to indicate that the message have been submitted (by checking the server response) anyway,

• I need to copy the value of a specific form input, say the value of the input element. And then prepend, say, the email to the actual message, such that the form "message" will be for example "Email: [email protected] Message: Hello world" <-- this will be the value of the input element with name="message" just before sending the form fields to the api

Update:

What I mean in my question is that I want to migrate this basic HTML form based POST into an Ajax call if that would be better, so I can easily achieve the goals I have outlined above.

• javascript
• jquery
• ajax
• http
• cross-domain

Share Improve this question Follow edited Apr 22, 2013 at 17:44 quarks asked Apr 22, 2013 at 16:44 quarksquarks 35.4k8282 gold badges308308 silver badges547547 bronze badges 4

• and where exactly are you getting a cross domain error? – Akshay Commented Apr 22, 2013 at 16:49
• @AkshaySinghal actually there is no cross domain error, this form actually can send to a different domain. However not sure if this will work on all browsers. – quarks Commented Apr 22, 2013 at 17:09
• im sorry but i dont understand what your question is. – Akshay Commented Apr 22, 2013 at 17:17
• @AkshaySinghal I mean, I want to migrate this code into Ajax code – quarks Commented Apr 22, 2013 at 17:42

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

You want to use the form's onsubmit.

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

<form action="http://appid.appspot./api/foo" id="contact-form" method="post"
name="contact-form" onsubmit="return doStuff() ? true:false;">
    <fieldset>
        <input name="email" value="Email"
             onblur="if(this.value===''){this.value=this.defaultValue}" 
            onfocus="if(this.value===this.defaultValue){this.value=''}" > <br>
        <input name="subject" value="Subject"
             onblur="if(this.value===''){this.value=this.defaultValue}" 
            onfocus="if(this.value===this.defaultValue){this.value=''}" > <br>
        <textarea name="message" 
                onblur="if(this.value===''){this.value=this.defaultValue}" 
               onfocus="if(this.value===this.defaultValue){this.value=''}"
                      >Message</textarea>
        <div class="buttons">
            <a href="#" onclick=
            "document.getElementById('contact-form').reset()">Clear</a>
            <a href="#" 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:

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

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?

本文标签： javascriptSend cross domain HTTP Post with HTML formsStack Overflow