Replace Javascript variables using a web form

Question

How do i replace variables in a javascript file by using a web form such as below.

The idea is that i can make changes to the javascript variables by submitting changes through a web form.

Thanks in advance

HTML FIle

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

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

Can you define what you mean by "replacing variables" as that is a vague statement. Do you mean replacing the value in the variables, or something else? — freefaller, Apr 08 '14 at 11:54
@freefaller . Sorry about that. Yes what i meant was to replace the existing variables. For this case if i were to fill up the form with name = Random, Price = $500, the variables in the javascript file is suppose to change to 'var data = [ {name: "Random", price:"$500", countdown: "April 2, 2014 15:41:00", location:"Brisbane", description:"awesome stuff", highestBidder: "Highest bidder 1", }, ];' — user2691544, Apr 08 '14 at 12:00

Jaykumar Patel · Accepted Answer · 2014-04-09T03:53:33.713

You should use jQuery Populate plugin to fill form data.

You need to do 3 things to have Populate automatically fill an HTML form with the correct values:

Include the blank HTML form in the body of the page
Get the relevant form data, e.g. user information, into JSON format
Output the JSON format as the first agument of the Populate call

The basic form for using Populate is:

Syntax

$(selector).populate(JSON, options)

to populate a very simple form, you might output the following code after the form body:

Example

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

Check this Demo

you put your JSON data to show you result. Hope this help you!

score 2 · Answer 2 · answered Apr 08 '14 at 12:05

To access variables from <input> (if you mean this)

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

To edit them:

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

score 1 · Answer 3 · edited May 23 '17 at 11:57

1

It's hard to understand exactly what you're trying to do, but I think if you're wanting to convert a form to a JavaScript object you could try using the serializeArray function with a small jQuery extention serializeObject.

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

This will return an object like:

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/

Inspired from this post: Convert form data to JavaScript object with jQuery

edited May 23 '17 at 11:57

Community

1
1

answered Apr 08 '14 at 11:57

Mark

2,184
1
16
28

That works really well. Do you know how do i export it into an external file instead of flashing it within the same page ? – user2691544 Apr 08 '14 at 23:25
You can put the `$.fn.serializeObject` function into a file, for example, in `assets/js/jquery_functions.js` and then load it in your document `head` by using a [script tag](http://www.w3schools.com/tags/att_script_src.asp). – Mark Apr 09 '14 at 08:45
I am sorry to have confused you. My current output according to your sample is as follow '{"firstname":"JEREMY","lastname":"","email":"","location":"","photo_url":"","comment":"Enter text here..."}' I am thinking of putting this into a file instead of just displaying it in a
on the webpage
– user2691544 Apr 09 '14 at 11:22
It does seem like this would be part of a new question, but if you would like to create a textfile on the client, then you should have a look at the [downloadify.js](http://pixelgraphics.us/downloadify/test.html) library. – Mark Apr 09 '14 at 12:13

Replace Javascript variables using a web form

3 Answers3

Syntax

Example