Combine button group with forms - Bootstrap 3 - javascript

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>

Related

Detect button click on form item

I have a list of store items. Each item is showing its values as a form.
<?php
if($statement->execute())
{
$result = $statement->fetchAll();
$output = '';
foreach($result as $row)
{
$output .= '
<div class="col-md-3" style="margin-top:12px;">
<div class="item-content" align="center">
<div class="img-container">
<img src="../administrar/application/admin/productos/'.$row["image"].'" class="img-responsive" /><br />
<h4 class="text-info">'.$row["name"].'</h4>
<h4 class="text-danger">$ '.$row["price"] .'</h4>
<input type="text" name="quantity" id="quantity' . $row["id"] .'" class="form-control" value="1" style="text-align:right;"/>
<input type="hidden" name="hidden_name" id="name'.$row["id"].'" value="'.$row["name"].'" />
<input type="hidden" name="hidden_price" id="price'.$row["id"].'" value="'.$row["price"].'" />
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-number" name="restar" id="'.$row["id"].'" " >
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-number" name="sumar" id="sumar"">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
<input type="button" name="add_to_cart" id="'.$row["id"].'" style="margin-top:5px;" class="btn btn-success form-control add_to_cart" value="Add to Cart" />
</div>
</div>
</div>
';
}
}
?>
I need to identify when the user clicks on button 'restar' from a certain form item.
This is my current script, but it doesn't launch the expected alert.
<script type="text/javascript">
$(document).ready(function(){
var product_id = $(this).attr("id");
$('#restar'+'product_id+').on('click', function(event) {
alert("ssssspp2");
});
});
</script>
Use class for describing similar objects, e.g.:
$('.js-some-btn').click(function() {
console.log("I'm button");
console.log("My id is " + $(this).attr('id'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-success btn-number js-some-btn" name="sumar1" id="id1">btn 1</button>
<button type="button" class="btn btn-success btn-number js-some-btn" name="sumar2" id="id2">btn 2</button>
This approach allows you to write only one click handler for all buttons with provided class.

When i click edit button all the buttons are getting clicked with same username

I'm making a app in which there is option for a user to add a comment and also to delete and modify it but when i click edit button , every button gets called and a edit block shows for every comment created by that user.
I'm running js on backend in node js,mongodb and express js as framework
...HTML
<div class='card-body'>
<%campground.comments.forEach(comment=>{ %>
<div class='row'>
<div class='col-md-12'>
<strong><%=comment.author.username%></strong>
<span class='float-right'>10 days ago</span>
<p ><%=comment.text %></p>
<%if(currentUser){ if(currentUser.username==comment.author.username) { %>
<form class='cmtForm py-3' action='/campgrounds/<%=campground._id%>/comments/<%=comment.author.username%>/<%=comment._id%>?_method=PUT' method='POST'>
<textarea class="form-control" rows="3" name='updateComment'><%=comment.text%></textarea>
<button class=' btn btn-success btn-sm m-3 float-right'>
Update
</button>
</form>
<button class='editBtn sel btn btn-secondary btn-sm float-right' id='<%=comment._id %>' >Edit</button>
<form action='/campgrounds/<%=campground._id%>/comments/<%=comment._id%>?_method=DELETE' method='POST'>
<button class='btn btn-danger btn-sm mr-2 float-right ' >Delete</button>
</form>
</div>
<%}}%>
</div>
</div>
<% }); %>
</div>
//..JS//
$('.cmtForm').css('display','none');
let status=true;
$('.editBtn').on('click',(event)=>{
if(status){
$('.sel').text('cancel');
$('.cmtForm').css('display','block');
// $('.cmtForm').addClass('cmtForm form-control show');
}
else{
$('.sel').text('edit');
$('.cmtForm').css('display','none');
// $('.cmtForm').removeClass('cmtForm form-control hide');
}status=!status;
});
//Edit button should unhide particular comment section
As I mentioned in the comment to the original post, you have the same class for all buttons where the action is performed and also the same class of elements you are changing on the click event. This is the reason when click action is performed all the comments etc. are changing.
Since every set of elements (comment, edit button, etc.) are enclosed within a div you may use siblings() function to select the specific elements for changing stuff.
Here is the demonstration with two rows having similar elements:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
console.log("ready");
$(".b").click(function () {
$(this).siblings('.h').text("hello");
});
});
</script>
<div>
<label class="h">first</label>
<button class="b">Edit</button>
</div>
<div>
<label class="h">second</label>
<button class="b">Edit</button>
</div>
The key part is:
// same button element
$(event.target).text('cancel');
// sibling
$(event.target).siblings('.cmtForm').css('display', 'block');
Your JS code after modification will look like the following. I removed dynamic elements to make it executable.
<div class='card-body'>
<div class='row'>
<div class='col-md-12'>
<strong>User 1</strong>
<span class='float-right'>10 days ago</span>
<p>Comment 1</p>
<form class='cmtForm py-3'
action='/campgrounds/<%=campground._id%>/comments/<%=comment.author.username%>/<%=comment._id%>?_method=PUT'
method='POST'>
<textarea class="form-control" rows="3" name='updateComment'>Comment 1</textarea>
<button class=' btn btn-success btn-sm m-3 float-right'>Update</button>
</form>
<button class='editBtn sel btn btn-secondary btn-sm float-right' id='<%=comment._id %>'>Edit</button>
<form action='/campgrounds/<%=campground._id%>/comments/<%=comment._id%>?_method=DELETE' method='POST'>
<button class='btn btn-danger btn-sm mr-2 float-right '>Delete</button>
</form>
</div>
</div>
<div class='row'>
<div class='col-md-12'>
<strong>User 2</strong>
<span class='float-right'>10 days ago</span>
<p>Comment 2</p>
<form class='cmtForm py-3'
action='/campgrounds/<%=campground._id%>/comments/<%=comment.author.username%>/<%=comment._id%>?_method=PUT'
method='POST'>
<textarea class="form-control" rows="3" name='updateComment'>Comment 2</textarea>
<button class=' btn btn-success btn-sm m-3 float-right'>Update</button>
</form>
<button class='editBtn sel btn btn-secondary btn-sm float-right' id='<%=comment._id %>'>Edit</button>
<form action='/campgrounds/<%=campground._id%>/comments/<%=comment._id%>?_method=DELETE' method='POST'>
<button class='btn btn-danger btn-sm mr-2 float-right '>Delete</button>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$('.cmtForm').css('display', 'none');
let status = true;
$('.editBtn').on('click', (event) => {
if (status) {
$(event.target).text('Cancel');
$(event.target).siblings('.cmtForm').css('display', 'block');
// $(this).siblings('.cmtForm').addClass('cmtForm form-control show');
}
else {
$(event.target).text('Edit');
$(event.target).siblings('.cmtForm').css('display', 'none');
// $(this).siblings('.cmtForm').removeClass('cmtForm form-control hide');
}
status = !status;
});
</script>
Note: In your code, you are using a global variable status to control hide/display comment and changing button label. All rows (items) use the same status so you'll have an issue. Instead, you need to maintain status for every row (item).

Hide element if webcam is not detected (jhuckaby WebcamJS)

I'm using jhuckyaby WebcamJS. If there is no detected webcam show the id #forHide, else show the id #upload:
<div class="row" id="forHide">
<div class="d-inline-block ml-3">
<div id="my_camera" class="mb-2"></div>
<input type=button value="Configure" class="btn btn-primary btn-sm ml-1" onClick="configure()">
<input type=button value="Take Snapshot" class="btn btn-primary btn-sm" onClick="take_snapshot()">
<input type=button value="Save Snapshot" class="btn btn-primary btn-sm" onClick="saveSnap()">
</div>
<div class="d-inline-block ml-5">
<div id="results"></div>
</div>
</div>
<div id="upload">
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
</div>
I read the docs on GitHub and I tried to implement this code but somehow no result.
Webcam.on( 'error', function(err) {
// hide element
} );
Check below code to hide forHide id using pure JavaScript:
Webcam.on('error', function(err) {
var x = document.getElementById("forHide");
x.style.display = "none";
});
For more information read this : https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

how to redirect bootstrap cancel button in cakephp

I have a cancel button and I want to redirect on everything.ctp page and I have also a function everything() in ApplicationsController. Below is cancel button code:
<div class="col-md-6">
<input type="submit" name="submit" value="Submit" class="btn btn-primary ">
Cancel
</div>
I solved the problem. I have just give the url in href. Check below code:
<div class="row">
<div class="col-md-6">
<input type="submit" name="submit" value="Submit" class="btn btn-primary ">
<a href="http://localhost:7777/eman_test/applications/everything"
class="btn btn-info">Cancel</a>
</div>
It's more preferable to do it in "CakePHP" way:
<div class="col-md-6">
<?php
echo $this->Form->input('submit', ['type'=>'submit', 'value'=>'Submit', 'class'=>'btn btn-primary']);
echo $this->Html->link(__('Cancel', ['controller' => 'Applications', 'action' => 'everything'], ['class' => 'btn btn-info', 'escape' => false]);
?>
</div>

Issue on Submitting a Form using jQuery

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.

Categories