1

我有这个 HTML 表单，我需要在提交之前进行一些处理：

<form action="http://appid.appspot.com/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>

基本上，我需要做的是：

  • 单击提交按钮时，将出现一个弹出窗口，指示消息已提交（通过检查服务器响应）无论如何，

  • 我需要复制特定表单输入的值，比如输入元素的值。然后将例如电子邮件添加到实际消息中，例如“消息”表单将是例如"Email: x@dot.com Message: Hello world"<- 这将是在将表单字段发送到api

更新：

我在我的问题中的意思是，如果这样会更好，我想将这个基于基本 HTML 表单的 POST 迁移到 Ajax 调用中，这样我就可以轻松实现上面概述的目标。

4

1 回答 1

1

您想使用表单的onsubmit.

我稍微更改了您的 html（尤其是内联 javascript）（为了清楚起见）：

<form action="http://appid.appspot.com/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>

如您所见，输入元素上的自动填充/自动清除现在有点重复，因此您可以将其分解为单独的通用函数。

这是在表单实际提交之前运行的 javascript 函数： 

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

在这里工作 JSFiddle

如果另一个域使用会话 cookie 和/或检查文档引用者，则执行此跨域可能会变得棘手。

更新：我看到您更新了您的问题，现在想检查并在您的消息中显示服务器响应？

于 2013-04-22T17:40:58.917 回答