Assign different actions for two radio buttons in html - javascript

I am a newbie in html and js. I have been trying to check possible discussions about my problem, but couldn't find anything similar.
Here is my problem: I need to have two radio buttons and I would like to show different buttons for each radio button selection that could take the page further actions (i.e. if radio button A selected, show exit button, if radio button B selected show next button. In this direction, I started to create something, but I stuck at the point of creating conditional actions.
In my php file I have the following codes:
<div>
<label><input type="radio" id="noc" name="c" value="f_c" onchange="disp_button(this.checked);"> no action</label><br>
<label><input type="radio" id="co" name="c" value="t_c" onchange="disp_button(this.checked);"> take action</label><br>
</div>
<div class="header_format"><p id="hidden_field" style="display:none;" <input onclick="do_this();" type="button" class="btn btn-primary" value="Continue" />Next</button></div></p>
<div class="header_format"><p id="hidden" style="display:none;" <input onclick="do_that();" type="button" class="btn btn-primary" value="Exit" />Exit</button></div></p>
in addition to the js file, which contains the functions for php file. I defined specific function for my radio button actions like that below in my js file:
function disp_button(checked){
var button1 = document.getElementById("noc");
var button2 = document.getElementById("co");
if (button1.checked){
show_exit_button("noc radio button selected");
}else if (button2.checked) {
show_next_button("co radio button selected");
}
}
So, I would appreciate any help to put those things together. Thanks for your time.

Related

Get value of radio button group in route after form submit?

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)

Set value to radio button after click on button using angular model

I have a set of radio buttons that when I click them they show different content.
<div class="radio" ng-init="topRadios()">
<input type="radio" ng-model="topTable" value="topCategory" ng-change="updateTotals('topCategory')">TY 30 Categories</label>
<input type="radio" ng-model="topTable" value="topSupplier" ng-change="updateTotals('topSupplier')">TY Top 10 Suppliers</label>
<input type="radio" ng-model="topTable" value="topBrand" ng-change="updateTotals('topBrand')">TY Top 10 Brands</label>
</div>
And I have a button to apply some filters to the information that is displayed depending o the radio button selection.
<button class="goButton btn btn-xs" ng-class="css" ng-click="go()" ng-disabled="isClicked"> Apply </button>
When I click on the third button to see that info for example and then the Apply button with some filters the page refresh and what I want is that when the info and radio buttons displayed the first radio button is selected.
Can anyone help me please?
sounds like what you want to do is set an initial value for your radio input's ng-model in your controller:
$scope.topTable = 'topCategory';
you probably also want to reset the input's value in your go function after you apply your filtering with that same code snippet.

How to show different textbox depending on which radio button is clicked?

I am working with JSP and I have a html form in which I have a button at the top which is Process button. Now if I click on that Process button, it shows me a form which has two radio button - TestClient and TestServer.
It also has Submit button in that form.
Here is my jsfiddle
Problem Statement:-
Now what I am trying to do is - As soon as I click on TestClient radio button, I would like to show two text box and one radio button along with label just below that TestClient and TestServer like this -
TestClient TestServer
Name textbox
Id textbox
Sex Male Female
Submit button
In the same way if I am clicking TestServer button - I would like to show three text box and one drop down menu just below the TestClient and TestServer
TestClient TestServer
Address textbox
ClientId textbox
ServerId textbox
Country dropdownbox
Submit button
Is this possible to do using jquery in my current jsfiddle example? If yes, then any jsfiddle example will be of great help to me.
Very do-able. I've just added a quick example with a div for each radio button and some text in them. You can add your own inputs etc.
Hide these divs with CSS by default.
<div class="client" style="display: none">
Client fields here
</div>
<div class="server" style="display: none">
Server fields here
</div>
Then you can do something like this with your jQuery handler:
$('input[name="client"]').click(function() {
if($(this).attr('id') == 'client') {
$('.client').show();
$('.server').hide();
} else {
$('.client').hide();
$('.server').show();
}
});
if you do not want to code the html and show/hide it, but you prefere to generate it with jquery, you can also use this solution:
http://jsfiddle.net/fauv9/1/
<button id="primary">Process</button>
<form method='post'>
<h4>Process</h4>
<fieldset><legend>process</legend>
<input id="client" value="TestClient"type="radio" name="cli_srv">
<label for="client">TestClient</label>
<input id="server" value="TestServer" type="radio" name="cli_srv">
<label for="server">TestServer</label>
</fieldset>
<fieldset id="form_process">
</fieldset>
</form>
<button form="form_process">Submit</button>
and
$("#primary").click(function(){
$("form").show()
});
var form= $('#form_process');
$("#client").click(function(){
form.html(null);
form.append('<label for="cli_name">name</label><input value="name" id="cli_name"><br>')
form.append('<label for="cli_id">id</label><input value="id" id="cli_id"><br>')
// etc...
})
$("#server").click(function(){
form.html(null);
form.append('<label for="cli_name">address</label><input value="address" id="address"><br>')
form.append('<label for="srv_id">id</label><input value=" server id" id="srv_id"><br>')
// etc...
})

Making radio buttons that are named differently, act as if they were in a group

I have a dynamically generated form - within it are multiple fieldsets with their own elements. Among those is a radio button. Here's a simplified snippet:
<form name="ePIC" method="post" action="test.php">
<fieldset>
<input type="radio" name="pic[1]" />
</fieldset>
<fieldset>
<input type="radio" name="pic[2]" />
</fieldset>
<input type="submit" name="submit" value="test" />
</form>
Basically, in the fieldsets are pictures and the radio buttons are to select the cover picture for the album.
Everything is working great except the fact that, because the radio buttons are named differently, they won't act as a group - meaning, multiple radio buttons can be selected at once.
Can anyone tell me how to make the radio buttons act as a group, probably with javascript/jQuery?
I started trying to manage the buttons by class - but got lost along the way as to how to affect all the other radio buttons, at the click of one.
This jQuery code will remove the [n] part of all the radio button names, so all the buttons with the same name prefix will be grouped together.
$(":radio").attr('name', function(i, name) {
$(this).data('orig-name', name);
return name.replace(/\[.*\]/, '');
});
Use this submit handler to put back the original names with the indexes when the form is submitted.
$("form").submit(function() {
$(this).find(':radio').attr('name', function() {
return $(this).data('orig-name');
});
});
You better use same name, but if you can't:
$('input[type="radio"]').change(function(){
// Deselect all
$('input[type="radio"]').attr('checked', false);
// Select current
$(this).attr('checked', true);
});
If you use the same name for both radio button, only one will be allowed to be selected. Take a look at the code below.
<form name="ePIC" method="post" action="test.php">
<fieldset>
<input type="radio" name="pic" value="1" />
</fieldset>
<fieldset>
<input type="radio" name="pic" value="2" />
</fieldset>
<input type="submit" name="submit" value="test" />
</form>
You need to create them with the same name but you can assign them different values with the value attribute.

JQuery dialog box prevents getting values from radio buttons

I've been creating a webpage using Javascript, JQuery, and the FlatUI framework, and I've hit a bit of a roadblock.
Using this JQuery code:
$( "#db" + category ).dialog( "open" );
I open the following dialog box:
<div id="dbHome" class="dialogBox">
<form id="formHome" action="javascript:void(0);" onsubmit="submitData('Home', 'radio')">
<p>
What type of home do you live in?
</p>
<label class="radio" for="radioHome1">
Unit / Flat / Apartment
<input type="radio" id="radioHome1" name="inputHome" value="Unit / Flat / Apartment" data-toggle="radio" checked="">
</label>
<label class="radio" for="radioHome2">
Town House / House
<input type="radio" id="radioHome2" name="inputHome" value="Town House / House" data-toggle="radio">
</label>
<input type="submit" class="btn btn-primary btn-large btn-info" style="float: right;" value="Submit">
</form>
</div>
The dialog box opens without issue. However, when I click the submit button (and execute "submitData()", the function is unable to retrieve the value that the user selects from the radio buttons. There is more to this issue though: If the user doesn't click a radio button, and instead leaves the default "checked" button untouched, the function is able to retrieve the value. But if the user selects a different radio, then selects the default one again, the function will still return "undefined" when asked to get the value.
The function in question executes the following code:
function submitData(category, inputType)
{
// Get the index (to search in the array)
var key;
key = $("#form" + category + " input[name=input" + category + "]:checked").val();
alert("KEY: " + key); // Prints "undefined" if the user makes any input.
}
I've tried countless different code to retrieve values from radios. None of it has worked.
I hope I've provided enough information here, and thank you so much in advance.
It wasn't my code that was causing issues. It was an external file (provided by the framework) that was interfering.

Categories

Resources