I want to test a my fields in a table over night. I have a table that takes input with a button, and I want to pass all the variables using JSON. Here is the sample of what I have. I Googled but wasn't getting what I was looking for.

<table style="border-style:solid;display: inline-block; " >
    <tr>
        <td>Person First Name</td><td><input type="text" id="searchPersonFName"/></td>
    </tr>
    <tr>
        <td>Person Last Name</td><td><input type="text" id="searchPersonLName"/></td>
    </tr>
    <tr>
        <td>Person Telephone Number</td><td><input type="text" id="searchPersonNumber"/></td>
    </tr>
    <tr>
        <td>Person Company Name</td><td><input type="text" id="searchPersonCompName"/></td>
    </tr>
    <tr>
        <td>Person Fax</td><td><input type="text" id="searchPersonFax"/></td>
    </tr>
    <tr>
        <td>Email Address</td><td><input type="text" id="searchPersonEmail"/></td>
    </tr>
    <tr>
        <td>Prov/State</td><td><input type="text" id="searchPersonProvState"/></td>
    </tr>
    <tr>
        <td>Postal Code</td><td><input type="text" id="searchPersonPostalCode"/></td>
    </tr>
    <tr>
        <td>City</td><td><input type="text" id="searchPersonCity"/></td>
    </tr>
    <tr>
        <td>Country</td><td><input type="text" id="searchPersonCountry"/></td>
    </tr>
</table>
<input type="button" id="btnSearchPerson" onclick="searchPerson();" value="Search Person" />

I basically want this button to be pushed the for a long time, and fill up all those filled using this:

var filterList = new Array();

        var pany1Filter = {
            PersonFName :  ''
            PersonLName : '',
            etc..
        }
        filterList.push(pany1Filter);

I'm pretty new to this, if I am missing any information, please let me know as I can explain further.

I want to test a my fields in a table over night. I have a table that takes input with a button, and I want to pass all the variables using JSON. Here is the sample of what I have. I Googled but wasn't getting what I was looking for.

<table style="border-style:solid;display: inline-block; " >
    <tr>
        <td>Person First Name</td><td><input type="text" id="searchPersonFName"/></td>
    </tr>
    <tr>
        <td>Person Last Name</td><td><input type="text" id="searchPersonLName"/></td>
    </tr>
    <tr>
        <td>Person Telephone Number</td><td><input type="text" id="searchPersonNumber"/></td>
    </tr>
    <tr>
        <td>Person Company Name</td><td><input type="text" id="searchPersonCompName"/></td>
    </tr>
    <tr>
        <td>Person Fax</td><td><input type="text" id="searchPersonFax"/></td>
    </tr>
    <tr>
        <td>Email Address</td><td><input type="text" id="searchPersonEmail"/></td>
    </tr>
    <tr>
        <td>Prov/State</td><td><input type="text" id="searchPersonProvState"/></td>
    </tr>
    <tr>
        <td>Postal Code</td><td><input type="text" id="searchPersonPostalCode"/></td>
    </tr>
    <tr>
        <td>City</td><td><input type="text" id="searchPersonCity"/></td>
    </tr>
    <tr>
        <td>Country</td><td><input type="text" id="searchPersonCountry"/></td>
    </tr>
</table>
<input type="button" id="btnSearchPerson" onclick="searchPerson();" value="Search Person" />

I basically want this button to be pushed the for a long time, and fill up all those filled using this:

var filterList = new Array();

        var pany1Filter = {
            PersonFName :  ''
            PersonLName : '',
            etc..
        }
        filterList.push(pany1Filter);

I'm pretty new to this, if I am missing any information, please let me know as I can explain further.

• javascript
• html
• json

• Where is the JSON ing from? Are you loading it via AJAX or hard coding it into the page? – James Duffy Commented May 2, 2014 at 15:23
• I might have understood. Do you want the user to fill in the forms and then send that information somewhere as JSON? Or do you want to load in JSON data and use it to populate a table? – James Duffy Commented May 2, 2014 at 15:26
• @JamesDuffy I want to fill all those inputs, automatically over night, NO user sitting there, I just want to pass them some random variables using Json. is that more clear? and then javascript push that button automatically to submit the fake data that I am providing using Json – benji_r Commented May 2, 2014 at 15:31
• You're trying to automate a repetitive form submission? Are you submitting the data to the same domain where your script is hosted or another server? – James Duffy Commented May 2, 2014 at 15:49
• @JamesDuffy yes repetitive submission on same server, using my random inputs that I have in json – benji_r Commented May 2, 2014 at 15:52

3 Answers 3

I think this is what you're looking for:

Working Fiddle: http://jsfiddle/HRyYs/

var INTERVAL = 3000; // submission will fire every xxxx milliseconds

function searchPerson() {
    // not sure what you want to happen here, or if this is already defined in your code or what... 
}

// fill this JSON object with all your data
var filterList = [{
    PersonFName: 'Steve',
    PersonLName: 'Stevenson',
    PersonNumber: '123',
    PersonCompName: 'a',
    PersonFax: '456',
    PersonEmail: '[email protected]',
    PersonProvState: 'NY',
    PersonPostalCode: '123',
    PersonCity: 'NYC',
    PersonCountry: 'USA'
}, {
    PersonFName: "Greg",
    PersonLName: "Gregory"
    // etc...
}];

// fills the form inputs with the values from the JSON
var fillForm = function (obj) {
    $.each(obj, function (key, val) {
        $("#search" + key).val(val);
    });
};

var i = 0;
setInterval(function () {
    if (i === filterList.length) {
        console.log("Done.");
        return;
    }
    $("input").val(""); // clear previous input
    fillForm(filterList[i]);
    searchPerson(); // or $("#btnSearchPerson").click();
    console.log("Submitted. Count: " + i);
    i++;
}, INTERVAL);

Change the INTERVAL to however often you want the submission to fire, in milliseconds. (I set it to 3 seconds).

Via ajax call:

Javascript

 function makeTable(data) {
                var wrapColumn = function(value) {
                    return "<td>" + value + "</td>";
                };

                $("#table tbody").append("<tr><th>header1</th><th>header2</th><th>header3</th></tr>");

                for ( var i = 0; i < data.length; i += 1) {
                    $("#table tbody").append("<tr>" + wrapColumn(data[i].prop1)+ wrapColumn(data[i].prop2)+ wrapColumn(data[i].prop3)+ "</tr>")
                }
}

HTML

     <button type="button" class="btn btn-default" id="button"></button>
                    <div class="table-responsive">

                    <table id="table" class="table table-striped table-hover">

                        <tbody>

                        </tbody>

                    </table>

                </div>

On button click:

        $("#button").click(function() {
                   var json = {};
        makeTable(json);
    })

The javascript function will take your JSON object and put each property into a table, row by row (first fill out headers). The on button click will catch when the user clicks the button and execute the makeTable function. the html is needed to actually have a table and button on your page. Somewhere in there you will need a JSON object

I assume you want to populate this table with values from valid JSON, the problem is that you provided us with an empty JSON object so I had to guess and improvise in order show how this works.

You haven't defined the searchPerson function at all in the code you provided, allow me to do the work for you :P

function searchPerson() {
    jQuery('#searchPersonFName'   ).val(pany1Filter.FName   );
    jQuery('#searchPersonLName'   ).val(pany1Filter.LName   );
    jQuery('#searchPersonNumber'  ).val(pany1Filter.Number  );
    jQuery('#searchPersonCompName').val(pany1Filter.CompName);
    jQuery('#searchPersonFax'     ).val(pany1Filter.Fax     );
    //ETC...
}

http://jsfiddle/2SMHz/5/ should provide some insight into how you would do this.