I'm having a few issues with Bootstrap 3 radio button groups.
When I select the radio button, it is not marking the radio button as checked, it is only adding 'active' to the radio label.
So when I try and pull the checked radio button via PHP and Codeigniter specifically there are no values.
Should the radio buttons not work as a normal radio button should?
Here's the radio button code
<div class="form-group">
<label for="Custom Branding">Custom Branding</label><br />
<div class="btn-group user_toggle" data-toggle="buttons">
<label class="btn btn-default btn-sm active">
<input type="radio" name="default_branding" value="0" autocomplete="off" > No
</label>
<label class="btn btn-default btn-sm">
<input type="radio" name="default_branding" value="1" autocomplete="off"> Yes
</label>
</div>
</div>
So when I click a radio button, neither of the radio buttons are marked as checked.
And the radio buttons are only in the POST array if a change has been made, but I need all the values there.
What am i doing wrong?
Not sure to understand your problem, but your code is not logic. You have active class on the label so bootstrap display "No" as active, but you don't have "checked" attribute in the corresponding radio input so in pure html it is not checked.
your code with the checked attribute corresponding to the active class...
<div class="form-group">
<label for="Custom Branding">Custom Branding</label><br />
<div class="btn-group user_toggle" data-toggle="buttons">
<label class="btn btn-default btn-sm active">
<input type="radio" checked="checked" name="default_branding" value="0" autocomplete="off" > No
</label>
<label class="btn btn-default btn-sm">
<input type="radio" name="default_branding" value="1" autocomplete="off"> Yes
</label>
</div>
</div>
Related
do you know how to collect specific choices from various radio buttons to pass to a div or to another field a specific value (in jquery, vanilla or php)?
For example...
RADIO_1
choice-A
choice-B
choice-C
RADIO_2
choice-A
choice-B
choice-C
If user check RADIO_1 > choice-A & RADIO_2 > choice-B than pass text "R1aR2b" to field x
If user check RADIO_1 > choice-B & RADIO_2 > choice-C than pass text "R1bR2c" to field x
...and so on
thank you
I have tryied (but doesnt work):
<?php
$level = $_GET["levelRadio"];
$shape = $_GET["shapeRadio"];
$state = "first choice $level, second choice $shape than:";
if ( $level == "A1" && $shape == "B1" ) {
echo "$state A1B1";
}
if ( $level == "A2" && $shape == "B2" ) {
echo "$state A2B2";
}
?>
<form class="choices">
<div class="card first-card d-none d-lg-block">
<div class="card-header">
<div class="btn-link">
Question 1
</div>
</div>
<fieldset id="levels" class="btn-group btn-group-toggle">
<label class="btn btn-sm btn-outline-info">
<input type="radio" name="levelRadio" value="A1" checked> A1
</label>
<label class="btn btn-sm btn-outline-info">
<input type="radio" name="levelRadio" value="A2"> A2
</label>
</fieldset>
</div>
<div class="card">
<div class="card-header" id="headingOne">
<div class="btn-link">
Question 2
</div>
</div>
<div class="card-body">
<fieldset id="shapes">
<label>
<input type="radio" name="shapeRadio" value="B1" checked>
B1
</label>
<label>
<input type="radio" name="shapeRadio" value="B2">
B2
</label>
<label>
<input type="radio" name="shapeRadio" value="B3">
B3
</label>
</fieldset>
</div>
<button id="btn_confirm_data" type="button" class="btn btn-primary btn-block" disabled>Submit</button>
</form>
There is a way to do this only with js, but hence you tagged PHP in the question, here is maybe a good example of how to do it with PHP...
The example is with one radio button, but still, the logic is the same.
<form action="" method="post">
<input type="radio" name="radio" value="Radio 1">Radio 1
<input type="radio" name="radio" value="Radio 2">Radio 2
<input type="radio" name="radio" value="Radio 3">Radio 3
<input type="submit" name="submit" value="Get Selected Values" />
</form>
<?php
if (isset($_POST['submit'])) {
if(isset($_POST['radio'])) {
echo "You have selected :".$_POST['radio']; // Displaying Selected Value
}
?>
The example is rough, just to give you some insights.
Note - next time give code example, instead of explanations, it would be easier for others to help you.
I have switch in my HTML form like below
<div class="form-group">
<span><b>GAME MODE?</b></span> <div class="btn-group" id="status" data-toggle="buttons">
<label class="btn btn-default btn-on">
<input type="radio" value="1" name="gamemode">ON</label>
<label class="btn btn-default btn-off active">
<input type="radio" value="0" name="gamemode" checked="checked">OFF</label>
</div>
</div>
On Submit form, I am getting all $_POST value but just not getting value of toggle switch. I think I am missing something in it. I am trying to get it like below in PHP
$gamemode=$_POST['gamemode'];
But its always empty. Can I know if anyone can help me for use properly toggle switch?
Thanks!
Your code should have a form tag with method attribute set to post. Then once the submit button is pressed the form $_POST the data and you can retrieve that info using $_POST['gamemode']. I used the below code and tested and get a 1 when ON is submitted and a 0 when OFF is submitted.
<div class="form-group">
<span><b>GAME MODE?</b></span> <div class="btn-group" id="status" data-toggle="buttons">
<form method="post">
<label class="btn btn-default btn-on">
<input type="radio" value="1" name="gamemode">ON</label>
<label class="btn btn-default btn-off active">
<input type="radio" value="0" name="gamemode" checked="checked">OFF</label>
<input type="submit" value="submit" name="submit">
</form>
</div>
I have 8 buttons, each button can be clicked, when you made your selection you go search, after you searched I need to show pictures based on what buttons are clicked before searching. I already have button that has be choosen in a array in PHP, but I dont know how to show the picture that has to be showed of depending on what buttons are used.
<form id="search" action="programmer.php" method="get">
<div data-toggle="buttons">
<div class="container">
<div class="row">
<div class="col-sm-4">
<label class="btn btn-primary btn-block btn-lg-lg">
<input type="checkbox"style="display: none;" name="lang[]" value="html" autocomplete="off">HTML
</label>
</div>
<div class="col-sm-4">
<label class="btn btn-primary btn-block btn-lg-lg">
<input type="checkbox" style="display: none;" name="lang[]" value="css" autocomplete="off">CSS
</label>
</div>
<div class="col-sm-4">
<label class="btn btn-primary btn-block btn-lg-lg">
<input type="checkbox" style="display: none;" name="lang[]" value="javascript" autocomplete="off">Javascript
</label>
</div>
</div>
</div>
<div class="container">
<input type="submit" value="Search" class="btn btn-primary btn-lg btn-block" >
</div>
This is the PHP only showing off that I got the arrays:
<?php
print_r($_GET["lang"]);
?>
Remove style="display: none;" so that checkbox are visible in the web page.Insert the name of your images in value attribute of the checkbox. When you will click on search button all the images selected in checkbox list will be displayed on the next web page.
Add following code to the programmer.php
<?php
$path_to_img_dir="path1/";
$arr=$_GET['lang'];
foreach($arr as $val){
echo sprintf("<img src='%s%s.jpg' /><br>",$path_to_img_dir,$val);
}
?>
You can save the path in a variable in php and the use it in the html code <img src='<?php echo $path;?>'>
I have a page to edit the administrators of a post.
In this page there are some radio buttons. Each radio button corresponds to a administrator of a post. When a radio button is selected the details of that administrator are populated in the form fields.
When the user accesses this edit administrators of a post page no radio button should be checked by default, so I don't have the "checked" property in the radio buttons.
In this page I want to have 2 forms, a form for update and a form to store administrators.
So, for example when the user acesses this page there are for example 3 radio buttons: John, Jake, Create new admin. If the radio button that corresponds to the user John is selected the update form should appear with the form fields populated with the John admin details, the same for the Jake amdin. If the "Create new admin" radio button
is selected it should appear the store form with the form fields reset.
The issue is when the user acesses this edit administrators of a post page no radio button is appearing, so its not possible to select any radio button and so no form appears. Do you know how to organize this two forms properly so that each form appears when the correspondent radio button is selected?
// update form
<form id="update_admins" method="post" class="clearfix"
action="{{route('admins.update', ['post_id' => $post->id])}}" >
{{csrf_field()}}
<div class="form-row">
<div class="form-group col col-lg-6">
<label for="admins">Post admins</label>
#foreach($administrators as $admin)
<div class="form-check">
<input autocomplete="off" class="form-check-input radio" type="radio" name="radiobutton" value="{{ $admin->id }}" id="{{$admin->id}}">
<label class="form-check-label" for="exampleRadios1">
{{$admin->name}}
</label>
</div>
#endforeach
<div class="form-check">
<input autocomplete="off" class="form-check-input" type="radio" name="radiobutton" id="update_admin"
value="update_admin">
<label class="form-check-label" for="exampleRadios2">
Create new admin
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="name">Name</label>
<input autocomplete="off" type="text" required class="form-control" value="{{ $admin->name }}" name="name" id="name">
</div>
<!-- ...the other form fields -->
<input type="submit" class="btn btn-primary btn float-right" value="Update admin"/>
</form>
// store form
<form id="create_admins" method="post" class="clearfix"
action="{{route('admins.store', ['post_id' => $post->id])}}" >
{{csrf_field()}}
<div class="form-row">
<div class="form-group col col-lg-6">
<label for="admins">Post admins</label>
#foreach($administrators as $admin)
<div class="form-check">
<input autocomplete="off" class="form-check-input radio" type="radio" name="radiobutton" value="{{ $admin->id }}" id="{{$admin->id}}">
<label class="form-check-label" for="exampleRadios1">
{{$admin->name}}
</label>
</div>
#endforeach
<div class="form-check">
<input autocomplete="off" class="form-check-input" type="radio" name="radiobutton" id="store_admin"
value="store_admin">
<label class="form-check-label" for="exampleRadios2">
Create new admin
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="name">Name</label>
<input autocomplete="off" type="text" required class="form-control" value="{{ old('name') }}" name="name" id="name">
</div>
<!-- ...the other form fields -->
<input type="submit" class="btn btn-primary btn float-right" value="Store admin"/>
</form>
JS:
$(document).ready(function () {
// receive array with administrators details from the AdministratorController
var admins = {!! $administrators !!}
$("#create_admins").hide();
$("#update_admins").hide();
$("input[name='radiobutton']").click(function() {
let id = $(this).attr("id");
if (id == "store_admin") {
$("input[name='name']").val("");
} else {
let data = admins.find(e => e.id == id) || {
name: "",
...
};
$("input[name='name']").val(data.name);
...
}
});
});
Recognize the forms by controller action
#if(\Route::getCurrentRoute()->getActionMethod() == 'create')
//show create form
#else
//show edit form
#endif
Here is the deal (using php and laravel-5.2).
I have some forms in a page, and when i submit another form not the first one then it keeps submit the first form.
Here my html code:
<form method="POST" action="http://localhost:8888/candidates/18" accept-charset="UTF-8" id="name-edit" style="display:none">
<input name="_method" type="hidden" value="PUT">
<input name="_token" type="hidden" value="xxzvu6HIqP8k2kg78pxuHiTc8NWftjNL1IJvxbDo">
<div class="form-group ">
<div class="col-xs-12 col-sm-5 ">
<input placeholder="Full Name" error="" id="name-input" class="width-100" name="name" type="text" value="chi qua uqaaa1232">
</div>
</div>
<button class="green btn-link col-xs-4" type="submit"><i class="ace-icon glyphicon glyphicon-ok"></i> Click to save or press Enter</button>
</form>
<form method="POST" action="http://localhost:8888/candidates/18" accept-charset="UTF-8" id="address-edit" style="display:none">
<input name="_method" type="hidden" value="PUT">
<input name="_token" type="hidden" value="xxzvu6HIqP8k2kg78pxuHiTc8NWftjNL1IJvxbDo">
<div class="form-group ">
<div class="col-xs-12 col-sm-5 ">
<input placeholder="Address" error="" id="address-input" class="width-100" name="address" type="text" value="nha xacdawdwad">
</div>
</div>
<button class="green btn-link col-xs-4" type="submit"><i class="ace-icon glyphicon glyphicon-ok"></i> Click to save or press Enter</button>
</form>
My jquery code for both forms:
$(document).ready(function(){
$("#name-edit").focusout(function() {
$('#name-edit').css('display', 'none');
$('#name-view').css('display', 'inline');
});
$("#address-edit").focusout(function() {
$('#address-edit').css('display', 'none');
$('#address-view').css('display', 'inline');
});
});
$('#btn-edit-name').click(function () {
var name = $('#name-view').css('display', 'none').clone().children().remove().end().text();
$('#name-input').val(name);
$('#name-edit').css('display', 'inline').focus();
});
$('#btn-edit-address').click(function () {
var name = $('#address-view').css('display', 'none').clone().children().remove().end().text();
$('#address-input').val(name);
$('#address-edit').css('display', 'inline').focus();
});
btn-edit-name and btn-edit-address for showing the form. thanks for your consider.
here is my UI:
You can't submit 2 forms simultaneously.
Instead of having 2 forms for name and address fields you can add them into single form like below:
<form method="POST" action="http://localhost:8888/candidates/18" accept-charset="UTF-8" id="name-edit" style="display:none">
<input name="_method" type="hidden" value="PUT">
<input name="_token" type="hidden" value="xxzvu6HIqP8k2kg78pxuHiTc8NWftjNL1IJvxbDo">
<div class="form-group ">
<div class="col-xs-12 col-sm-5 ">
<input placeholder="Full Name" error="" id="name-input" class="width-100" name="name" type="text" value="chi qua uqaaa1232">
</div>
</div>
<div class="form-group ">
<div class="col-xs-12 col-sm-5 ">
<input placeholder="Address" error="" id="address-input" class="width-100" name="address" type="text" value="nha xacdawdwad">
</div>
</div>
<button class="green btn-link col-xs-4" type="submit"><i class="ace-icon glyphicon glyphicon-ok"></i> Click to save or press Enter</button>
</form>
If you wish to show hide them on click then you can add some jQuery to do so.
oh i found the answer that set the type submit button to button then make jquery for click event $(this).closest('form').submit()
You can either have two different actions
action="http://localhost:8888/candidates/18"
action="http://localhost:8888/candidates/19"
If not possible add different hidden input to each form like
In form 1 add this line
<input type="hidden" name="identifier" value="form1">
In form 2 add this line
<input type="hidden" name="identifier" value="form2">
Now you can either use if ($_POST['identifier'] == 'form1')
OR
You can use a switch statement also
switch($_POST['identifier']){
case 'form1':{}
case 'form2':{}
}
Also your two submit buttons are identical. You can set a value for each that you can check after submission. Set value like this
For form 1 name
<button class="green btn-link col-xs-4" type="submit" value="name" name="name"><i class="ace-icon glyphicon glyphicon-ok"></i> Click to save or press Enter</button>
For form 2 address
<button class="green btn-link col-xs-4" type="submit" value="address" name="address"><i class="ace-icon glyphicon glyphicon-ok"></i> Click to save or press Enter</button>