Develop Reference

Need help getting a text box to show based on Radio box selection

I am not a developer but I do like to delve and in this case I have been asked to help out making some small changed to an old site, I have completed most of it like adding ReCapchta but I am struggling with just one thing I would like to add to it.
All I am trying to do is get a Text Box to show if a Radio Box is selected to "Other" and in addition this field should be REQUIRED but only if Other is selected in the Radio box above obviously.
I have tried a number of things, mostly based on this article...
Hide/display of 3 textboxes on selection of radio button
But I cannot get it to work it just never shows, if I remove the Hidden and Display tags it shows correctly so I know the layout etc. is right, it's just getting this JavaScript to play ball.
===========================================================
JavaScript located in Header...
<script type="text/javascript">
$(function() {
$('input[name="BodyType"]').on('click', function() {
if ($(this).val() == 'Other') {
$('#textboxes').show();
}
else {
$('#textboxes').hide();
}
});
});
</script>
===========================================================
HTML Table Defining the Radio Boxes
<table width="900" border="0" cellspacing="0" cellpadding="0">
<td align="center"><span class="tablebodytxt2"><strong>VEHICLE BODY TYPE:</strong></span><br>
<table>
<td width="0" align="center" valign="top">
<span class="tablebodytxt">
<input type="radio" name="BodyType" required value="Convertible" id="BodyType">Convertible
<input type="radio" name="BodyType" required value="Coupe" id="BodyType">Coupe
<input type="radio" name="BodyType" required value="Crossover" id="BodyType">Crossover
<input type="radio" name="BodyType" required value="Hatchback" id="BodyType">Hatchback
<input type="radio" name="BodyType" required value="MPV" id="BodyType">Multi-Purpose (MPV)
<input type="radio" name="BodyType" required value="Pick-Up" id="BodyType">Pick-Up (UTE)
<input type="radio" name="BodyType" required value="Sedan" id="BodyType">Sedan
<input type="radio" name="BodyType" required value="Saloon" id="BodyType">Saloon
<input type="radio" name="BodyType" required value="SUV" id="BodyType">Sports Utility (SUV)
<br>
<input type="radio" name="BodyType" required value="Other" id="BodyType">Other: (Please specify below!)</span></label></td>
</table>
===========================================================
DIV Header, this is what should appear only when OTHER has been selected in the Radio Table above...
<div id="textboxes" class="tablebodytxt21" style="display: none">
Specify:<input type="text" required class="formtxt" hidden="true"/>
</div>
===========================================================
It just does not show unless I removed the Hidden and Display tags, I have tried playing with the ID and NAME tags but no luck. :(

Thanks to anyone who looked at this but I managed to resolve this myself using my old trusted suck it and see method as I got lost trying to use the Google Debugger on my own code, oh well.
Anyway as I didn't get an answer here I repharsed the question here: Code to display boxes based on Radio Checkboxes not working
This in the end got me the result I was looking for.
Essentially the reaosn it was not working was I tried the Script Code in the Header & the Body both above and below the code.
However I did not try it below the body which was where it needed to sit apparently for reasons I don't understand and need to look into, thanks anyway to anyone who looked.
Hopefully this thread will help someone else with a simliar problem in the future.

How to select only textboxes from a bunch of dynamically created elements in jQuery?

I'm creating a bunch of form elements like textbox,textarea,checkbox and dropdownlists dynamically and i want to select only textboxes whose id ends with some value. How can we accomplish this in jQuery.
P.S. I know how to select an element whose id ends with by using
$( "[attribute$='value']" ) selector. But here i have apply some kind of filter to select only text boxes.Below is the final html output rendered after the element creation. Now how can i select only textbox with id txtFirstnamefeedback1.
<input type="text" id="txtFirstnamefeedback1">
<input type="text" id="txtLastnamefeedback1">
<input type="text" id="txtSurnamefeedback1">
<p id="pfavblogliteraltextfeedback1">Select your interested blog </p>
<input type="checkbox" id="chk1favBlogfeedback1" value="Bike">ASP.NET Web Forms</ br>
<input type="checkbox" name="chk2favBlogfeedback1" value="Car">ASP.NET MVC

Add type in selector, :text will filter out only the textboxes i.e. all html elemnent where input type is text
$(":text[attribute$='value']")
Your selector would be like
$(":text[id$='feedback1']")

This will select textbox as well as textarea
$('input[type=text], textarea')

Copy input field's value to multiple hidden fields... but with same ID's?

1) I have 3 input radio buttons with unique values.
For e.g.
<input type="radio" id="id1" value="This is first value" />
<input type="radio" id="id2" value="This is second value" />
<input type="radio" id="id3" value="This is third value" />
2) Next, I have 2 hidden form like this:
<form action="//mysite.com/process1.php"><input type="hidden" id="uniqueid" value=""></form>
<form action="//mysite.php/process2.php"><input type="hidden" id="uniqueid" value=""></form>
3) Based upon whichever radio button the user clicks, I need to copy its value to the value of both the above forms hidden field.
For e.g. If user clicks on radio with id1, then it's value "This is first value" should be copied to both the forms hidden field.
CONSTRAINTS:
1) Have to use javascript or jquery, no server side processing available.
2) Note: both the final forms have one input field, but with same id. This is a constraint.
3) Why? Because based on some other actions on the page, the user gets to see one of the 2 forms. The only difference between them is their action is unique. All fields are same.
WHAT I HAVE SO FAR:
Using this, I am able to copy the value from the radio button to a hidden field's value, but it only copies to a field with a UNIQUE ID.
var $unique = $("#unique");
$("#radio1").keyup(function() {
$unique.val(this.value);
});
$("#email").blur(function() {
$unique.val(this.value);
});
Can someone guide as to how can the value be copied to multiple input fields, but with same id's?(Yes, the id's of the initial radio buttons can be unique.)

Having two HTML elements with same ID is an error.
You cannot treat this as a constraint, this is NOT a valid HTML code and it will cause inconsistent behavior in different browsers.
Use classes instead:
<form action="//mysite.com/process1.php"><input type="hidden" class="uniqueid" value=""></form>
<form action="//mysite.php/process2.php"><input type="hidden" class="uniqueid" value=""></form>
And javascript:
var $unique = $(".uniqueid");
However, I couldn't find any #radio1 or #email in your code, are you sure you have the right selectors?
My recommendation for the JS will be: (Working jsFiddle)
var $unique = $(".uniqueid");
$('input[type="radio"]').click(function(){
$unique.val(this.value);
});
Notes for jsFiddle:
I've used click event instead of keyup (don't really understand why you used keyup here..).
I've given all radio buttons the same name so they will cancel each other out when selected.
I've turned the hidden fields to text so you could see the result.

<form action="//mysite.com/process1.php"><input type="hidden" class="uniqueid" id="uniqueid" value=""></form>
<form action="//mysite.php/process2.php"><input type="hidden" class="uniqueid" id="uniqueid" value=""></form>
var $unique = $("input[type=hidden].uniqueid");
$("#radio1").keyup(function() {
$unique.val(this.value);
});
$("#email").blur(function() {
$unique.val(this.value);
});

As said by others, id must be unique. Try using a data-attribute:
<form action="//mysite.com/process1.php">
<input type="hidden" data-shouldupdate="true" value="">
</form>
<form action="//mysite.php/process2.php">
<input type="hidden" data-shouldupdate="true" value="">
</form>
Now you can use that attribute as selector to do something like:
$('[data-shouldupdate]').val(this.value);

I agree with all other who posted that id have to be unique to have correct HTML document. So if it's possible I strictly recommend you to fix the HTML document to remove all duplicates.
I write my answer only for the case that you can't remove id duplicates because of some reason and you still have the same requirements. In the case you should change the line
var $unique = $("#uniqueid");
to
var $unique = $("*[id=uniqueid]");
The selector *[id=uniqueid] (or just [id=uniqueid]) works slowly as #uniqueid, but it allows you to get all elements with the specified id attribute value. So it works even in case of id duplicates on the HTML page.

The most simple solution is to give a same name to both inputs. Check this link jsfiddle to see a working example. The code used is the one given is below:
HTML:
<input type="radio" name="copiedValue" id="id1" value="This is first value" />
<input type="radio" name="copiedValue" id="id2" value="This is second value" />
<input type="radio" name="copiedValue" id="id3" value="This is third value" />
<form action="//mysite.com/process1.php"><input name="uniqueid" id="uniqueid" value=""></form>
<form action="//mysite.php/process2.php"><input name="uniqueid" id="uniqueid" value=""></form>
jQuery/javascript:
$("input:radio[name=copiedValue]").click(function() {
$("input[name=uniqueid]").val($(this).val());
});
The radio-buttons should have the same name. I removed the type="hidden" so u can see it working correctly.
Hope it useful!

How to hide checkbox text

I have been playing around with html lately and ran into a slight issue.
Let us say that there is a form with multiple elements on it. Some of those elements are checkboxes, and you want to hide the checkboxs and their corresponding text. How do you do this without hiding the entire form? The following is what I have tried so far:
<input type="checkbox" id=check1 status="display:none">Option 1<br>
But this hides the box and leaves the text "Option 1" still visible. How do I hide the text as well?

I would suggest using the <label>-tag around the whole thing:
<label style="display:none"><input type="checkbox" id="check1">Option 1</label>
This way you can hide the whole line and the user has the advantage that the checkbox toggles, if he clicks the text. You also gain in semantics.
Also note that status is not a valid attribute. For styling use style.

Wrap the input in a div and apply the "style" tag to the div.
<div style="display: none;">
<input type="checkbox" id="check1">Option 1<br>
</div>

you need to wrap it in a span/label and then hide it
<input type="checkbox" id=check1 style="display:none"><label for="check1" style="display:none">Option 1</label><br>

Place checkbox inside div and apply style to div
<div style="display:none"><input type="checkbox" id=check1>Option 1<br></div>

<span style="display:none"><input ...>Option 1</span>
or better
<label for="check1" style="display:none"><input id="check1"...>Option 1</label><br/>

I'm sure you mean style="display:none and not status, but here goes:
Your option text isn't inside the input, nor can it be (for a checkbox), so you'll have to wrap them in a container, then hide the container. Something like:
<div id="checkboxcontainer" style="display: none">
<input type="checkbox" id="check1">
Option 1
<br>
</div>

<input type="checkbox" id="check1" style="display:none">
<label for="check1">Option 1</label><br>
JS:
$('label[for="check1"]').hide();

try something like this
<label style="display:none"><input type="checkbox" id=check1 >Option 1</label>

Use the below to get your desired need.
Wrap the entirety with a label which will then allow you to use style="display:none to hide the label.
<label style="display:none"><input type="checkbox" id="check1">Option 1</label>
You also used status instead of style but by using the code above you'll do fine.

Okay, since the other answers were not that describing i can go ahead and be a little more pedagogic.
First of all, the code you have written is perfectly fine, however you lose some control over your content if it's not wrapped inside a HTML tag.
As all the other answers here wrote, you obviously need a label with your input tag:
<input type="checkbox" id="check1"><label for="check1" >Option 1</label>
You have got some different ways of using labels (which is recommended since this gives you more control over your content). My example above uses the "for" attribute, which is a pointer to the input ID to tell the browser what input field the label is for (quite obvious, eh?). You can also wrap your input inside the label (like all the other answers to this thread), which is the way some people prefers (including me):
<label for="check1"><input type="checkbox" id="check1">Option 1</label>
I saw an answer where the person who wrote some (what he called) JS which is code that hides the label with a wrapped input (i.e. the label AND the input is hidden). However, this was JS that is also using jQuery, so you need to implement that framework before you can use that code snippet:
$('label[for="check1"]').hide(); //This hides the label and the input at the same time if you wrap your input!
I recommend you to use the wrapped version of the markup, and implementing jQuery on your page and thereafter apply the codesnippet that is provided in this answer. That can give you the power to show/hide the inputs + labels on, for example, a click on a button or so. Feel free to ask me anything if you want some guidance. :)
/J.

How to switch styles for labels using jQuery

I have checkbox. I want to switch the style of the div containing the checkbox, if the checkbox is checked.
<label for="ids">
<div>
<img src="img/87_1180.jpg">
<h4>Name</h4>
<input name="ids" id="ids" type="checkbox">
</div>
</label>
When user clicks on the label, the checkbox gets checked. I want to add class if the checkbox is checked.
I appreciate any help.

$("#ids").click(function() {
$(this).parent().toggleClass("yourClassName");
});

Josh,
Actually usually the correct way to use a label would be something like this:
<label for="ids">Name</label>
<input name="ids" id="ids" type="checkbox" />
I don't think it's common practice to put the input within the label according to W3C standards, see:
http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL
While it might validate the way you wrote the code, it's much harder to control style specifically.
Try this code to change the label:
$("#ids").click(function() {
$('label[for="' + $(this).attr('name') + '"]').toggleClass('myClass');
});