Edit value of a html input form by javascript

3
votes

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

2
javascripthtml
What exactly does not work? Value assignment? Form submit? Cooking coffee? – Felix Kling
:), The Generator.klx can't receive the value of the hiddenField – Xitrum
@user552279: Mmmh... have you tried field.setAttribute('value', "new Value"); instead of field.value ? (just guessing here ;)) – Felix Kling
thank Felix Kling, this works perfectly :) – Xitrum
@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

2 Answers

3
votes

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.

-1
votes

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();
}