Looking for help with jquery and form elements
TheGorf - June 11, 2008 - 05:25
I am really new to jquery and I am trying to read up on what to do here. Let me give a basic example of what I am doing. Say I have this code:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(input).click(function()
{
$("#r2").is(':checked') ? $("#txtfld").show() : $("#txtfld").hide();
});
});
</script>
</head>
<body>
<form name="myform" action="#">
<input type="radio" value="1st value" name="myradiobutton" id="r1" />1st<br />
<input type="radio" value="2nd value" name="myradiobutton" id="r2" />2nd<br />
<input type="textfield" id="txtfld"><br />
<input type="radio" value="3rd value" name="myradiobutton" id="r3" />3rd<br />
</form>
</body>
</html>Whenever radio button r1 or r3 is selected, the textfield txtfld is hidden. However when the user selects r2 then txtfld appears. I'm stumped on making the jquery work for this. Likewise I would like the textfield to appear in it's correct state depending on the state of the radio buttons on page load.
So far all my other basic jquery has been great! But this stumps me...
Any help would be greatly appreciated.
I don't know if this is a
I don't know if this is a typing error here, but you need quotes on input I believe:
$('input')Ah thank you, that indeed
Ah thank you, that indeed was it. However I am still a bit stumped about how to make the textfield come up either hidden or shown at page load depending on the state of the radio buttons.
Do you mean something like
Do you mean something like this:
$(document).ready(function(){
$("#r2").is(':checked') ? $("#txtfld").show() : $("#txtfld").hide();
$('input').click(function()
{
$("#r2").is(':checked') ? $("#txtfld").show() : $("#txtfld").hide();
});
});
It might be better to make it hidden on the server side (in your PHP code), but the above should work as well.
Goodness, it didn't even
Goodness, it didn't even dawn on me to do something that simple.
I agree that my module should render the textfiedld as invisible from a code stand point. But this will get my module launched for now and I will integrate that into v2.0.
Thanks for your help!
Ok actually I needed to
Ok actually I needed to revise this a little bit. It dawns on me that by default Drupal doesn't assign an "id" to each radio button so I need to grab the value of the radio button by it's name. So I did some reading and I think this is in the right direction, but I'm back to only a partially working piece of code again:
$(document).ready(function()
{
var checkedValue = $("input[@name='myradiobutton']").val("r2");
$(checkedValue).is(':checked') ? $("#txtfld").hide() : $("#txtfld").show();
$('input').click(function()
{
$("input[@name='myradiobutton']").val("r2").is(':checked') ? $("#txtfld").show() : $("#txtfld").hide();
});
});
This doesn't seem to correctly set the value of the textfield based on what radio button is checked by default. It also doesn't respond to click events correctly. Any click on any of the radio buttons makes the textfield reappear and stay visible. So the hide() event is never getting triggered. Any advice?
For this your radio would be
For this your radio would be
<input name="myradiobutton" value="r1" /><input name="myradiobutton" value="r2" />
<input name="myradiobutton" value="r3" />
Try
$('input').click(function() {($(this).val() == 'r2') ? $('#txtfld').show() : $('#txtfld').hide();
});
This will check if the radio with value r2 was clicked and if so it will show the text field