Send array data to another page using javascript?

Question

I want to send the data to another page using javascript. I will using a "next" button with Onclick function. I want that when I click that button all data in textboxes on this page is send to be displayed on another page using 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>

and javascript i m curently using:-

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

Is the "next page" on a different url, or is it generated using JavaScript? — BillyNate
– BillyNate, Commented Jun 13, 2015 at 7:26
I'd go with Alex's answer. If you are fine with the get parameters in the url of your next page. — BillyNate
– BillyNate, Commented Jun 13, 2015 at 9:55

user786 · Accepted Answer · 2015-06-13 07:30:01Z

3

You can use Jquery serialize function and redirect to next page, like this

 $("form").serialize()

For example your form contains this

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

So after serialization you will get

 FirstName=Mickey&LastName=Mouse

And then use window.location like this

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

answered Jun 13, 2015 at 7:30

user786

4,4406 gold badges53 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eric Random · Accepted Answer · 2015-06-13 07:23:07Z

0

Just use a form and revieve the data through php on the next page.

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

on the next page

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

answered Jun 13, 2015 at 7:23

Eric Random

1389 bronze badges

1 Comment

CodingIntrigue Over a year ago

Right idea, but the OP isn't using PHP. Change the form action to a GET and they can read the querystring using javascript

Dickens A S · Accepted Answer · 2015-06-13 07:40:14Z

Don't use submit button for this logic, which will make your browser load a fresh page

I would recomend using single paged architecture (SPA) and client side template engine, my favourite is EJS http://www.embeddedjs.com/

Similar to php and jsp you can use <% %> and <%= %> and pass values to the tamplete.

Assume 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>

Use EJS as

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

You need to use some temporary server in your localhost for testing, like apache or xmpp or wamp or any other available

sjas · Accepted Answer · 2015-06-13 10:39:34Z

0

Try using localStorage.setItem() and .getItem(), as it is simpler.

edited Jun 13, 2015 at 10:39

sjas

20k14 gold badges96 silver badges96 bronze badges

answered Jun 13, 2015 at 7:42

Runny

93 bronze badges

Collectives™ on Stack Overflow

Send array data to another page using javascript?

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related