jQuery Change Input text upon selection of radio button
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" 开发者_Python百科value="First Name" />First Name
<input type="radio" name="option1" value="Last Name" />Last Name
<input type="radio" name="option1" value="Department" />Department
<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>
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.
<script type="text/javascript">
$(document).ready(function(){
$('#searchSelect input[type=radio]').change(function(){
$('input.box').val('Enter ' + $(this).val());
});
});
</script>
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);
});
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.
$(document).ready(function() {
$("input[name=option1]:radio").click(function(eventObj) {
$("input[name=searchQuery]").val("Enter a " + $(eventObj.target).val());
});
});
加载中,请稍侯......
精彩评论