将javascript填充的表单发布到另一个php页面

时间:2015-06-08 22:32:45

标签: javascript php forms

我正在尝试从其他Web应用程序中提取数据并通过单击“填充联系人信息”填充表单,然后单击“提交”按钮将字段推送到新的PHP然后处理它们。那么基本上我如何将填充的表单字段传递到我可以提交的同一页面上的第二个表单?或者有更好的方法吗?

<form action="#" name="data" id="data">
<input type='button' value='Populate Contact Info' onclick='popAllContactFields()' />
Contact Info: 
First Name: <input type='text' readonly="readonly" id='cfname' name='cfname' />
Last Name:<input type='text' readonly="readonly" id='clname' name='clname' />
Email: <input type='text' readonly="readonly" id='cemail' name='cemail' />
</form>
<script type="text/javascript">
/* popAllContactFields()
Populates all the contact fields from the current contact.
*/
function popAllContactFields()
{
    var c = window.external.Contact;
    {
        // populate the contact info fields
        popContact();
    }
}

/* popContact()
Populates the contact info fields from the current contact.
*/
function popContact()
{
    var c = window.external.Contact;
    // set the contact fields
    data.cfname.value = c.FirstName;
    data.clname.value = c.LastName;
    data.cemail.value = c.EmailAddr;
}
</script>

<form action="ordertest.php" method="post">
<input name="cfname" id="cfname" type="hidden" >
<input name="clname" id="clname" type="hidden" >
<input name="cemail" id="cemail" type="hidden" >
<input type="submit" value="Submit">
</form>

1 个答案:

答案 0 :(得分:0)

如果您可以设法通过AJAX调用作为JSON接收数据,那么它就变得容易了。使用jQuery($)和Lodash_但您也可以尝试Underscore):

$.get('an-url-that-returns-the-json', function(parsedData) {
    _.forEach(_.keys(parsedData), function(key) {
        console.log('key:', key);
        $('#'+key).val(parsedData[key]); 
    });
});

如果乍一看很难看到一些关于jQuery选择器,AJAX($.get())和$(...).val()

您还可以列出要复制的密钥,例如: var keysToCopy = ['cfname', 'clname', 'cemail']然后_.forEach(keysToCopy, function(key) {...}),这可以让您更好地控制复制的数据。

如果您不能使用AJAX但可以控制源PHP的输出,那么我宁愿将数据创建为原始JS对象。如果你无法控制生成的东西那么你必须使用你写的东西,这也可以通过一些基于jQuery的魔法来帮助,例如:

_.forEach(keysToCopy, function(key) { 
    var prop = $('#source-form #'+key).val();
    $('#target-form #'+key).val(prop)
});

基于这些,您可以考虑如果源ID和目标ID不同,您可以如何解决。