CODEWITHSUNDEEP
javascriptplayframework-2.0
user1197252
user1197252

Reputation:

Populate form field with javascript

I have a form with several fields populated by the user and before it is submitted some javascript gets called when a check button. It tries to set the value of the form fields to a variable that exists in the js function. 

document.getElementById('var1').innerHTML = test;
alert(test);

I know the javascript is working as expected because I see the alert but the form boxes are not getting populated:

@helper.input(testForm("var1")) { (id,name,value,args) => <input type="text" name="@name" id="@id" @toHtmlArgs(args)> }

Upvotes: 0

Views: 952

Answers (2)

MagJS
MagJS

Reputation: 422

If you want to programmatically set an html form field via JS there are many ways to do this and many libraries out there that make it really easy.

Such as various JS two-way component template binding libraries.

For instance, you can simply do the following:

HTML:

<div id="myapp">
 <input id="var1"/>
 <button>Submit</button>
</div>

JS:

mag.module('myapp',{
  view : function(state){
    var test= 'tester';
    state.button= {
      _onclick:function(){
        state.var1=test
      }
    }
 }
});

Here is working example of the above example: http://jsbin.com/ciregogaso/edit?html,js,output

Hope that helps!

Upvotes: 0

estmatic
estmatic

Reputation: 3449

innerHTML is used to get/set the body of an html tag, so you're probably ending up with this in the html:

<input ...>test</input>

I think this may work for a <textarea>, but for your <input type="text"> you want to set the value attribute.

document.getElementById('var1').value = test;

Upvotes: 1

Related Questions