jQuery Change Input text upon selection of radio button

Question

Trying to get the value="" of <input class="box" type="text" value="??" name="searchQuery" to change upon selection of a radio button. So if the user presses 'first name' radio button for example, it changes the value of .box input to a value such as "Enter a first name" and have it do it for the other radio buttons as well.

Can anyone help? jQuery novice here :)

<!DOCTYPE html>
<html>
<head>

    <link rel="stylesheet" href="global.css"  media="screen" />
    <link rel="stylesheet" href="design.css"  media="screen" />
    <style type="text/css">
    .hidden {
    display: none;
    }
    </style>
    <script type="text/javascript" src="inc/jquery.js"> </script>
    <script type="text/javascript">$(function() {$('input[type=text]').focus(function() {$(this).val('')});});</script>
    <!-- // -->
**<script>
    $("#searchSelect").change(function () {
          var str = "";
          $("radio option:option1").each(function () {
                str += $(this).text() + " ";
              });
          $("div").text(str);
        })
        .change();
</script>**
</head>

<body>
<div id="top_wrapper_bg">
    <div id="wrapper_top">
        <div id="header">
                <div id="logo">
                <a href="index.php"><img src="img/logo-02-01-11.png" alt="logo-02-01-11" width="300" height="100" border="0" /></a>
                </div><!-- /logo -->
                <div id="header_image">
                right
                </div><! -- /header_image -->
                <div id="clear"> </div><! -- /clear -->
                <div id="nav">
                nav
                </div><! -- /nav -->
        </div><!-- /header-->
    </div><!-- /wrapper_top -->
</div><!-- /top_wrapper_bg -->

<div id="header_search_break"> </div>

<div id="bot_wrapper_bg">       
    <div id="wrapper_bottom">
            <div id="search"> 
                    <span class="medfont">Search by:</span> 
                        <form id="searchSelect" action="#">
                            <input type="radio" name="option1" value="First Name" />First Name&nbsp;
                            <input type="radio" name="option1" value="Last Name" />Last Name&nbsp;
                            <input type="radio" name="option1" value="Department" />Department&nbsp;
                            <input type="radio" name="option1" value="Course" />Course
                        </form>
                        <br>            
                    <input class="box" type="text" name="searchQuery" value="Select an option..." class="textField clearMeFocus" />
            </div><!-- /search -->
            <div id="latest_stats">
            <p>Stats</p>
            </div><!-- /latest_stats -->
            <div id="clear"> </div>
        <div id="contain_stats">
                <div id="latest_prof">
                latest prof
                </div><!-- /latest_prof -->

                <div id="top_prof">
                top prof
                </div><!-- /top_prof -->
                <div id="clear"> </div><! -- /clear -->
        </div><!-- /contain_stats -->
        <br><br><br><br><br><br><br><br>

        <h6 style="margin:0; padding:0; font-size:0.3em;"><a href="prof.php">Prof Page</a></h6>

    </div><!-- /wrapper_bottom -->
</div><!-- /bot_wrapper_bg -->
</body>
</html>

JCOC611 · Accepted Answer · 2011-02-24 03:01:34Z

3

Really Simple fiddle.

Using code:

$(document).ready(function(){
  $("input[type=radio]").click(function(){
     $("#it").val(this.value);
  }); 
});

And HTML:

<input type="text" id="it" value="">
<input type="radio" name="hey" value="one">
<input type="radio" name="hey" value="two">
<input type="radio" name="hey" value="three">

This demonstrates the concept of how to do it.

answered Feb 24, 2011 at 3:01

JCOC611

19.8k15 gold badges71 silver badges90 bronze badges

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

Comments

AlfaTeK · Accepted Answer · 2011-02-24 03:03:56Z

2

<script type="text/javascript">
    $(document).ready(function(){
        $('#searchSelect input[type=radio]').change(function(){
            $('input.box').val('Enter ' + $(this).val());
        });

    });
</script>

answered Feb 24, 2011 at 3:03

AlfaTeK

7,87514 gold badges53 silver badges92 bronze badges

Comments

Jason · Accepted Answer · 2011-02-24 03:01:36Z

1

Give the radio input a class of "option" or call it what ever

<input type='radio' class='option' name='option' value='First Name'>

Then the jquery:

$('.option').click(function(){
   var thisRadio = $(this).val();
   $('.box').val(thisRadio);
});

answered Feb 24, 2011 at 3:01

Jason

2,7273 gold badges29 silver badges40 bronze badges

Comments

Kim Tranjan · Accepted Answer · 2011-02-24 03:11:49Z

1

it will bind an event handler change of all inputs inside the form searchSelect, with name option1 and of type radio.

$(function() {
    $('#searchSelect input[name="option1"]:radio').change(function() { 
        $('.box').val('Enter a ' + this.value); 
    });
});

to learn more about the change event check out the jQuery documentation.

answered Feb 24, 2011 at 3:11

Kim Tranjan

4,5613 gold badges42 silver badges39 bronze badges

Comments

Arun Y · Accepted Answer · 2011-02-24 03:56:32Z

0

$(document).ready(function() {
    $("input[name=option1]:radio").click(function(eventObj) {
        $("input[name=searchQuery]").val("Enter a " + $(eventObj.target).val());
    });
});

answered Feb 24, 2011 at 3:56

Arun Y

93910 silver badges12 bronze badges

Collectives™ on Stack Overflow

jQuery Change Input text upon selection of radio button

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related