Toggle Switch With HTML and PHP Form - php

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>

Related

How to show pictures based on what answer filled in on the form?

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;?>'>

Prevent first form submit when submit second from

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>

Bootstrap radio button group not marking radios as checked

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>

Setting an active button after a POST operation using PHP and bootstrap

I'd appreciate your help with this!
Here is my bootstrap HTML code:
<div class="form-group centered">
<input type="submit" class="btn btn-primary btn-block" name="login" value="Log In"></input>
</div>
<div class="centered">
<div class="form-group btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" id="app" value="app" name="dashboard"/>Application
</label>
<label class="btn btn-default">
<input type="radio" id="setup" value="setup" name="dashboard"/>Setup
</label>
</div>
</div>
I would like to add some logic that after the "Log In" button is selected, the "active" class on the label is retained properly.
Example:
Setup is selected
The user clicks login
The password is wrong so the user is thrown back to the same log in form
This time the form has the setup button "active" automatically
I tried playing around with the following within the app input type:
<?php if($_POST['dashboard'] == "app") { echo checked="\"checked\""; } ?>
I now realize, however, that this button group does not work like a regular radio button, and I probably need to toggle the class on the labels somehow.
Thanks in advance for your help!
I got it working piggybacking on the advice of user1844933 :)
<div class="form-group centered">
<input type="submit" class="btn btn-primary btn-block" name="login" value="Log In"></input>
</div>
<div class="centered">
<div class="form-group btn-group" data-toggle="buttons">
<label class="btn btn-default <?php setAppDefault( $lastDashboardSetting ); ?>">
<input type="radio" value="app" name="dashboard"/>Application
</label>
<label class="btn btn-default <?php setSetupDefault( $lastDashboardSetting ); ?>">
<input type="radio" value="setup" name="dashboard"/>Setup
</label>
</div>
</div>
My PHP code:
$lastDashboardSetting = $_POST['dashboard'];
function setAppDefault( $setting ) {
if( $setting === "app" )
echo "active";
else
echo "";
}
function setSetupDefault( $setting ) {
if( $setting === "setup" )
echo "active";
else
echo "";
}
try this
php
if($_POST['dashboard'] == "app" { $appchk='checked'; } else {$appchk='';}
if($_POST['dashboard'] == "setup" { $setupchk='checked'; } else {$setupchk='';}
HTML
<input type="radio" id="app" value="app" name="dashboard" <?php echo($appchk);?>/>Application
<input type="radio" id="setup" value="setup" name="dashboard" <?php echo($setupchk);?> />Setup

I have a post form that submits but "$_POST" variable is empty even though my web inspector indicates otherwise

Here is my html:
<form id="quant" method="POST" action="/portfolio" name="trans">
<div class="modal-body">
Shares : <input autocomplete="off" type="text" name="quantity">
<input type="hidden" value="<?= htmlspecialchars($_GET['q']); ?>" name="stock">
<input type="submit" name="val" value="Confirm Transaction" class="btn btn-primary">
<div id="slider-range-max"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
Here is an image of my web inspector showing that in fact that data was requested:
I have been trying to figure out why this has not been working for a long time, any suggestions would be appreciated.
The Code:
if(isset($_POST["quantity"])) {
var_dump($_POST);
which returns nothing
Then you need a slash after it to let it know it is a folder and not a file: action="/portfolio/"
If you're using something like AngularJS to submit your form, it doesn't send POST data the typical way. Check out this post.

Categories