CODEWITHSUNDEEP
javascriptjqueryhtmlforms
user2691544
user2691544

Reputation: 359

Replace Javascript variables using a web form

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", },
    ];

Upvotes: 2

Views: 391

Answers (3)

Jaykumar Patel
Jaykumar Patel

Reputation: 27614

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:

  1. Include the blank HTML form in the body of the page
  2. Get the relevant form data, e.g. user information, into JSON format
  3. 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!

Upvotes: 2

Mark
Mark

Reputation: 2221

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

Upvotes: 1

nicael
nicael

Reputation: 19005

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

Upvotes: 2

Related Questions