Detect button click on form item - javascript

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.

Related

CSS: Depress Dropdown grouped with Radio Buttons

I'm using bootstrap to style a group of radio buttons that also include a dropdown.
When the user selects an option from the dropdown OTHER is not included as one of the radio buttons, so it looks like the last depressed radio button has been chosen when really C | D | E has been.
Is it possible to include the OTHER dropdown as one of the radio buttons so it looks depressed when the user selected C,D,E?
Codepen here if helpful: https://codepen.io/mayagans/pen/qBdaZEJ
$( document ).ready(function() {
$("input[name='test']").change(function(){
$("#results").text($("input[name='test']:checked").val());
});
});
$(".dropdownitems").click(function () {
var value = $(this).attr("href");
document.getElementById("results").innerHTML = value
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" data-toggle="buttons">
<label id='RADIO' class="btn btn-primary">
<input type="radio" name="test" id="testNONE" autocomplete="off" value="NONE">NONE
</label>
<label class="btn btn-primary">
<input type="radio" name="test" id="testA" autocomplete="off" value="A">A
</label>
<label class="btn btn-primary">
<input type="radio" name="test" id="testB" autocomplete="off" value="B">B
</label>
<div class="btn-group">
<label class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<input type="radio" class="" name="test" id="OTHER" autocomplete="off">OTHER<span class="caret"></span>
</label>
<ul class="dropdown-menu">
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</div>
</div>
<div id="results"></div>
I don't think that radio buttons are the good solution for this. You could just use "simple" buttons. Anyway, with bootstrap, you could add "active" to the button ( or radio button) class so that it will be shown as if it was pressed.
With single button
Pressed
<button type="button" class="btn btn-primary active">Click Me!</button>
Normal
<button type="button" class="btn btn-primary">Click Me!</button>
With your radio button it's the same
Pressed
<label class='btn btn-primary active'>
<input type='radio' name='test' id='testA' autocomplete='off' value='A'>A
</label>
Normal
<label class='btn btn-primary'>
<input type='radio' name='test' id='testA' autocomplete='off' value='A'>A
</label>
Example
<script>
$(document).ready(function () {
let pressedId
let buttonsId = ["a", "b"] // List of the buttons which are always visible
let dropDownsButtonId = ["c", "d", "e"] //List of the buttons of the dropdown
$("button").click(function () {
if (buttonsId.includes(this.id)) { //First "if" for "always visible" button
changeClass(this.id)
} else if (dropDownsButtonId.includes(this.id)) {//Second if for the button of the dropdown
changeClass("dropDownMenuButton")
}
})
function changeClass(id) {
if (pressedId !== undefined)
document.getElementById(pressedId).className = document.getElementById(pressedId).className.replace(" active", "")
document.getElementById(id).className += " active"
pressedId = id
}
})
</script>
<button type="button" class="btn btn-primary" id="a">a</button>
<button type="button" class="btn btn-primary" id="b">b</button>
<div class="dropdown">
<div class='btn-group'>
<button class="btn btn-primary dropdown-toggle" type="button" id="dropDownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<ul class='dropdown-menu'>
<li>
<button type="button" class="btn btn-primary" id="c">c</button>
</li>
<li>
<button type="button" class="btn btn-primary" id="d">d</button>
</li>
<li>
<button type="button" class="btn btn-primary" id="e">e</button>
</li>
</ul>
</div>
</div>

Plus and minus button (Javascript)

I have tried out the add and minus button.
The thing i am trying to do is if i have selected 10 bus tickets, then how do i write a javascript function to limit the maximum of the input. For instance, if adult is increment by 1, then the maximum input for the child will be changed into 9.
Here is my code
function myFunction() {
var adult = document.getElementByID("adult").value;
var child = document.getElementByID("child").value;
var maxAdult = document.getElementByID("adult").max;
var maxChild = document.getElementByID("child").max;
if (adult + 1) {
maxChild = -1;
}
if (adult + 1) {
maxAdult = -1;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="input-group" style="width: 150px;margin: 20px;">
<span class="input-group-btn"> <!-- This is for adult tickets -->
<button type="button" class="btn btn-default btn-number" data-type="minus" data-field="quant1">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant1" id="adult" class="form-control input-number" value="0" min="0" max="<?php echo 10 ?>" onchange="myFunction()">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant1">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
<div class="input-group" style="width: 150px;margin: 20px;">
<span class="input-group-btn"> <!-- This is for child tickets -->
<button type="button" class="btn btn-default btn-number" data-type="minus" data-field="quant1">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant1" id="adult" class="form-control input-number" value="0" min="0" max="<?php echo 10 ?>" onchange="myFunction()">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant1">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
const all_count = 10;
let adult_count = 0;
let child_count = 0;
$('.btn-number').on("click", function() {
let role = $(this).closest("div").attr("id");
let type = $(this).attr("data-type");
switch (role) {
case 'adult':
switch (type) {
case 'plus':
if ((adult_count + child_count) < all_count)
adult_count++;
break;
case 'minus':
if (adult_count != 0)
adult_count--;
break;
}
$('#adult_input').val(adult_count);
break;
case 'child':
switch (type) {
case 'plus':
if ((adult_count + child_count) < all_count)
child_count++;
break;
case 'minus':
if (child_count != 0)
child_count--;
break;
}
$('#child_input').val(child_count);
break;
}
});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h4>This is for adult tickets</h4>
<div id="adult">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="minus" data-field="quant1">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant1" id="adult_input" class="form-control input-number" value="0" min="0" max="5">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant1">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
<h4>This is for child tickets</h4>
<div id="child">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="minus" data-field="quant1">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant1" id="child_input" class="form-control input-number" value="0" min="0" max="5">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant1">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</body>
</html>
You snippet has some errors for example child input has same id. but easiest way to make dynamic max be attache event on adult input
<input type="number" name="quant1" id="adult" class="form-control input-number" value="0" min="0" max="5" onchange="document.getElementById('child').max = 10 - e.target.value">
Please refer below code.
$("#adultMinus").click(function() {
$("#child").val(0);
if (parseInt($("#adult").val()) != 0) {
let result = parseInt($("#adult").val()) - 1;
$("#adult").val(result);
let maxLimit = 10 - parseInt($("#adult").val());
$("#child").attr({
"max": maxLimit,
});
}
})
$("#adultPlus").click(function() {
$("#child").val(0);
let result = parseInt($("#adult").val()) + 1;
$("#adult").val(result);
let maxLimit = 10 - parseInt($("#adult").val());
$("#child").attr({
"max": maxLimit,
});
})
$("#childMinus").click(function() {
if (parseInt($("#child").val()) != 0) {
let result = parseInt($("#child").val()) - 1;
$("#child").val(result);
}
})
$("#childPlus").click(function(event) {
var maxLength = parseInt($("#child").attr("max"));
let result = parseInt($("#child").val()) + 1;
if (result > maxLength) {
alert("Max child limit is: "+maxLength);
event.preventDefault();
return false;
} else {
$("#child").val(result);
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<lable>Adult Ticket Count: </lable>
<button id="adultMinus" class="btn btn-danger">-</button>
<input type="number" name="quant1" id="adult" value="0" min="0">
<button id="adultPlus" class="btn btn-success">+</button>
</div><br/><br/>
<div class="container">
<lable>Child Ticket Count: </lable>
<button id="childMinus" class="btn btn-danger">-</button>
<input type="number" style="min-width:160px" name="quant1" id="child" value="0" min="0">
<button id="childPlus" class="btn btn-success">+</button>
</div>

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).

Change enabled to disabled and disabled to enable the bootstrap with jquery

How do I change the input from disabled to enabled when clicks and returns from disabled to enabled when clicked
HTML
<div class="col-md-2">
<input type="text" class="form-control" id="tes" name="tes" />
</div>
<br>
<div class="col-md-3">
<button type="submit" id="submit1" class="glyphicon glyphicon-ok success btn btn-primary btn" value=""> </button>
</div>
JQUERY
$('#submit1').click(function() {
$('#tes').prop("disabled",true);
$(this).toggleClass('glyphicon glyphicon-ok').toggleClass('glyphicon glyphicon-remove btn-danger');
});
Use this Generalized function in your project to make things enabled / disabled.
(function($) {
$.fn.toggleDisabled = function(){
return this.each(function(){
this.disabled = !this.disabled;
});
};
})(jQuery);
$('#submit1').click(function() {
$('#tes').toggleDisabled();
$(this).toggleClass('glyphicon glyphicon-ok').toggleClass('glyphicon glyphicon-remove btn-danger');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2">
<input type="text" class="form-control" id="tes" name="tes" />
</div>
<br>
<div class="col-md-3">
<button type="submit" id="submit1" class="glyphicon glyphicon-ok success btn btn-primary btn" >Button </button>
</div>
You can use this one.
$('#submit1').click(function() {
$('#tes').prop("disabled",!$('#tes').prop("disabled"));
$(this).toggleClass('glyphicon glyphicon-ok').toggleClass('glyphicon glyphicon-remove btn-danger');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2">
<input type="text" class="form-control" id="tes" name="tes" />
</div>
<br>
<div class="col-md-3">
<button type="submit" id="submit1" class="glyphicon glyphicon-ok success btn btn-primary btn" value="Submit">SUbmit </button>
</div>
.prop(property) will return whether the property is set. You can use this to check the value and toggle it based on it's current value.
if( $('#tes').prop("disabled") )
$('#tes').prop("disabled",false);
else
$('#tes').prop("disabled",true);
You could reduce this to:
$('#tes').prop("disabled", !$('#tes').prop("disabled") )
This fetches the current value of the property, negates it with !, then sets that as the new value
If what you want is to toggle the disable prop:
$('#submit1').click(function() {
$('#tes').prop("disabled", !$('#tes').prop("disabled"));
});

Combine button group with forms - Bootstrap 3

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>

Categories