How do I get the "state" of buttons which have been pressed in bootstrap?
I.e. I am using this code, which makes buttons 'toggle' like a checkbox:
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
Which is from the bootstrap manual here.
But which I then click a submit button - there is no data contained in the $_POST. How do I know which button(s) have been selected?
I have tried adding 'value="1" name="1"' etc aswell to the buttons - but still nothing.
Edit: Here is the full solution, which I was able to create using the help from Felix below.
<form method="post" action="" id="mform" class="form-horizontal">
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" name="left" value="1" class="btn btn-primary">Left</button>
<button type="button" name="middle" value="1" class="btn btn-primary">Middle</button>
<button type="button" name="right" value="1" class="btn btn-primary">Right</button>
</div>
<button type="submit" class="btn">Submit</button>
</form>
<script>
$('#mform').submit(function() {
$('#mform .btn.active').each(function() {
var input = document.createElement("input");
input.setAttribute("type", "hidden");
input.setAttribute("name", this.name);
input.setAttribute("value", this.value);
document.getElementById("mform").appendChild(input);
});
});
</script>
Buttons that are "selected" will have the active class attached to them. You can then use jQuery to only select those buttons. Since buttons are form elements, they can have name and value attributes and it's probably best to make use of those.
Example:
var data = {};
$('#myButtonGroup .btn.active').each(function() {
data[this.name] = this.value;
});
To send the data to the server, you'd could use Ajax and set the data manually / merge it with other form data (if it exists).
You could also try to mirror the values into hidden form elements on submit if you want to use "traditional" form submission (see Change form values after submit button pressed).
Related
Hi I try to research my problem via Stack about 3 hours but I still not found.
So I decide to create the topic to ask about my problem.
I am creating search engine and the below are the result:
If I type test text into input form then click "enter" button from keyboard, the search result will working correctly.
If I type test text into input form then click "Search" button from webpage, the search result is not working.
My problem is result No 2.
This is my code:
<form action="search_content.php" method="POST" >
<div class="input-group mainsearch-home">
<input type="text" class="input-group-field" name="homesearchfield" id="homesearchfield2" placeholder="What are you looking for?" autocomplete="off">
<div class="input-group-button">
<button type="button" class="button button--search" >search</button>
<input type="hidden" name="homesearchfield" value="search">
</div>
</div>
</form>
What I do wrong?
I thought that my problem is happens from input type hidden data.
So I would like to know how to get value from input text box and send value to my target page.
I have added some php code from my "response" page on below.
$viewstate = isset( $_POST["homesearchfield"] ) ? $_POST["homesearchfield"] : "" ;
$sql="SELECT * FROM `article` WHERE topic_article LIKE '%$viewstate%' order by id_article DESC";
Currently your form doesn't know that the button is meant to submit the form, which can be fixed by changing the type on the button:
<button type="submit" class="button button--search" >search</button>
You could also use:
<input type="submit" class="button button--search" value="search" />
An option for controlling the data is using JavaScript / jQuery to control the action of the form. This way also allows you to view the data being posted before its actually sent and you can even comment out the post and just work on getting the form with the right data you are looking to get back.
also for serialize to work, you need to have a name for each item you want to pass back data.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script lang="JavaScript">
$(function(){
$("#button").click(fuction()
{
var formData = $("#form").serialize();
alert(formData);
/*
$.post({"search_content.php",
formData,
function(returndata)
{
//do something
//this will load the return data into the div tag on the fly
$("#divReturn").html(returndata);
},
"text"
});
//*/
});
});
</script>
<form id="form" onsubmit="return false;" >
<div class="input-group mainsearch-home input-group--search inputs--raspberry">
<input type="text" class="input-group-field" name="homesearchfield" id="homesearchfield2" placeholder="What are you looking for?" autocomplete="off">
<div class="input-group-button">
<button type="button" class="button button--search" id="button" name="button" value="search" >search</button>
</div>
</div>
</form>
<div id="divReturn">
</div>
I am currently using PHP form element : the submit button as
<input type="submit" name="submit" value"set"/>
and the form was being submitted like :
if(isset($_POST['submit']) && $_POST['submit'] == 'set'){..do something..}
Now in bootstrap a submit button is usually written as
<button type="submit" class="btn btn-success btn-sm">set</button>
My question is how to submit this form data since I cannot do it like the previous way. It might be a noob question but I am new to bootstrap. Any suggestions would be of great help.
This has little to do with bootstrap. You can set a name and value attribute on a button as well as an input[submit].
<button type="submit" class="btn btn-success btn-sm" name="submit" value="set">
set
</button>
I have some code in a blade template which create some forms and buttons, see below
<div class="element1">
<div class="text1">
<form action="{{ route("progressSheetDynamic") }}" method="post" id= "add">
<input name="increment" value="increment" type="hidden"> </input>
<input type="hidden" name="id" value= {{$activities}} >
<button type="submit" class="styleHover styleButton" id= {{$activities}} > + </button>
</form>
{{ $count }} / {{ ($goal/5) }}
<form action="{{route("progressSheetDynamic") }}" method="post" id="delete">
<input type="hidden" name="delete" value="delete">
<input type="hidden" name="id" value= {{$activities}}>
<button type="submit" class="styleHover styleButton"> - </button>
</form>
</div>
</div>
I use #include_layouts("template file") 3 times in my view file to create the buttons 3 different times. When I click one button I want one ajax request to fire. Instead what is currently happening is that one button click shows up as there button clicks and submits the ajax request 3 different times.
Here is the relevant javascript code in the blade file
$(document).ready(function(){
$('#add').click(function(e){
e.preventDefault();
var data = $(this).serialize();
$.post('progressSheetDynamic', data).done(function(response){
console.log(data);
});
});
});
I have tried many different things like using jQuery to change the button to be disabled after one click and returning false at the end of the jQuery function.
However, in each case one click is being read as three different clicks. So the data is logged to the console three times. Is there any way to make it so that when I click one button it only registers as one click instead of 3?
You are triggering the ajax on the form click, try it on the button click
$(document).ready(function(){
$('.styleButton').click(function(e){
e.preventDefault();
var data = $(this).closest('form').serialize();
$.post('progressSheetDynamic', data).done(function(response){
console.log(data);
});
});
});
I have a markup like this
<button type="button" class="btn btn-success pull-right add-customer" name="add-new-customer">Add New Cusomer</button>
so when the add new customer will be clicked it should show some message. like this
<?php
if(isset($_POST['add-new-customer'])) {
echo 'Set';
}
?>
but it is not doing isset for the button. So can somone tell me how to solve this using php. I have not used any kind of form. I want to simply check the button is set and show some message. Any help will be really appreciable. Thanks
This is because if you click a button within a form it doesnt actually submit the form.
Try using
<input type="submit" value="Submit" name="add-new-customer" />
EDIT:
Having just seen your comment, you must wrap the elements in a
<form>
Button elements aren't linked to anything in HTML. PHP won't detect if you click on a button.
You have to use a form or an AJAX query in order to populate the $_POST variable.
<form action="" method="post">
<input type="submit" value="Submit" name="add-new-customer" />
</form>
button type must be submit like type="submit" not type="button"
<button type="submit" class="btn btn-success pull-right add-customer" name="add-new-customer">Add New Cusomer</button>
also use form tag
i got following code i want to know which button pressed then pass the value to input box.
<button type="button" name="buttonpassvalue" value="1" onclick="">Value1</button>
<button type="button" name="buttonpassvalue1" value="2" onclick="">value 2 </button>
<?php
if buttonpassvalue pressed then add the buttonpassvalue value
<input type="text" name="value">
else
add value of buttonpassvalue1
?>
i am tried to solve but stock here.
please help me
thanks
The best way to do this is with Javascript.
As PHP is a server side language, it requires you to send some information to the server, meaning you would have to submit the form, and reload the page with the details of the request from the user.
With a javascript library like jQuery you can do something like the following.
<button class="some-button" value="1">Button 1</button>
<button class="some-button" value="2">Button 2</button>
<input type="hidden" name="buttonValue" class="button-value-hidden" />
<script>
$(document).ready(function(){
$('button.some-button').on('click', function(){
$('input.button-value-hidden').val($(this).val());
});
});
</script>
Now $_GET['buttonValue'] will contain your button value when the form is submitted.
Make sure you are including the jQuery library!