Question

我想使用javascript将数据发送到另一个页面。我将使用带有Onclick功能的“下一步”按钮。我希望当我点击该按钮时，会发送此页面上文本框中的所有数据，以便使用javascript在另一个页面上显示。

<table border="1" id="bill_table" width="50%" align="center" style="border-collapse: collapse" cellspacing="3" cellpadding="5">
    <tr style="display:none;">
        <td class="style2">&nbsp;</td>
        <td class="style2">
            <div id="name_div">
                <input name="item[]" type="text" id="item" size="20" style="width:100px;"/>
            </div>
        </td>
        <td class="style2">
            <input name="job[]" type="text" id="job" size="20" style="width:100px;"/>
        </td>
        <td class="style2">
            <div id="relation_div">
                <input name="rate[]" type="text" id="rate" size="20" style="width:100px;"/>
            </div>
        </td>
        <td class="style2">&nbsp;</td>
    </tr>
    <tr>
        <td class="style2">SNo</td>
        <td class="style2">Item</td>
        <td class="style2">Job Charges</td>
        <td class="style2">Rate</td>
        <td class="style2">
            <input name="add_button" type="button" id="add_button" size="20" value="Add" style="width:50px" />
        </td>
    </tr>
</table>
<p align="center">
    <input name="Submit1" type="submit" value="submit" />
</p>

和javascript我正在使用： -

var itemCount = 0;
$(document).ready(function() {
  var objs = [];
  var temp_objs = [];
  $("#add_button").click(function() {
    var html = "";

    var obj = {
      "ROW_ID": itemCount,
      "Item": $("#item").val(),
      "JOB": $("#job").val(),
      "Rate": $("#rate").val(),
    }

    $("#item").val('');
    $("#job").val('');
    $("#rate").val('');

    // add object
    objs.push(obj);
    itemCount++;

    // dynamically create rows in the table
    html = "<tr id='tr" +
      itemCount + "'>" + "<td>" +
      itemCount + "</td>" +
      "<td><INPUT type='text' name='txt1[]' readonly  value='" +
      obj['Item'] + "'/></td>" +
      "<td><INPUT type='text' name='txt2[]' readonly  value='" +
      obj['JOB'] + "'/></td>" +
      "<td><INPUT type='text' readonly    name='txt3[]' value='" +
      obj['Rate'] + "'/></td>" +
      "<td><input type='button'  id='" +
      itemCount +
      "' value='remove'>" +
      "</td> </tr>";

    //add to the table
    $("#bill_table").append(
        html)

      // The remove button click
    $("#" + itemCount).click(
      function() {
        var buttonId = $(this)
          .attr("id");

        //write the logic for removing from the array
        $("#tr" + buttonId).remove();
      });
  });
});

Answer 1

您可以使用Jquery序列化功能并重定向到下一页，就像这样

 $("form").serialize()

例如，您的表单包含此

 <form action="">
   First name: <input type="text" name="FirstName" value="Mickey"><br>
   Last name: <input type="text" name="LastName" value="Mouse"><br>
</form>

所以在序列化后你会得到

 FirstName=Mickey&LastName=Mouse

然后像这样使用window.location

 window.location="youNextPage.html?"+YourSerializedData

Answer 2

不要对此逻辑使用提交按钮，这将使您的浏览器加载新页面

我建议使用单页面构架（SPA）和客户端模板引擎，我最喜欢的是EJS http://www.embeddedjs.com/

与php和jsp类似，您可以使用＆lt; %%＆gt;和＆lt;％=％＆gt;并将值传递给tamplete。

假设template.ejs

<tr id='tr<%=itemCount%>'>
 <td><%=itemCount%></td>
 <td><INPUT type='text' name='txt1[]' readonly  value='<%=obj['Item']%>'/></td>
 <td><INPUT type='text' name='txt2[]' readonly  value='<%=obj['JOB']%>'/></td>
 <td><INPUT type='text' readonly name='txt3[]' value='<%=obj['Rate']%>'/></td>
 <td><input type='button'  id='<%=itemCount%>' value='remove'></td>
</tr>

使用EJS作为

var html = new EJS({url: 'template.ejs'}).render({"itemCount":itemCount, "obj":obj});
$("#bill_table").append(html)

您需要在localhost中使用一些临时服务器进行测试，例如apache或xmpp或wamp或任何其他可用的

Answer 3

只需使用表格并在下一页通过php恢复数据。

<form action="your_file.php" method="post">

在下一页

var javaScriptVariable = "<?php echo $_POST['yourInputId'] ?>";

Answer 4

尝试使用localStorage.setItem()和.getItem()，因为它更简单。

使用javascript将数组数据发送到另一个页面？

4 个答案: