I have a radio button group on my page which is within a form. When the form is submitted, I would like to retrieve the values of the form and save them to my database. It seems that the value for the radio button group is radiobtngrp: 'on' but I don't know which one of the radio buttons is on. How do radio buttons work on the submit of a form?
Here is my HTML code for the radio buttons:
<label for="q-<%= question.id %>">
<input id="q-<%= question.id %>-r-i" type="radio" class="form-control" name="radiobtn">
<img src="/images/a.png">
</label>
I have multiple radio buttons which are added through a loop in my ejs file.
My submit button looks like this:
<button class="btn btn-lg btn-signin btn-yellow" type="submit">Submit</button>
Now in my route, if I try something like this:
console.log(req.body.radiobtn);
I see this in the console:
radiobtn: 'on'
Why is this? And how can I get the actual radio button which was clicked?
Thanks in advance!
Give each radio button in a group both name and value attributes.
The name attribute value is used as the key when submitting a form, with the value of the key taken from the value attribute of the selected radio button.
All buttons in the same group share the same name attribute value.
Here a quick HTML demo: it's not supposed to do anything except show the query string in the location bar when you hit submit:
<form method="get">
<input type="radio" name="myRadio" value="1">( value 1)<br>
<input type="radio" name="myRadio" value="2">( value 2)<br>
<input type="radio" name="myRadio" value="3">( value 3)<br>
<input type="submit" value="submit">
</form>
The default value of the value attribute is the string "on". Hence "on" is sent as the value of the radio group named "radiobtn" when the selected button is missing a value attribute. (Ref. HTML standard)
Related
I have a form that contains gender input in the form of a radio button, but when I try to submit with an empty value, the radio button element doesn't get into the Request object which in the example below the input name is jenis_kelamin. But if jenis_kelamin has a value, then the jenis_kelamin element will be entered into the Request Object.
I need the element in the Request object because if the radio element is empty, there will be an error with the input message required. So, what I'm hoping for is how the radio input gets into the Request object when the value is empty and why this is happening.
Routes
Route::get('/mahasiswas/create', 'MahasiswaController#create')->name('mahasiswas.create');
Route::post('/mahasiswas', 'MahasiswaController#store')->name('mahasiswas.store');
Controller
public function create(){
return view('form-pendaftaran');
}
public function store(Request $request){
dump($request);
}
View
<form action="{{route('mahasiswas.store')}}" method="post">
#csrf
<div class="form-group">
<label>Jenis Kelamin</label>
<input type="radio" name="jenis_kelamin" id="laki-laki" value="L">
<label for="laki-laki">Laki-laki</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Daftar</button>
</form>
Radio Input if the value is null
Radio Input if there a value
Notes : I'm using Laravel 7
You can solve it by putting a hidden input with the same name before the radio inputs
<form action="{{route('mahasiswas.store')}}" method="post">
#csrf
<div class="form-group">
<label>Jenis Kelamin</label>
<input type="hidden" name="jenis_kelamin" value="" />
<input type="radio" name="jenis_kelamin" id="laki-laki" value="L">
<label for="laki-laki">Laki-laki</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Daftar</button>
</form>
If the user checks the radio input, then it will override the hidden input you set.
PS: The same fix applies for checkboxes too
PPS: Probably the fix written in the comments works too, but this one works regardless of the framework used
PPPS: This fix may become a problem if a query selection by the name attribute is done, but the developer must be aware of that.
Can any body tell me the best practice or way to change Text field to the Button with value 0 or 1.
Let me clear what I want so i have here(see below) django form with the 2 field called Up_vote and Down_vote and when I submit it stores pretty nicely into the Votes table.
But what I what is to have two buttons like stacoverflow have for up_vote and down_vote and when someone press on the up_vote it should submit value 1 automatically to the database and when someone press the down_Vote it sould submit the value 0 to the database table.
see like this:
so basically how i can convert text fields to the two buttons, I dont now how i can do with the javascript or with other method.
It's basically a CSS style I will assume that you will not use AJAX
Create 2 forms one for up and other for down vote
Put the type attribute on the input to hidden and the value is 1 for the up vote and 0 for down vote and use CSS to style the submit button to appear like what you want
this how it should be in html
<!-- Up vote form -->
<form>
<input type="hidden" name="vote" value="1">
<button type="submit" class="up-vote-btn"></button>
</form>
<!-- Down vote form -->
<form>
<input type="hidden" name="vote" value="0">
<button type="submit" class="up-vote-btn"></button>
</form>
my dynamically populated radio button group gets more than one item checked. so how to solve this.?using HTML,CSS,JS; C#(backend).
i wrote a code for list of items with input type as "radio". the values of list item is stored in a Arraylist in backend i.e C#. but when i try to run the code, more than one radio button gets selected.
please help me solve my issue. and even how to check which radio value is selected and how to pass the checked radio value to backend or server.
HTML code
<div class="demo-container size-thin">
<div class="RadListBox RadListBox_Silk" >
<div class="rlbGroup">
<ul>
<%
foreach (var item in dataname)
{
%>
<li>
<input type="radio" />
<img alt="" src="Images/<%=item %>.png"> <%= item%></li>
<%
}
%>
</ul>
</div>
</div>
</div>
Sample frontend visual
i have not writeen any javascript code as of now.
To be clearer than the other answers. All radio buttons in a group must have identical values for their name attribute. This is what groups them together. It's their value attribute that is used to give each button its individual meaning.
Additionally, the name attribute is necessary for any/all form elements that are supposed to submit their value during the submit event. If an element doesn't have the name attribute, it won't send its data.
Once you've made this change, you don't have to worry about how to send the checked radio button's value to the backend server because that will be done automatically when the form that the radio button is in gets submitted.
// Get reference to parent element of first radio button group
var parent = document.querySelector("fieldset:first-child");
// Set up click event handler for it
parent.addEventListener("click", function(e){
// Check to see if the originator of the event was a radio button
if(e.target.nodeName === "INPUT" && e.target.getAttribute("type") === "radio"){
// Get a reference to the checked radio button
console.log("Checked radio button is: " +
document.querySelector("input[type=radio][name=testGroup1]:checked").value);
}
});
<fieldset>
<legend>Group 1</legend>
<label> Choice A<input type="radio" name="testGroup1" value="A"></label><br>
<label> Choice B<input type="radio" name="testGroup1" value="B"></label><br>
<label> Choice C<input type="radio" name="testGroup1" value="C"></label>
</fieldset>
<fieldset>
<legend>Group 2</legend>
<label> Choice A<input type="radio" name="testGroup2" value="A"></label><br>
<label> Choice B<input type="radio" name="testGroup2" value="B"></label><br>
<label> Choice C<input type="radio" name="testGroup2" value="C"></label>
</fieldset>
You need to give a name to it
<input type="radio" name="myRadio">
this way the radio know which "group" is it from
input radio
#Sourav,
First, we've to set the name of that radio button.
<input type="radio" name="nameOfThisField">
I am generating an HTML form with some radio buttons and checkboxes. the generated code for the radio buttons for instance are like these:
<input id="101_2" type="radio" name="101" value="2" >
<input id="101_3" type="radio" name="101" value="3" checked="true">
Using JavaScript I can make a for cycle to see what radio is checked using the check attribute.
The problem is that if I manually click in another radio option (from the same group as in the example), visually in the HTML I can see that another radio is selected, but the JavaScript is still saying that the input 101_3 is the selected radio option. If I look at the HTML using firebug I can see that the new selected option is indeed not selected (doesn't have the checked attribute)... despite I have selected manually.
Any ideas on this?
Fist and formost when naming your radio buttons or any type of DOM input element never start the name of an input element with a number, always start the name of your input element with a letter.
For your posted code you would name your radios in similar fashion, one01 or x101 or o101,ect...
Do the same thing with your ids' of any DOM element. Never start an id of a DOM element with a number.
--HTML
<input id="x101_2" type="radio" name="x101" value="2">
<input id="x101_3" type="radio" name="x101" value="3" checked="checked">
<br /><br />
<button type="button" onclick="WhatsChecked()">Whats Checked?</button>
--JavaScript
function WhatsChecked() {
var radCk = document.body.querySelectorAll('input[name="x101"]:checked')[0];
alert(radCk.id);
};
--Fiddler
fiddler
I have 4 radio buttons and a textbox and a search button. User selects a radiobtn, types in keyword and clicks Search. OnClick of button, the radiobutton value and inputbox value is grabbed and passed to the URL as querystring. Like this http://mysite.com/event.aspx?kwd=keyword&type=radiobtnvalue
If user selects Event, types in 'Dance' and hits SearchButton it would go to http://mysite.com/event.aspx?kwd=Dance&type=Event and refresh the page and once the page is refreshed it will reset the default 'checked' back to 'All'. I want to maintain the user checked radio's checked state even after refresh. Is it possible? using some form of jquery?
Basically the logic is like this, if Page URL is mysite.com/event.aspx, default checked radioBtn is "All" else whatever user selected and passed to the URL as querystring
<div class="EventRadios" style="color:#574319; font:13px Trebuchet">
<input type="radio" name="EventType" value="" checked="checked"/>All
<input type="radio" name="EventType" value="Classes" />Class
<input type="radio" name="EventType" value="Events" />Event
<input type="radio" name="EventType" value="Support Groups" />Support Group <br /><br />
</div>
<input name="KeywordBox" class="BasicSearchInputBox" type="text" value="Keyword Search..."/>
<div class="searchBtnHolder"><a class="searchButton" href="#" type="submit"><span>Search</span></a></div>
you can store the value in cookie or as an alternative can use sessionStorage