Can you please take a look at this Demo and let me know why I am not able to submit the Form (No Alert after clicking the Submit Button).
<div class="container">
<form id="target">
<div class="btn-group btn-group-xs pull-right" data-toggle="buttons">
<label class="btn btn-default yesactive active ">
<input type="radio" name="options" id="option1"><span class="glyphicon glyphicon-ok" />
</label>
<label class="btn btn-default noactive">
<input type="radio" name="options" id="option2"><span class="glyphicon glyphicon-remove" />
</label>
</div>
<button type="button" class="btn btn-default btn-sm" id="submit">Submit</button>
</form>
</div>
<script>
$( "#target" ).on( "submit", function( e ) {
alert("Handler for");
e.preventDefault();
});
</script>
Change
<button type="button" class="btn btn-default btn-sm" id="submit">Submit</button>
To
<button type="submit" class="btn btn-default btn-sm" id="submit">Submit</button>
You are calling the event on "Submit", but in your button the type of the button is not submit. If you change to submit then it will cater for the submit event.
http://jsfiddle.net/s3774/13/
Try this one out. JQuery uses an input of type submit for form submissions.
Related
I am trying to incorporate into a button group 2 forms and a page redirect, using Bootstrap 3 and Laravel 5.2.
I cannot get the buttons to format correctly, primarily because two of them are wrapped by a "form" element.
My HTML is as follows:
<div class="btn-group pull-left">
<a class="btn btn-primary btn-sm" href="{!! route('client.create') !!}">
<i class="ion-plus"></i> New
</a>
{!! Form::open(['route' => 'client.allVisible', 'method' => 'post']) !!}
<input name="visibility" class="hidden" value="true">
<button type="submit" class="btn btn-primary btn-sm">
<i class="ion-ios-eye"></i> Visible
</button>
{!! Form::close() !!}
{!! Form::open(['route' => 'client.allVisible', 'method' => 'post']) !!}
<input name="visibility" class="hidden" value="false">
<button type="submit" class="btn btn-primary btn-sm">
<i class="ion-ios-locked"></i> Hidden
</button>
{!! Form::close() !!}
</div>
Is this possible without using jQuery? Thanks!
The below link has a working solution that should work for you
How to group buttons in different forms tags in Bootstrap
Create multiple BTN Form Groups
http://jsfiddle.net/isherwood/TRjEp/
<br />
<form class="btn-group">
<button class="btn">Button One</button>
<input type="hidden" class="btn" />
</form>
<form class="btn-group inline">
<input type="hidden" class="btn" />
<button class="btn">Button Two</button>
</form>
<form class="btn-group inline">
<input type="hidden" class="btn" />
<button class="btn">Button Three</button>
</form>
Additional CSS:
.btn-group+.btn-group {
margin-left: -5px;
}
The code seems to work with that HIDDEN Btn, not sure why.
I not sure how to code works, but this works for me in datatables column:
<div class="btn-group btn-group-sm">
<?php echo form_open('edit_files', 'class="btn-group"');?>
<button type="submit" class="btn btn-primary" name="id">Edit</button>
</form>
<?php echo form_open('view_files', 'class="btn-group"');?>
<button type="submit" class="btn btn-success" name="id">View</button>
</form>
I would like to have ajax submit (without reloading the page) on multiple inputs.
So I have a form which has several input fields with edit and save buttons. When a user click on edit, it focuses on that input field and save with ajax.
The question is, how to make the save button with ajax submit without reloading the page and only that edited field will be changed on save.
Here's my html and js:
HTML
<br>
<br>
<label>Fullname</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Fullname" value="John Doe" readonly> <span class="input-group-btn">
<button class="btn btn-default btn-edit" type="button">EDIT</button>
<button class="btn btn-default btn-save" type="button">SAVE</button>
<button class="btn btn-default btn-cancel" type="button">CANCEL</button>
</span>
</div>
<br>
<label>Nickname</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Nickname" value="John" readonly> <span class="input-group-btn">
<button class="btn btn-default btn-edit" type="button">EDIT</button>
<button class="btn btn-default btn-save" type="button">SAVE</button>
<button class="btn btn-default btn-cancel" type="button">CANCEL</button>
</span>
</div>
JS
jQuery(document).ready(function () {
$('.btn-save, .btn-cancel').hide();
var inputVal;
$('.btn-edit').click(function () {
$(this).closest('div').find('.btn-edit').hide();
$(this).closest('div').find('.btn-save, .btn-cancel').show();
$(this).closest('div').find('input').removeAttr('readonly').focus();
inputVal = $(this).closest('div').find('input').val();
});
$('.btn-save').click(function () {
$(this).closest('div').find('input').attr('readonly', 'readonly');
$(this).closest('div').find('.btn-save, .btn-cancel').hide();
$(this).closest('div').find('.btn-edit').show();
});
$('.btn-cancel').click(function () {
$(this).closest('div').find('input').val(inputVal);
$(this).closest('div').find('input').attr('readonly', 'readonly');
$(this).closest('div').find('.btn-save, .btn-cancel').hide();
$(this).closest('div').find('.btn-edit').show();
});
});
I created a demo on JSFiddle. Please help....
DEMO
In your save button put ajax request onclick:
$('.btn-save').click(function () {
$(this).closest('div').find('input').attr('readonly', 'readonly');
$(this).closest('div').find('.btn-save, .btn-cancel').hide();
$(this).closest('div').find('.btn-edit').show();
var inputValue=$(this).closest('div').find('input').val();
$.ajax({ URL:"submit url",
type:"POST",
data:{ inputValue:inputValue },
success:function(data){
// do whatever you want with the response
}
});
});
Please read more about jQuery ajax documentation as what Euphoria said.
In my controller i have methods
$scope.openJukeboxesModalToGroup -- open modal popup
$scope.searchJukeboxes --- to search on the page
$scope.keyPressed -- capture the key pressing
In the partial with a form
<form class="form-inline" role="form" ng-submit="deadForm()">
<div class="form-group">
<button ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
</div>
<div class="form-group">
<input type="text" ng-model="jukeboxFilter" ng-keypress="keyPressed($event, 'search')" class="form-control" placeholder="search">
</div>
<button type="button" ng-click="searchJukeboxes()" class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" ng-click="resetFilter()" class="btn btn-info"><span class="glyphicon glyphicon-repeat"></span></button>
</form>
keyPressed method is
$scope.keyPressed = function($event, eventType) {
$event.stopImmediatePropagation();
if(eventType=='search') {
if($event.which==13) {
$scope.searchJukeboxes();
}
}
};
I am trying to start the search whenever ever somebody types something in the text bar and clicks enter. But i don't somehow the openJukeboxesModalToGroup() method is called too. I have tried to stop this by calling stop event proprpagation, changing name of openJukeboxesModalToGroup() method. But nothing is working. Any help on this.
deadForm() method is impleament and i am not getting any error in chrome console.
Change your button for openJukeBoxesModalToGroup() to this:
<button type="button" ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
The issue is you are not providing a type so it is classing the button as a submit in which case openJukeboxesModalToGroup() is being fired from your enter submit event.
When you are hitting enter inside a form it will trigger a submission, I recommend adding your method to the form itself via the ng-submit directive and making your button the submission...
<form class="form-inline" role="form" ng-submit="searchJukeboxes()">
<div class="form-group">
<button type="button" ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
</div>
<div class="form-group">
<input type="text" ng-model="jukeboxFilter" ng-keypress="keyPressed($event, 'search')" class="form-control" placeholder="search">
</div>
<button type="submit" ng-click="searchJukeboxes()" class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" ng-click="resetFilter()" class="btn btn-info"><span class="glyphicon glyphicon-repeat"></span></button>
</form>
I've been playing with this for the last hour and can't seem to figure out how to have one button toggle at a time. Also trying to have the button change to different color So if I click button1 it toggles. If I then click button2, then button1 untoggles and button2 toggles.
Here's what I have so far
<div class="Demo-boot" style="padding:30px;">
<button type="button" class="btn btn-primary" data-toggle="button">Button1</button>
<button type="button" class="btn btn-primary" data-toggle="button">Button2</button>
</div>
Here it is in action:
http://www.bootply.com/MaxkTJs3HH
You need to set it up in a button group like this::
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Button 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Button 2
</label>
</div>
first add some ids to the buttons
<div class="Demo-boot" style="padding:30px;">
<button id="button_one" type="button" class="btn btn-primary" data-toggle="button">Button1</button>
<button id="button_two" type="button" class="btn btn-primary" data-toggle="button">Button2</button>
</div>
Next add some jquery
$('#button_one').click(function (e) {
$('#button_two').removeClass('active')
});
$('#button_two').click(function (e) {
$('#button_one').removeClass('active')
});
the running product : http://www.bootply.com/tT4yYWxjyk
I have four buttons like this
<div class="btn-group">
<button id="btn-men" class="btn btn-default active"
i18n:translate="men">Men</button>
<button id="btn-women" class="btn btn-default" i18n:translate="women">Women</button>
<button id="btn-kids" class="btn btn-default" i18n:translate="kids">Kids</button>
</div>
And I have different css styles for the class "btn btn-default active" and "btn btn-default". what I want to know is if there is any way of changing the class name of the clicked button as btn btn-default active from btn btn-default and also change the unclicked button as btn btn-default during run time.
I also use i18n for mulitilingual purpose.
Use addClass() and removeClass() for this purpose
$(".btn-default").click(function() {
$(".active").removeClass("active");
$(this).addClass("active");
});
Demo
Looks like you are using bootstrap, so solve it using bootstrap way
<div class="btn-group" data-toggle="buttons">
<label id="btn-men" class="btn btn-default active">
<input type="radio" name="options" id="option1" checked /> Men
</label>
<label id="btn-women" class="btn btn-default">
<input type="radio" name="options" id="option2"/> Women
</label>
<label id="btn-kids" class="btn btn-default">
<input type="radio" name="options" id="option3"/> Kids
</label>
</div>
Demo: Fiddle
Look at the radio example under bootstrap buttons