I have a problem with my code using the bootstrap plugin.
I have some radio buttuns in the following code:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
</label>
</div>
I want to put a button to reset the selection. I've tried a reset button (<button type="reset">), jQuery commands, but all fail.
In the Bootstrap API I found an explanation:
http://getbootstrap.com/javascript/#buttons-checkbox-radio
that says:
Visual checked state only updated on click If the checked state of a
checkbox button is updated without firing a click event on the button
(e.g. via or via setting the checked property of
the input), you will need to toggle the .active class on the input's
label yourself.
Please someone could help me find a solution to my problem?
Thanks,
Gabriel.
First of all, you need to remove active class from label tag, then make the properties checked element on radio into false state, try this simple example below :
$('button').click(function () {
$('.btn-group').find('label').removeClass('active')
.end().find('[type="radio"]').prop('checked', false);
});
DEMO
$("button").on('click', function() {
$("input:radio").prop('checked', false);
$("input:radio").closest("label").removeClass("active");
})
This jQuery code should help you. When you click a button, it removes the checked property from all radios and toggles the class of the label as the API says
Have you tried creating a button with id "reset" and add use jQuery to remove the active class?
$("#reset").click( function() {
$(".btn").each( function() {
this.removeClass("active");
});
});
Add Button.prototype.toggle in bootstrap.js line 225
if ($input.prop('type') == 'radio' && !changed) {
this.$element.removeClass('active');
$input.prop('checked', false).trigger('change');
}
Related
I have Laravel 5.5 a page that has two forms but uses the same controller and method. First form is to cater for initial details but the second form is a search form. My search form works but only if you click the search button twice is there a way I could force to click once to submit that form.
View
<form name="FormSearch" id="FormSearch" method="post" action="{!! action(MyController#index',$customID) !!}">
<input type="text" name="searchDets" id="searchDets" value="" />
<input type="submit" class="btn btn-default" name="searchMe" id="searchMe" value= "Search Me"/>
</form>
Js
$('#FormSearch').click(function(e){
e.preventDefault();
$('#filterSearchForm').submit();
});
I would like my view page to submit once.
First of all, I couldn't find the element with id filterSearchForm, so, here is an edit that I made that submits the same form (i.e. FormSearch) when you click on it:
$('#FormSearch').click(function(e){
//e.preventDefault();
$('#FormSearch').trigger('submit');
});
I have used the trigger event that is fired which submits the form FormSearch when you click on the form FormSearch.
Here is it how it works:
$('#FormSearch').click(function(e) {
//e.preventDefault();
$('#FormSearch').trigger('submit');
});
$("#FormSearch").submit(function(e){
e.preventDefault();
alert('submitted');
});
#FormSearch{
background: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="FormSearch" id="FormSearch" method="post" action="{!! action(MyController#index',$customID) !!}">
<input type="text" name="searchDets" id="searchDets" value="" />
<input type="submit" class="btn btn-default" name="searchMe" id="searchMe" value="Search Me" />
</form>
<p>
** Click anywhere on the black area.
</p>
I hope this was helpful.
I have faced the same issue and it was due to js version . So please check your jquery.validate's version.
You can get more information here submit button twice click issue
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 used jQuery validation. And using twitter bootstrap 2.3.2. Error message will display when I click the submit button. If I click the error message means the text box get focussed. How can I lost the focus ?
<input type="file" name="type1" id="type1">
<label for="type1">This field is required</label>
You could try the following:
$(function(){
$('input').blur();
});
Use this:
<input type="file" name="type1" id="type1">
<label for="type1" onmousedown="return false;" onclick="return false;">This field is required</label>
The onlcick and onmousedown "return false;" will disable the default browser behavior.
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!
I have a page in where users can ask questions.
When they move on to the next page, I need to do a mysql query and post all the asked question into the database. I use jquery to hide the answers and show them when clicking the corresponding button.
The structure of the page looks like this:
<!-- questions.php -->
<form action="submitquestions.php" method="post">
<div>
<span>This is a question</span>
<button name="question" value="question1">Ask the question</button>
<span>This is the answer</span>
</div>
<div>
<span>This is a question</span>
<button name="question" value="question2">Ask the question</button>
<span>This is the answer</span>
</div>
<div>
....
</div>
<button name="submit">Go to the next page</button>
</form>
<!-- submitquestions.php -->
<?php if (isset($_POST['submit'])) {
var_dump($_POST);
} ?>
How can I put all the clicked buttons into the $_POST array and that way submit the data to my database?
Considered using checkboxes? You could style them nicely with jQuery as well. You really shouldn't use <button>s anyway.
Simply use <input type="checkbox" name="question1"> then the jQueryUI buttons and checkboxes to style it. Make sure your disable it once it has been checked so it doesn't get undone.
Then in PHP, check if(isset($_POST['question1'] )) { to see if a box has been checked.
Thanks for feedback from comments.
Here's my solution:
<form action="submitquestions.php" method="post">
<div>
<span>This is a question</span>
<input type="checkbox" name="question[]" value="question1" style="display:none">
<button>Ask the question</button>
<span>This is the answer</span>
</div>
<div>
<span>This is a question</span>
<input type="checkbox" name="question[]" value="question2" style="display:none">
<button>Ask the question</button>
<span>This is the answer</span>
</div>
<div>
....
</div>
<button name="submit">Go to the next page</button>
</form>
<script>
$(document).ready(function(){
$("form button").click(function(){
$(this).prev(":checkbox").attr("checked", true);
});
});
</script>
<!-- submitquestions.php -->
<?php if (isset($_POST['submit'])) {
if(!isset($_POST['question'])) $_POST['question'] = array(); //Just in the case no button is pressed
//$_POST['question'] will have an array of all clicked questions.
var_dump($_POST);
} ?>
As you can see, we use 'hidden' checkboxes 'behind' each button, that check when a button is pressed. And, as our buttons don't have name but checkboxes do, we send only the checked checkboxes to the server.
$_POST['question'] will have an array of all clicked questions. No 'isset' per question needed
If you use <button type="submit" name="this button's unique name goes here" value="1">Button text goes here</button> then you can check for the button that triggered the submit with $_POST ['this button's unique name goes here'] == 1
At least in theory you can. Internet Explorer prior to version 8 mishandles the <button> tag quite badly. In internet explorer 6 it is in fact basically impossible to determine which button was clicked if you use the <button> tag.
http://www.w3schools.com/tags/tag_button.asp