How to modify the value of text input with js/jquery?

Question

I would like to dynamically modify the values of certain form elements, more specifically certain input text fields. So far, whenever I load my html page, I am just getting the blank input field, but I am expecting it to contain the value of 1. Here is an example of how I am trying to do this.

<!DOCTYPE HTML>
<HTML>
   <HEAD>
      <script type="text/javascript" src="javascript/jquery-1.6.1.min.js"></script>
      <script type="text/javascript">
         $(document).ready(function(){
            var myForm = $(this).getElementById('form1');
            myForm.elements['Q01'].value = '1';
         });
      </script>
   </HEAD>
   <BODY>
      <form id="form1">
         <input type="text" name="Q01" maxlength="1" />
      </form>
   </BODY>
</HTML>

The reason this needs to be done dynamically is because the value of form could be different every time. Am I even approaching this correctly? Suggestions on how I can achieve my intended functionality?

-- EDIT --

None of the solutions seem to be doing the trick. Here is an update of my code:

<!DOCTYPE HTML>
<HTML>
   <HEAD>
      <script type="text/javascript" src="javascript/jquery-1.6.1.min.js"></script>
      <script type="text/javascript">
         $(document).ready(function(){
                //$("#Q01").val("1");
                $("#form1 input[name='Q01']").val("1");
                //$("input[name='Q01']").val('1');
         });
      </script>
   </HEAD>
   <BODY>
      <form id="form1">
         <input type="text" id="Q01" name="Q01" maxlength="1" />
      </form>
   </BODY>
</HTML>

I am expecting when I load the page, that the input text will have 1 in it. But the input text keeps showing up empty. Any ideas?

-- EDIT --

Here is a solution derived from the answers from below that I like:

<!DOCTYPE HTML>
    <HTML>
       <HEAD>
          <script type="text/javascript" src="javascript/jquery-1.6.1.min.js"></script>
          <script type="text/javascript">
             $(document).ready(function(){
                    $("#Q01").val("1");
             });
          </script>
       </HEAD>
       <BODY>
          <form id="form1">
             <input type="text" id="Q01" name="Q01" maxlength="1" />
          </form>
       </BODY>
    </HTML>

You have a syntax error which is why they aren't working in the ready handler. Your ) should come after your }. — Chris
– Chris, Commented May 20, 2011 at 20:24

kstev · Accepted Answer · 2011-05-20 16:55:53Z

5

If you are using jQuery you could just change the id attribute to name in the input elements and then do something like this:

$('#Q01').val('1')

The val method sets the value sou can find more here: http://api.jquery.com/val/

answered May 20, 2011 at 16:55

kstev

7401 gold badge5 silver badges17 bronze badges

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

3 Comments

Robert Beuligmann Over a year ago

Or $('input[name=q01]').val('1')

kstev Over a year ago

@Robert That would actually work better. I am a bit rusty on my jQuery

Adrian J. Moreno Over a year ago

It's better to directly reference the ID instead of searching through all of the inputs for one with the name of "q01".

Chris · Accepted Answer · 2011-05-20 16:58:15Z

3

You've got your ready handler correct. One of the great things about jQuery is its selector engine. I recommend taking a look at the documentation to help familiarize yourself with it.

To do what you want, I'd recommend something like this:

$(document).ready(function() {
    $("#form1 input[name='Q01']").val("1");
});

The #form1 is the same as document.getElementById("form1"). The input[name='Q01'] grabs all input elements that have a name attribute equal to Q01. The .val method sets the selected elements value to the string 1.

answered May 20, 2011 at 16:58

Chris

4,4711 gold badge30 silver badges35 bronze badges

Comments

ShaneBlake · Accepted Answer · 2011-05-20 16:57:26Z

0

$(document).ready(function(){
   $("form input[name='Q01']).val('1');         
)};

answered May 20, 2011 at 16:57

ShaneBlake

11.1k2 gold badges28 silver badges43 bronze badges

Comments

Cheluis · Accepted Answer · 2011-05-20 16:57:59Z

0

This should work:

 $("input[name='Q01']").val('1');

But why not to set id's to your inputs?

Hope it works

answered May 20, 2011 at 16:57

Cheluis

1,4123 gold badges22 silver badges51 bronze badges

4 Comments

jbranchaud Over a year ago

good point, I should probably use ids. I can probably just get rid of name and just have id. Would there ever be any reason for the input to have a name if you can just reference it with id instead?

Cheluis Over a year ago

Well, yo shouldn't get rid of the name, if the value of the input will go to the server side.

jbranchaud Over a year ago

are you saying that if I am going to do some php database interaction, then I should keep the name?

Cheluis Over a year ago

If you are going to catch up the input's value in the server side, the input must have a name (if I am wrong, please fix my edit). The inputs name is what is going on the request to the server side

Collectives™ on Stack Overflow

How to modify the value of text input with js/jquery?

4 Answers 4

3 Comments

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related