发布表单数据以及动态计算而不刷新

时间:2014-05-20 20:02:33

标签: javascript ajax forms

这种情况的出现是因为我的客户决定在完成后更改要求。目前,我有一个执行计算的表单,并使用onsubmit =" return false;"动态显示结果。现在,客户想要将电子邮件地址发布到Pardot以及当前功能保持不变。我被告知ajax可能就是答案,但我发现每个解决方案都发布到了php页面。代码如下:

<form id="greenQuote" action="http://go.pardot.com/3945/2014-05-19/hh2w" method="post" onsubmit="return false;">
    <table>
        <tr><td>CONTENT</td></tr>
        <tr>
            <td><input onclick="premium();" type="submit" value="Submit" /></td>
        </tr>
    </table>
</form>

以下是js函数,它总共调用三个函数。一个用于计算,一个用于突出显示具有最佳值的列,另一个用于滚动到结果。

function premium()
{
    var theForm = document.forms["greenQuote"];
    var email = theForm.elements["userEmail"];
    var x = document.forms["greenQuote"]["userEmail"].value;
    var atpos = x.indexOf("@");
    var dotpos = x.lastIndexOf(".");
    if(email.value!="")
    {
        if(atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
        {
            alert("Not a valid e-mail address.");
            //return false;
        }
        else
        {
            getTotal();
            highlight();
            scrollTo();
        }
    }
    else
    {
        alert("Email Address is a required field.");
    }
}

我想在操作中添加一个Pardot表单处理程序URL,但我目前正在返回false,因此不会采取任何操作。有没有办法解决?我之前没有使用过ajax,并希望通过编码来获得帮助。

3 个答案:

答案 0 :(得分:0)

尝试包含jQuery,易于使用。使用您在前端开发中使用的选择器。您可以通过包含以下内容来使用它:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

从谷歌加载它可能会增加你的库已经在缓存中的机会。在那里你可以轻松地将表格附加到ajax调用,这在jQuery Ajax API详细解释。祝你好运。

答案 1 :(得分:0)

我同意没有推荐使用jquery的名字。然后做这样的事情:

$('#greenQuote').submit(function(e){
    e.preventDefault();
    // you can do your calculation logic here

    // save your form data to variable
    var theData = $(this).serialize();

    // now for the ajax
    $.post('http://pardot-url', theData).success(function(data){
        console.log('Success!');
        //the response can be seen by this:
        console.log(data);
    });
});

答案 2 :(得分:0)

使用jQuery库,您可以执行以下操作。您需要一个POST到的URL。我不知道Pardot是如何工作的,当你想做这样的事情时,它必须有某种Web API来调用。以下是Pardot API页面的链接:

http://www.pardot.com/faqs/best-practices/using-the-pardot-api/

我没有在API文档中看到如何将记录插入Pardot,您可能需要做一些研究才能找到答案。

var params = {
    //assumes your email address variable is called email
    email: email
    };

$.ajax({
    url: 'someurl',
    data: params,
    type: 'POST'
})
 .done(function(data)){
    // do something when the call is complete
});