Question

如何使用下面的网页表单替换javascript文件中的变量。

我的想法是，我可以通过Web表单提交更改来更改javascript变量。

提前致谢

HTML文件

 <html> 
     <body>
     <FORM action="auction_time_var.js" method="post" id="adminForm">
        <P>
            <LABEL for="name">Name: </LABEL>
          <INPUT type="text" id="firstname"><BR>
<LABEL for="price">Price: </LABEL>
          <INPUT type="text" id="lastname"><BR>
<LABEL for="dueTime">Due Time: </LABEL>
          <INPUT type="text" id="email"><BR>
<LABEL for="location">Location: </LABEL>
          <INPUT type="text" id="location"><BR>
<LABEL for="urlPhoto">Photo url: </LABEL>
          <INPUT type="text" id="photo_url"><BR>    
<LABEL for="description">Description: </LABEL><br>
<textarea rows="4" cols="50" name="comment" form="adminForm">
Enter text here...</textarea>             

        <INPUT type="submit" value="Send"> 
        </P>
     </FORM>
     </body>
     </html>

Javascript文件

    var data = [
        {name: "Title 1", price:"$100", countdown: "April 2, 2014 15:41:00", location:"Brisbane", description:"awesome stuff", highestBidder: "Highest bidder 1", },
    ];

Answer 1

您应该使用 jQuery Populate plugin 填写表单数据。

你需要做3件事让Populate自动用正确的值填充HTML表单：

在页面正文中包含空白HTML表单
获取相关表单数据，例如用户信息，采用JSON格式
输出JSON格式作为Populate调用的第一个文章

使用Populate的基本形式是：

语法

$(selector).populate(JSON, options)

要填充一个非常简单的表单，您可以在表单正文后输出以下代码：

实施例

$('#form-simple').populate({
        'name':'Title 1',
        'price':'$100',
        ...
        ...
});

检查此 Demo

您将 JSON数据显示给您显示结果。希望这能帮到你！

Answer 2

从<input>访问变量（如果你的意思是这样）

    var data = [document.getElementById("firstname").value,
document.getElementById("lastname").value,
document.getElementById("email").value,
document.getElementById("location").value,
document.getElementById("photo_url").value];

要编辑它们：

data[0]="new_value"; //firstname
data[1]="new_value"; //lastname
data[2]="new_value"; //email
data[3]="new_value"; //location
data[4]="new_value"; //photo_url

Answer 3

很难准确理解您尝试做什么，但我认为如果您想要将表单转换为JavaScript对象，可以尝试使用serializeArray具有小jQuery扩展serializeObject的函数。

function getVariables() {
    var formObj = $('#adminForm').serializeObject();
    console.log(formObj);                 
}

这将返回如下对象：

formObj.comment = "A test entry"
formObj.email = "01/01/2014"
formObj.firstname = "Mark"
formObj.lastname = "10.00"
formObj.location = "Town"
formObj.photo_url = "http://www.example.com"

JSFiddle：http://jsfiddle.net/7FZCf/

受到这篇文章的启发： Convert form data to JavaScript object with jQuery

使用Web表单替换Javascript变量

3 个答案:

语法

实施例