change the value of input text in a form inside of form using javascript

Question

When I click on Button, I want the input text value change to 'hello', but it doesn't seem to work, here is my code. Pros please help I'm really noob, thanks in advance!

<script type="text/javascript">
function selectfile(){
    document.uploadform.selectfile.value='hello';
}
</script>


<body>
<form name="uploadform" id="uploadform">
    <input type="text" name="selectfile" id="selectfile" value="Hi"/>
    <input name="upload_file" type="button" onClick="selectfile()" value="Button"/>
</form>
</body>

what error are you getting? do you know about the developer console (f12 in firefox or chrome)? — mindandmedia
– mindandmedia, Commented Jul 21, 2012 at 20:49

Wolfram · Accepted Answer · 2012-07-21 21:09:33Z

2

Please see this example I put up on jsfiddle:

function selectfile() {
    var form = document.forms['uploadform'];
    form.elements["selectfile"].value = 'Hello';
}

var uploadButton = document.getElementById("upload-button");
uploadButton.addEventListener("click",selectfile);

In the handler function I first get the form by its id and then set the value of the element with name selectfile (your input element). The event listener to the button is added using addEventListener.

The problem in your code is, that you called both the function and the element selectfile. So you are getting the "selectfile is not a function" error. Rename one of them and it works.

edited Jul 21, 2012 at 21:09

answered Jul 21, 2012 at 20:55

Wolfram

8,0973 gold badges49 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Wolfram Over a year ago

For me the example works. You click the button and the input element's value changes to "Hello". Are you getting any errors in the console (Firebug/Developer Tools)? Which browser do you use?

Wolfram Over a year ago

Please see my edit describing what is wrong in your code. You can see it working here. I still think however, that it's better (i.e. cleaner) to add the handler in you JavaScript code and not in your HTML.

nondefault · Accepted Answer · 2012-07-21 20:55:13Z

1

That should be working. Is that the full HTML you're using? If so, you need to close your tags. It should look something like this:

<html>
<head>
    <script type="text/javascript">
    function selectfile(){
    document.uploadform.selectfile.value='hello';
    }
    </script>
</head>


<body>
    <form name="uploadform" id="uploadform">
        <input type="text" name="selectfile" id="selectfile" value="Hi"/>
        <input name="upload_file" type="button" onClick="selectfile()" value="Button"/>
    </form>
</body>
</html>

answered Jul 21, 2012 at 20:55

nondefault

3773 silver badges14 bronze badges

Collectives™ on Stack Overflow

change the value of input text in a form inside of form using javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related