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

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

Related

Toggle Switch With HTML and PHP Form

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>

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

using a button to add data from a text input with angular

I'm using angular with a MySQL backend.
I think I'm missing something regarding ng-model.
When I click add new idea, nothing happens. Any ideas. I'd had it working, but then I changed some things, so I know it's registering to the database. Additionally, when it did work, it would only update without a refresh occasionally. My main goal is getting the adding working again, but if there's something else blatantly wrong, please feel free to give me a hard time.
thanks, all.
html
<form>
<div>
<input type="text" class="form-control" name="idea" ng-model="ideaInput">
<button class="btn btn" type="submit" ng-click="addIdea(ideaInput)">Add
New Idea</button>
</div>
</form>
php
<?php
require_once 'db.php'; // The mysql database connection script
if(isset($_GET['idea'])){
$task = $_GET['idea'];
$status = "0";
$created = time();
$query=mysql_query("INSERT INTO ideas(idea,status,created_at) VALUES ('$idea', '$status', '$created')") or die(mysql_error());
}
js controller
app.controller('ideasController', function($scope, $http) {
getIdea(); // Load all available ideas
function getIdea(){
$http.get("ajax/getIdea.php").success(function(data){
$scope.ideas = data;
});
};
$scope.addIdea = function (idea) {
$http.get("ajax/addIdea.php?idea="+idea).success(function(data){
getIdea();
$scope.ideaInput = "";
});
};
?>
This is what used to work.
<div class="col-sm-3">
<button ng-click="addNewClicked=!addNewClicked;" class="btn btn-sm btn-danger header-elements-margin"><i class="glyphicon glyphicon-plus"></i> Add New Idea</button>
</div>
<div class="col-sm-3">
<input type="text" ng-model="filterIdea" class="form-control search header-elements-margin" placeholder="Filter Ideas">
</div>
</div></div>
<div class="widget-body ">
<form ng-init="addNewClicked=false; " ng-if="addNewClicked" id="newIdeaForm" class="add-idea">
<div class="form-actions">
<div class="input-group">
<input type="text" class="form-control" name="comment" ng-model="ideaInput" placeholder="Add New Idea" ng-focus="addNewClicked">
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="addIdea(ideaInput)"><i class="glyphicon glyphicon-plus"></i> Add New Idea</button>
</div>
</div>
</div>
</form>
try to add your controller reference in the div:
<form>
<div ng-controller="ideasController">
<input type="text" class="form-control" name="idea" ng-model="ideaInput">
<button class="btn btn" ng-click="addIdea(ideaInput)">Add
New Idea</button>
</div>
</form>

Bootstrap: Using a disabled button as a form input

There may be a better way to do this, but I'm trying to create a button group where the left and right buttons are increment/decrement, and the middle button is a disabled button representing the value.
The field properly increments/decrements, but the value isn't getting passed to php.
I do like how the button group looks:
HTML
<form method="POST" action="send_email.php">
<div class="row"">
<div class="col-sm-4 col-xs-4">
<h5><b>Attendees</b></h5>
</div>
<div class="col-sm-8 col-xs-8">
<div class="btn-group">
<input type="button" class="btn btn-default" name="decrease" value="-" onclick="decreaseBtnOnclick('attendees')"/>
<input type="button" class="btn btn-primary" name="attendees" value="0" id="chairs" disabled/>
<input type="button" class="btn btn-default" name="increase" value="+" onclick="increaseBtnOnclick('attendees')"/>
</div>
</div>
</div>
<div class="text-right">
<input type="hidden" name="email" value="contact">
<a href="./index.php">
<button type="submit" class="btn-main">Finish!</button>
</a>
</div>
</form>
Javascript (works fine to change the value in the middle button)
<script>
function increaseBtnOnclick(item) {
document.getElementById(item).value = Number(document.getElementById(item).value) + 1;
}
function decreaseBtnOnclick(item) {
if(document.getElementById(item).value > 0){
document.getElementById(item).value = Number(document.getElementById(item).value) - 1;
}
}
PHP (works fine for other types of inputs, e.g., text)
<?php
if(isset($_POST['email'])) {
$attendees = $_POST['attendees']; // required
echo "Attendees: ".$attendees;
}
?>
Try adding a hidden input then add the value of your disabled button to it with JS.
JS
function increaseBtnOnclick(item) {
var newValue = Number(document.getElementById(item).value) + 1;
document.getElementById(item).value = newValue;
document.getElementById("hidden_input").value = newValue;
}
function decreaseBtnOnclick(item) {
if(document.getElementById(item).value > 0){
var newValue = Number(document.getElementById(item).value) - 1;
document.getElementById(item).value = newValue;
document.getElementById("hidden_input").value = newValue;
}
}
HTML:
<form method="POST" action="send_email.php">
<div class="row"">
<div class="col-sm-4 col-xs-4">
<h5><b>Attendees</b></h5>
</div>
<div class="col-sm-8 col-xs-8">
<div class="btn-group">
<input type="button" class="btn btn-default" name="decrease" value="-" onclick="decreaseBtnOnclick('attendees')"/>
<input type="button" class="btn btn-primary" name="attendees" value="0" id="chairs" disabled/>
<input type="button" class="btn btn-default" name="increase" value="+" onclick="increaseBtnOnclick('attendees')"/>
<input type="hidden" name="hiddenvalue" id="hidden_input" value="0">
</div>
</div>
</div>
<div class="text-right">
<input type="hidden" name="email" value="contact">
<a href="./index.php">
<button type="submit" class="btn-main">Finish!</button>
</a>
</div>
</form>
PHP:
<?php
if(isset($_POST['email'])) {
$attendees = $_POST['hiddenvalue']; // required
echo "Attendees: ".$attendees;
}
?>
You could switch to a regular input field with button addons.
Disabled input fields do not get posted, however you can set it to readonly.
Please have a look at this thread,
Disabled form inputs do not appear in the request
You could use a hidden input field:
<input type="hidden" id="h_attendees" name="h_attendees" value="0"/>
In your increaseBtnOnclick and decreaseBtnOnclick you could set the value of the hidden field.
function increaseBtnOnclick(item) {
document.getElementById(item).value = Number(document.getElementById(item).value) + 1;
document.getElementById("h_attendees").value = document.getElementById(item).value;
}
function decreaseBtnOnclick(item) {
if(document.getElementById(item).value > 0){
document.getElementById(item).value = Number(document.getElementById(item).value) - 1;
document.getElementById("h_attendees").value = document.getElementById(item).value;
}
}
And access it in PHP
$_POST['h_attendees'];

Submitting to database from modal view

I have a file, let`s name it dashboard.php, in this file i load a modal window and trough this window i want to submit a form and the form action is also written in this dashboard.php file. is this possible? i am acutally trying it this way, but it s not working:
dashboard:php
<?php $modal_gerade_geschlossen = $_POST['abgespeichert'];
if ($modal_gerade_geschlossen == 1){
$neue_addy = $_POST['neue_addy'];
$benach_ja_nein = $_POST['benach_ja_nein'];
mysql_query("INSERT INTO mitglieder (email,benachrichtigung)VALUES('$neue_addy','$benach_ja_nein')");
}
?>
<div class="modal-body" style="height:194px">
<div>
<form name="losgehts" method="post" action="../dashboard.php">
<div style="float:left">
<input name="neue_addy" style="width:270px" type="text"/>
</div>
</div>
<div>
<select name="benach_ja_nein" >
<option>ja</option>
<option>nein</option>
</select>
</div>
<input type="hidden" name="abgespeichert" value="1"/>
<button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
<input type="submit" name="submit" class="btn btn-primary" value="Speichern"/>
</form>
</div>
</div>

Categories