单击按钮时更新文本框值

Question

Here is my problem, when i click the submit button, the textbox doesn't show any value Is there any mistakes, i am just a newbie Thank you very much

    <form id="form1" name="form1" method="post" >

      <p>
        <input type="submit" name="setValue" id="setValue" value="submit" onclick="setValue()"/>
      </p>
      <p>
        <label>
          <input type="text" name="bbb" id="bbb" />
        </label>
       </p>
    </form>

    <script type="text/javascript">
    function setValue()
    {
        document.getElementById('bbb').value="new value here";
    }
      </script>

Answer 1

The first issue is that you're using the same name for the element as the function , so window.setValue is not the function, but the submit button, and that's an error.

The second issue is that when you hit the submit button, the form is submitted and the page reloads, that's why you wont see a value, you have to prevent the form from submitting.

You could do it with javascript, but the easiest would be to just use a regular button instead of the submit button.

<form id="form1" name="form1" method="post">
    <p>
        <input type="button" name="set_Value" id="set_Value" value="submit" onclick="setValue()" />
    </p>
    <p>
        <label>
            <input type="text" name="bbb" id="bbb" />
        </label>
    </p>
</form>
<script type="text/javascript">
    function setValue() {
        document.getElementById('bbb').value = "new value here";
    }
</script>

FIDDLE

Answer 2

I was typing the same answer what Adeneo just given, thank you Adeneo. And user3635102, your <form> was good, you can keep it as it was. Only you need to change <input type="submit"> to <input type="button"> . if you need to submit the form in future you can update your Javascript as follows which will submit form1:

<script>
    function setValue() {
        document.getElementById('bbb').value = "new value here";
        document.getElementById("form1").submit();
    }
</script>