I have this code:
<div class="divpere" >
<div class="divfille1" ><label>CIVILITE:</label></div>
<div class="divfille2" >
<input type="radio" ID="mademoiselle" runat="server" >Mademoiselle</input>
<input type="radio" ID="madame" runat="server">Madame</input>
<input type="radio" ID="monsieur" runat="server">Monsieur</input>
</div>
</div>
It's a labale and a list of radio buttons, when i try to check one of this radio button, it still not checked!!
What is the reason of this?
How can i fix my snippet?
Demo Fiddle
<div class="divpere" >
<div class="divfille1" ><label>CIVILITE:</label></div>
<div class="divfille2" >
<input name="samename" type="radio" id="mademoiselle" runat="server" /><label for="mademoiselle"> Mademoiselle</label>
<input name="samename" type="radio" id="madame" runat="server"/><label for="madame">Madame</label>
<input name="samename" type="radio" id="monsieur" runat="server"/><label for="monsieur">Monsieur</label>
</div>
</div>
You should mention the name attribute for your radio buttons and Don't forget to mention the same name values for all three radio buttons...
Related
I'm trying to figure out how to only allow one of two radio buttons to be checked in a form where the two radio buttons don't share the same name. I've been experimenting for hours now, but can't figure it out. Here is what I have currently:
$("#theForm").click(function(){
//alert('You clicked radio!');
if($('input:radio:checked')){
$('input:radio:checked').prop("checked", false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="theForm">
<form class="type">
<input type="radio" id="topic" name="topic" value="on" checked>
<input type="radio" id="all" name="all" value="on">
</form>
</div>
Here's a Fiddle: https://jsfiddle.net/Codewalker/reh0mzs3/1/
the click function will give you an event. you can target the event.target.name to see which radio button was clicked on and then do a simple if statement to uncheck the other radio button
$("#theForm").click(function(){
if(event.target.name == 'topic'){
$('#all').prop("checked", false);
}else{
$('#topic').prop("checked", false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="theForm">
<form class="type">
<input type="radio" id="topic" name="topic" value="on" checked>
<input type="radio" id="all" name="all" value="on">
</form>
</div>
This should work:
<div> <input type="radio" id="contactChoice1" name="contact" value="email">
<label for="contactChoice1">Email</label>
<input type="radio" id="contactChoice2" name="contact" value="phone">
<label for="contactChoice2">Phone</label>
<input type="radio" id="contactChoice3" name="contact" value="message">
<label for="contactChoice3">Message</label> </div>
I'm having some trouble with the <input> HTML tag. I try to make one box checked but it isn't working. The HTML file is running with PHP. As you can see I used the default checked in the input. But it isn't working. How can I fix this without jQuery?
<fieldset id="imageselector">
<label id="labelog" class="container imageinput" style="display:none;">
<input id="Radioog" name="radio" class="radio" type="radio" value="img" checked/>
<img id="selector_image" class="selector_image" src="//youtube.com/yts/img/yt_1200-vflhSIVnY.png">
<span class="imagecheckmark"></span>
</label>
<label id="labelimg" class="container imageinput" style="display:none;">
<input id="Radioimg" name="radio" class="radio" type="radio" value="og"/>
<img id="selector_og" class="selector_image" src="//youtube.com/yts/img/yt_1200-vflhSIVnY.png">
<span class="imagecheckmark"></span>
</label>
</fieldset>
You have display: none on your label, this element is wrapping your radio inputs so none of that will show up. If you remove that, checked is working fine.
I would like to use these funky radio buttons though the radio buttons have an id=radio1, id=radio2, id=radio3 etc
I would like all of them to have id-radio1 so it writes the result to radio1 in the database:
Here is how I have normal radio buttons working in the past using the same id and they toggle between one another:
<div class="form-group col-md-12">
<label class="control-label form-check-inline">Gender</label>*
<div class="form-group">
<input type="radio" id="Gender" name="Gender" value="M" required="required" /><label class="control-label">Male</label>
<input type="radio" id="Gender" name="Gender" value="F" required="required" /><label class="control-label">Female</label>
</div>
</div>
$Gender=$_POST["Gender"];
INSERT INTO [dbo].[SubmissionsTBL]
[Gender]
VALUES
(,'".trimText($Gender)."')
Though, with the funky radio buttons chaning from this:
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio1" />
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio2"/>
<label for="radio2">Female</label>
</div>
</div>
to this doesn't work - it doesn't allow me to toggle radio buttons:
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio1" />
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio1"/>
<label for="radio2">Female</label>
</div>
</div>
What is stopping the toggle?
Thank you!
TL;DR: Due to the id and name attribute having the same value in your first example, I believe you may be confusing the two. With the database communication code you put up, it's grabbing the name="Gender" and not the id="Gender".
Additional information about id and class though you might find useful as an internet programmer:
The id attribute can only apply to one element per HTML document. I would suggest using the class attribute instead. The main difference between and id and a class is that a class can be applied to multiple elements.
Here is a working solution to the code you provided:
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio1" class="radio_grp1"/>
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio2" class="radio_grp1"/>
<label for="radio2">Female</label>
</div>
</div>
I used the class .radio_grp1 as the name so that you know that you're referring to a group of radio buttons rather than just one.
Moreover, if you're using a library like bootstrap, it's very common that an element will already have an assigned class. To solve this issue, you can assign a single element multiple classes by adding a space in the string following the class attribute like so:
<input type="radio" name="radio" id="radio2" class="radio radio_grp1"/>
Hope this was useful!
Your code should be changed to something like this. the radio button's name is what is submitted to the back end, and the id is used for front-end things like label association.
id's should always be unique.
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio1" />
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio2"/>
<label for="radio2">Female</label>
</div>
</div>
If by toggling, you mean the normal behavior of radio buttons, then that happens whenever all the radio buttons in the group have the same name.
I am programming a webpage that uses a series of radio buttons and drop down menus to change the data that is displayed on the screen. Each radio corresponds to one of the drop down menus and I want to line them up but I can't figure out how to get the third one to appear to the right of the other two instead of below them. Can anyone help?
Here's my code:
<form action="" style="float: left">
<input type="radio" name="yearLessGreaterOption" value="<" onchange="setYearLessGreaterFilter(this.value)"><
<input type="radio" name="yearLessGreaterOption" value="=" onchange="setYearLessGreaterFilter(this.value)" checked>=
<input type="radio" name="yearLessGreaterOption" value=">" onchange="setYearLessGreaterFilter(this.value)">>
</form>
<form action="">
<input type="radio" name="roundLessGreaterOption" value="<" onchange="setRoundLessGreaterFilter(this.value)"><
<input type="radio" name="roundLessGreaterOption" value="=" onchange="setRoundLessGreaterFilter(this.value)" checked>=
<input type="radio" name="roundLessGreaterOption" value=">" onchange="setRoundLessGreaterFilter(this.value)">>
</form>
<form action="">
<input type="radio" name="goalsH1LessGreaterOption" value="<" onchange="setGoalsH1LessGreaterFilter(this.value)"><
<input type="radio" name="goalsH1LessGreaterOption" value="=" onchange="setGoalsH1LessGreaterFilter(this.value)" checked>=
<input type="radio" name="goalsH1LessGreaterOption" value=">" onchange="setGoalsH1LessGreaterFilter(this.value)">>
</form>
Here's a picture of the page in question:
Is there a reason you want them in form tags? If you remove the tags, they will appear aligned. Otherwise, adding style="float:left;" to the other form tags will do the trick.
In your case, adding the style="float: left" on the other forms should do what you want.
I have two radio buttons, No and Yes. By default no is checked. I have css that styles the checked elements. But by default the styles only work if you physically check it. I want to style it right of page load without have to select it. Currently I am stumped. Thanks for your help
HTML
<div class="split">
<input id="contact-no" type="radio" name="contact" value="No" checked="checked">
<label for="contact-no">No</label>
</div>
<div class="split">
<input id="contact-yes" type="radio" name="contact" value="Yes">
<label for="contact-yes">Yes</label>
</div>
CSS
.am-form input[type="radio"] + label:hover, .am-form input[type="radio"]:checked + label{background: rgb(239,58,65);}
What it looks like on page load:
What It should Look like on page load and after you select it:
I had multiple hidden section with the same name/id, so I juts had to customize each one.
<div class="split">
<input id="ns-contact-no" type="radio" name="ns_contact" value="No" checked="checked">
<label for="ns-contact-no">No</label>
</div>
<div class="split">
<input id="fs-contact-yes" type="radio" name="ns_contact" value="Yes">
<label for="fs-contact-yes">Yes</label>
</div>
further down and hidden:
<div class="split">
<input id="bs-contact-no" type="radio" name="bs_contact" value="No" checked="checked">
<label for="bs-contact-no">No</label>
</div>
<div class="split">
<input id="bs-contact-yes" type="radio" name="bs_contact" value="Yes">
<label for="bs-contact-yes">Yes</label>
</div>