Edit value of a html input form by javascript

Question

my HTML code:

<form action="Generator.klx" method="post" onsubmit="genarate('hiddenField')">
   <input type="hidden" id="hiddenField" name="hidden" value=""/>
   <input type="submit" name="submit"/>
</form>

my JavaScript:

function genarate(hiddenField){
  var field = document.getElementById(hiddenField);
  field.value = "new Value";
 }

But it just didnot work :(. Can anybody tell me where I was wrong?
Thank you

What exactly does not work? Value assignment? Form submit? Cooking coffee? — Felix Kling, Apr 23 '11 at 08:05
:), The Generator.klx can't receive the value of the hiddenField — Xitrum, Apr 23 '11 at 08:06
@user552279: Mmmh... have you tried `field.setAttribute('value', "new Value");` instead of `field.value` ? (just guessing here ;)) — Felix Kling, Apr 23 '11 at 08:08
@user: Are you saying that changing `field.value = "new Value";` to `field.setAttribute('value', "new Value");` and **changing nothing else** solved the problem? I find that *very* hard to believe, setting field values via the `value` property is bog standard and has been since 1995 or so. I've tried your code with IE6, IE9, Firefox 3.6, Chrome 10, Opera 11, and Safari 5. It works with `field.value = "new Value";`, full stop. You must have changed something else at the same time. — T.J. Crowder, Apr 23 '11 at 08:20
yes, i just change form .value to .setAttribute and it works fine :| — Xitrum, Apr 23 '11 at 08:41
@user: Well, I'm glad you got it working, but with respect, I believe you must have changed something else at the same time or there's something else involved that isn't mentioned in the question. — T.J. Crowder, Apr 23 '11 at 12:27

T.J. Crowder · Accepted Answer · 2015-04-14T09:07:12.580

Your code as quoted should be working, and does in my tests with a variety of browsers. (I've tried it locally, with a POSTed form, but you can also try it here: http://jsbin.com/ehoro4/1 I've changed the method to GET so you can see the result in the URL.)

My guess is that you have something else on the page with the name or id "hiddenField", other than just the hidden field you've quoted. If you change the name of the field to "fluglehorn" or something else that's (um) unlikely to be elsewhere on your page, it may well work. That's because the namespace used by getElementById is (sadly) quite crowded.

Alternately, are you sure that genarate is appearing at global scope? (E.g., it's outside of all other functions.) Because your onsubmit attribute requires that genarate be global. So this works:

<form action="#" method="get" onsubmit="genarate('hiddenField')">
   <input type="hidden" id="hiddenField" name="hidden" value=""/>
   <input type="submit" name="submit"/>
</form>
<script>
function genarate(hiddenField){
  var field = document.getElementById(hiddenField);
  field.value = "new Value";
}
</script>

but for example this would not:

<form action="#" method="get" onsubmit="genarate('hiddenField')">
   <input type="hidden" id="hiddenField" name="hidden" value=""/>
   <input type="submit" name="submit"/>
</form>
<script>
(function() { // Begin scoping function to avoid global symbols (not uncommon)
    function genarate(hiddenField){
      var field = document.getElementById(hiddenField);
      field.value = "new Value";
    }
})();
</script>

Also recommend using a debugger (there's no excuse for not using client-side debuggers here in 2011) to set a breakpoint on the genarate function and walk through, to see what's going wrong.

possible common pitfall: order of declaration and initialization. — Caspar Kleijne, Apr 23 '11 at 08:13
@Caspar: Agreed, although in his case, since he's using an `onsubmit` attribute, it won't get evaluated until the form is submitted, so as long as `genarate` is in the global scope, it'll get picked up even if defined after the form. — T.J. Crowder, Apr 23 '11 at 08:16
@Michael K: Thanks for the edit, but for future reference, when that happens it's usually because some jacka$$ has vandalized the most recent version of the JSBin. To fix it, one can point to a specific version (in this case, http://jsbin.com/ehoro4/1). — T.J. Crowder, Apr 14 '15 at 09:08
Ah, thanks. I'm new to the front-end side of stackoverflow and I was redirected to a vandalized page so I tried to clean it up. Thanks for clarifying. — Michael K, Apr 14 '15 at 14:03

supratim Neogi · Answer 2 · 2019-06-18T11:22:45.340

crud.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="JavaScript.js"></script>
</head>
<body>
<input type="text" name="name" id="name"  onfocus="opConfig.reloadPrice()">
<button type="button" onclick="myFun()">submit</button>
<button type="button" onclick="update()">update</button>
<br><br>
<p id="table"></p>
</body>
</html>

JavaScript.js

var arr = [];
var index;
function myFun()
{
var name = document.getElementById('name').value;
arr.push(name);
table();

}
function table(){
var text = "<table border=1><tr><th>username</th><th>action</th></tr>"
for (var i = 0; i < arr.length; i++) {
text+="<tr><td>"+arr[i]+"</td><td><button 
onclick=myDELE("+i+");>delete</button><button 
onclick=myEdit("+i+");>edit</button></td></tr>"
}
text+="</table>";
console.log(text);

document.getElementById('table').innerHTML = text;
tablehidden();
}

function myDELE(i)
{
var name = arr.splice(i,1);

// name.splice(i,1);
console.log(name);
table();
tablehidden();
}
function tablehidden(){
if (!arr.length) { document.getElementById('table').hidden=true; }
else{document.getElementById('table').hidden=false;}
}
function myEdit(i)
{
text = document.getElementById('name').value = arr[i];
         index = i;
}
function update(){
arr[index]=document.getElementById('name').value ;
table();
tablehidden();
}

Welcome to Stack Overflow! While this code snippet may be the solution, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-‌code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. — Johan, Jun 18 '19 at 10:52

Edit value of a html input form by javascript

2 Answers2

Linked