I've used multiple Bootstrap Toggle Buttons for some options selection. On submitting form, I want to check which options are selected so that I can save the corresponding values in database using PHP.
Below is how my HTML looks like (inside form) -
<li>
<button type="checkbox" class="btn skillNameBtn" data-toggle="button" aria-pressed="false" autocomplete="off">
Option1 </button>
<button type="checkbox" class="btn skillNameBtn" data-toggle="button" aria-pressed="false" autocomplete="off">
Option2 </button>
<button type="checkbox" class="btn skillNameBtn" data-toggle="button" aria-pressed="false" autocomplete="off">
Option3 </button>
</li>
My question is how do I get value of which options are selected in PHP script? E.g if its simple input field, I use $_POST[]. But in this case what is the way to do the same.
Thank you in advance for help.
You can input a hidden field eg:
<input type="hidden" name="option" value="" id="option">
And use a jQuery:
$('.skillNameBtn').click(function(){
$('#option').val($(this).val());
});
You might add value="Option 1" etc into your buttons for easier work
Related
I was trying to make multiple options for a sign-in form. I want my form to have two options, either sign in by username or sign in by email. I want to use radio buttons for the user to select which method they choose to sign in. I was wondering if there is a way with html/css/php to do this or if I must learn to use something else? I am not seeing any examples of this.
Here are some visuals with examples of what I am wanting:
By default I want it to look like this:
When Radio buttons are selected, I want it to look like this:
My current code just looks something like this (this is my code with both text boxes)
<form method='post'>
<input type="radio" name="reason" value="email">Login with Email<br> <input type="text" name="email_text"/><br>
<input type="radio" name="reason" value="user">Login with Username<br> <input type="text" name="user_text"/><br>
<button type="submit" class="btn btn-primary">Login</button>
</form>
You can pretty much do this just with some simple CSS that makes use of a sibling selector and the :checked attribute combined. You can't select a previous element but you can select the following element using +
input[type='text'],
input[type='password']{display:none}
:checked + input{display:block;}
<form method='post'>
<input type="radio" name="reason" value="email">Login with Email
<input type="text" name="email_text"/>
<br />
<input type="radio" name="reason" value="user">Login with Username
<input type="text" name="user_text"/>
<br />
<button type="submit" class="btn btn-primary">Login</button>
</form>
I have an html file containing a form that is being loaded via php. In this form, all input fields show pre-selected values based on previously entered values. When I submit this loaded form, all the textboxes and text inputs are successfully submitted ; however, the radio buttons ( which also have pre-selected values) are not submitted unless, you click on the selected values again. Is there any way I can fix this?
Here's my simplified html that's being loaded:
<form action="report" method="POST" target="_blank">
<div class="btn-group-xs" data-toggle="buttons" id="rop1-1-cons">
<label class="btn btn-outline-primary active">
<input type="radio" name="rop1-1-cons" id="rop1-1-cons-5" value="5" autocomplete="off">I
</label>
</div>
<input type="text" value="Pre-selected User Input"/>
<input type="submit" value="submit"></input>
</form>
The label has "Active" class which means the user have chosen this before the form html was saved.
I think it's useful to mention that I am using bootstrap style radio buttons (I know, they have strange behaviors!)
Add the checked attribute to the input.
<div class="btn-group-xs" data-toggle="buttons" id="rop1-1-cons">
<label class="btn btn-outline-primary active">
<input type="radio" name="rop1-1-cons" id="rop1-1-cons-5" value="5" autocomplete="off" checked="checked">I
</label>
</div>
This question already has answers here:
<button> vs. <input type="button" />. Which to use?
(16 answers)
Closed 5 years ago.
I have this HTML
<div class="btn-group">
<input type="button" name="meat" class="btn btn-default active" value="Both">
<input type="button" name="meat" class="btn btn-default" value="Red">
<input type="button" name="meat" class="btn btn-default" value="White">
<input type="button" name="meat" class="btn btn-default" value="None">
</div>
This with addition os some css gives this resoult:
I use this code to only allow one active:
$(".btn-group > .btn").click(function(){
$(this).siblings().removeClass("active");
$(this).addClass("active");
});
But it is just visual, and when I try to input vía php POST (within a form) I don't get nothing.
If i change to type=radio, the PHP works fine, but it is uglier.
¿Any magical idea to make it work keeping it fancy?
The php code for testing is:
<html>
<body>
MegaUltraTest <?php echo ($_POST["meat"]); ?>
</body>
</html>
Thank you.
These buttons inside 'btn-group' div, aren't doing anything useful, apart from just displaying some buttons on the screen. They are not aware of any 'selected' property (in order for the selected value to be submitted).
Buttons are not meant to act like radio buttons, checkboxes etc. Their purpose is to perform an action when they are clicked.
So what i recomend is to forget about button group and just add checkboxes. If you are concerned about the styling, just add this very useful library (http://icheck.fronteed.com/). I think line skin will be great for you.
If you really want these buttons, you should write some js code (preferably jquery) and on the click event, store the selected value(s) in a hidden input that will get submitted. See here: Change a hidden input's value with jquery/javascript
Source : Send Bootstrap Button-Group value in a form with Get or Post
by nkwinder
You can check if $_POST['meat'] exists and check if the value is equal to it:
Implement it like this:
<div class="btn-group">
<input type="button" name="meat" class="btn btn-default <?= isset($_POST['meat']) && $_POST['meat'] === 'Both' ? 'active' : ''; ?>" value="Both">
<input type="button" name="meat" class="btn btn-default" value="Red">
<input type="button" name="meat" class="btn btn-default" value="White">
<input type="button" name="meat" class="btn btn-default" value="None">
</div>
I want a list of buttons in a form and on postback I'd like to interrogate the list to see what status the buttons are at (by background colour if you are interested.)
The following codes says that Buttonx is undefined
However using the text boxes it works fine.
In javascript I can get at the array of buttons - at least in my real program.
If this is not possible, and an explanation would be useful, does anyone have a workaround at how I can get at the buttons in my postback. (In the real code the buttons are dynamically created depending on an sql query list)
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
var_dump($_POST['Buttonx']);
}
?>
<form name="RegisterStudents" action="" method="post">
<button type="submit" name="myButton">Submit</button>
<!--
<input type="text" name="Buttonx[]" id="B0" value="0" />
<input type="text" name="Buttonx[]" id="B1" value="1" />
<input type="text" name="Buttonx[]" id="B2" value="2" />
<input type="text" name="Buttonx[]" id="B3" value="3" />
-->
<button type="button" name="Buttonx[]" id="B0" >0</button>
<button type="button" name="Buttonx[]" id="B1" >1</button>
<button type="button" name="Buttonx[]" id="B2" >2</button>
<button type="button" name="Buttonx[]" id="B3" >3</button>
</form>
Thanks
Gordon
Using forms you cannot pass the form elements with type="button" to server their values are not passed to server instead you have to use any other type to send the information to server
on client side you can access their values this is the default nature of html
You cannot pass the type="button" to the server, instead use checkboxes?
You have the id="B0" or so but instead it should be value="B0" and not "id"
The <button> is not really mature in browsers yet. Look at this link: http://www.w3schools.com/tags/tag%5Fbutton.asp
If you use the <button> element in an HTML form, different browsers may
submit different values. Use <input> to create buttons in an HTML form.
I have never really used radio buttons before. So what I am trying to achieve is, using two radio buttons 'Public' and 'Private'. This is for the user's profile. My HTML code for the buttons is;
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary" id="privacy" name="privacy" value="0">Private</button>
<button type="button" class="btn btn-primary" id="privacy" name="privacy" value="1">Public</button>
</div>
As for the PHP, I'm not sure how to get the value and store it. Any help is appreciated!
Use a form.
<form method="get" action="yourscript.php">
<input type="radio" id="private" name="privacy" value="0">
<label for="private">Private</label>
<input type="radio" id="public" name="privacy" value="1">
<label for="public">Public</label>
<input type="submit" value="Save">
</form>
Change your buttons to input elements, which, together with the form, provide a HTML native way to send data to a script without the need for Javascript (although you can use Javascript to enhance the usability later on).
Using the label tag, you can assign a text to a radiobutton. This allows this text to be clicked as well, and it also provides better support for screen readers, because they can actually see which text belongs to the radiobutton.
An id needs to be unique, so I changed it to private and public. The ids are also used to link the label to.
The name determines by which name the value is sent to your script.
In PHP, you can use the superglobal $_GET. $_GET['privacy'] will contain '0' or '1' depending on the choice made. If the method of the form was post, you could use the superglobal $_POST instead, or you can use $_REQUEST, which contains values from either, so in that case your script doesn't care whether the values were send in the url (get) or in the chunk of invisible post data that is sent along with the request.
change type to radio and donot use the same id for morethan one element id is supposed to be unique
Also when you post the form type=button values will not be passed with the form
<div class="btn-group" data-toggle="buttons-radio">
<input type="radio" class="btn btn-primary" name="privacy" value="0"/>Private
<input type="radio" class="btn btn-primary" name="privacy" value="1"/>Public
</div>
assuming its posted on $_POST['privacy'] should contain either a 1 or a 0
also dont use an ID twice - they are supposed to be unique
You don't have form and submit button.
HTML page:
<div class="btn-group" data-toggle="buttons-radio ">
<form name="privacyForm" action="action.php" method="post">
<button type="radio" class="btn btn-primary" name="privacy" value="0">Private</button>
<button type="radio" class="btn btn-primary" name="privacy" value="1">Public</button>
<input type="submit" value="Submit">
</form>
</div>
action.php
<?php
echo $_POST['privacy']; // should be 0 or 1
?>
i have assumes that your form is something as follows.
<form name="sample" action="form_submit.php" method="POST">
<div class="btn-group" data-toggle="buttons-radio">
<input type="button" class="btn btn-primary" id="private" name="privacy" value="0">Private</input>
<label for="private">Private</label>
<input type="button" class="btn btn-primary" id="public" name="privacy" value="1">Public</input>
<label for="public">Public</label>
</div>
<input type="submit" name ="submit" value ="Submit"/>
</form>
you can use the following code inside the action (form_submit.php) to get the selected radio button value.
form_submit.php
<?php
$selected_radio = $_POST['privacy'];
print $selected_radio;
?>
make sure that you are not duplicating the IDs because they should be unique.