We Keep Coding

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.

How to get specific ID from multi ID?

In my case, I want to make plus or minus button with add or minus to count number into text box. I can do it. But I've got the error. There have multi row with same design but different ID (I mean working with auto increment ID). When I click on plus button of top or middle row but it doesn't work on it's own row. It's always work on the last row.
Here is my Screenshot
Here is my HTML in JQuery Code. When Click on Add button at right top corner, this code work. It's doesn't the problem.
<input id="qty1" type="text" class="form-control dateadd" style="border- radius:0px;" name="count_date[]" value="0">
Here is my processing JQuery codes.
var test;
$('.dateadd').each(function() {
var test = this.id;
console.log("ID is",test, "Hello, world!");
});
$(document).ready(function(){
$('.plus').click( function() {
var counter = $(test).val();
counter++ ;
$(test).val(counter);
});
});
$(document).ready(function(){
$('.minus').click( function() {
var counter = $(test).val();
counter-- ;
$(test).val(counter);
});
});
Here is my Row HTML Code
<div class="col-sm-5" style="padding-right:0;">
<div class="input-group">
<span class="input-group-btn">
<a class="btn btn-default plus" type="button" style="background-color:#7ec1cb;color:#fff;border-radius:0px;">＋</a>
<a class="btn btn-default minus" style="color:#7ec1cb;border-radius:0px;">－</a>
</span>
<input type="text" class="form-control qty" style="border-radius:0px;" name="count_date[]" value="0">
</div>
</div>
Here is my Row Add Jquery + HTML Code
var perDayHtml = '<div class="col-sm-5" style="padding-right:0;">'+
'<div class="input-group">'+
'<span class="input-group-btn">'+
'<a class="btn btn-default plus" type="button" style="background-color:#7ec1cb;color:#fff;border-radius:0px;">＋</a>'+
'<a class="btn btn-default minus" style="color:#7ec1cb;border-radius:0px;">－</a>'+
'</span>'+
'<input id="qty1" type="text" class="form-control dateadd" style="border-radius:0px;" name="count_date[]" value="0">'+
'</div>'+
'</div>'
$("#optionBox").on('click', '.addPerDay', function(){
$('.remove').prop('disabled', false);
if (rowNo<maxi && rowNo<minusmaxi) {
rowNo++;
plan++;
$(".perDay:last").after(perDayHtml.replace(/qty1/g,"qty" + rowNo));

I guess that you've plus/minus button in same div with the dateadd input so you could just go up to the parent div then find the dateadd input :
$(document).ready(function(){
$('body').on('click', '.plus', function() {
var parent = $(this).closest('div');
var counter = parseInt(parent.find('.qty').val());
counter++ ;
parent.find('.qty').val(counter);
});
$('body').on('click', '.minus', function() {
var parent = $(this).closest('div');
var counter = parseInt(parent.find('.qty').val());
counter-- ;
parent.find('.qty').val(counter);
});
});
NOTE 1: NO need for multiple ready function.
NOTE 2: You should use event delegation .on() instead of .click() since your code is added dynamically to the DOM.
NOTE 3: Check in minus click event if the qte is greater than 0 before decreasing the counter :
counter>0?counter--:counter;
Hope this helps.
$(document).ready(function(){
$('body').on('click', '.plus', function() {
var parent = $(this).closest('div');
var counter = parseInt(parent.find('.qty').val());
counter++ ;
parent.find('.qty').val(counter);
});
$('body').on('click', '.minus', function() {
var parent = $(this).closest('div');
var counter = parseInt(parent.find('.qty').val());
counter>0?counter--:counter;
parent.find('.qty').val(counter);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="input-group">
<span class="input-group-btn">
<a class="btn btn-default plus" type="button" style="background-color:#7ec1cb;color:#fff;border-radius:0px;">＋</a>
<a class="btn btn-default minus" style="color:#7ec1cb;border-radius:0px;">－</a>
</span>
<input type="text" class="form-control qty" style="border-radius:0px;" name="count_date[]" value="0">
</div>
<div class="input-group">
<span class="input-group-btn">
<a class="btn btn-default plus" type="button" style="background-color:#7ec1cb;color:#fff;border-radius:0px;">＋</a>
<a class="btn btn-default minus" style="color:#7ec1cb;border-radius:0px;">－</a>
</span>
<input type="text" class="form-control qty" style="border-radius:0px;" name="count_date[]" value="0">
</div>
<div class="input-group">
<span class="input-group-btn">
<a class="btn btn-default plus" type="button" style="background-color:#7ec1cb;color:#fff;border-radius:0px;">＋</a>
<a class="btn btn-default minus" style="color:#7ec1cb;border-radius:0px;">－</a>
</span>
<input type="text" class="form-control qty" style="border-radius:0px;" name="count_date[]" value="0">
</div>

How to change button text by verifying data are same or not when edited

I need one help.
I need to change button text according to some condition using Javascript/Jquery. I will explain my code below.
Here, when a user is selects the drop-down list, the 3 input field is filled with some value. the JavaScript code is given below.
function setValue(){
var arrField=[];
if(document.getElementById('uinfo').value==1){
document.getElementById('uname').value="Ram";
document.getElementById('uemail').value="subhra#gmail.com";
document.getElementById('ucity').value="cuttuck";
arrField.push({'uname':document.getElementById('uname').value,'uemail':document.getElementById('uemail').value,'ucity':document.getElementById('ucity').value});
}else{
document.getElementById('uname').value="";
document.getElementById('uemail').value="";
document.getElementById('ucity').value="";
var arrField=[];
}
}
<select onchange="setValue();" id="uinfo">
<option value="">Select</option>
<option value="1">User Info</option>
</select>
<div class="form-group has-feedback">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" id="uname" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">Email</label>
<input type="email" class="form-control" placeholder="Username" id="uemail"/>
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">City</label>
<input type="email" class="form-control" placeholder="Username" id="ucity" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<button type="button" class="btn btn-success" onclick="checkAllValue();">
<i class="icon-user icon-white"></i> Add
</button>
<button type="button" class="btn btn-success" onclick="checkAll();">
<i class="icon-user icon-white"></i> Check
</button>
Here I need that when a user will click on the Check button it will check for the original value after the drop down select if all are as it was then the Add button text will remain as Add.
If any field value has changed after selecting that button text will change to Update.
Please help me.

Try this
function setValue(){
var arrField=[];
if(document.getElementById('uinfo').value==1){
document.getElementById('uname').value="Ram";
document.getElementById('uemail').value="subhra#gmail.com";
document.getElementById('ucity').value="cuttuck";
arrField.push({'uname':document.getElementById('uname').value,'uemail':document.getElementById('uemail').value,'ucity':document.getElementById('ucity').value});
}else{
document.getElementById('uname').value="";
document.getElementById('uemail').value="";
document.getElementById('ucity').value="";
var arrField=[];
}
}
function checkAll(){
var uname = $('#uname').val();
var email = $('#uemail').val();
var city = $('#ucity').val();
var count = 0;
if(uname!='Ram')
{
count++;
}
else if(email!='subhra#gmail.com')
{
count++;
}
else if(city!='cuttuck')
{
count++;
}
if(count>0)
{
$('#add').text('UPDATE');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select onchange="setValue();" id="uinfo">
<option value="">Select</option>
<option value="1">User Info</option>
</select>
<div class="form-group has-feedback">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" id="uname" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">Email</label>
<input type="email" class="form-control" placeholder="Username" id="uemail"/>
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">City</label>
<input type="email" class="form-control" placeholder="Username" id="ucity" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<button id="add" type="button" class="btn btn-success" onclick="checkAllValue();">
<i class="icon-user icon-white"></i> Add
</button>
<button type="button" class="btn btn-success" onclick="checkAll();">
<i class="icon-user icon-white"></i> Check
</button>

var arrField = new Array();
function setValue() {
if (document.getElementById('uinfo').value == 1) {
document.getElementById('uname').value = "Ram";
document.getElementById('uemail').value = "subhra#gmail.com";
document.getElementById('ucity').value = "cuttuck";
arrField.push({
'uname': document.getElementById('uname').value,
'uemail': document.getElementById('uemail').value,
'ucity': document.getElementById('ucity').value
});
} else {
document.getElementById('uname').value = "";
document.getElementById('uemail').value = "";
document.getElementById('ucity').value = "";
arrField = [];
}
$('#Save').text('Add');
}
$(document).ready(function() {
$('#uname, #uemail, #ucity').change(function() {
if (arrField[0].uname == $('#uname').val() && arrField[0].uemail == $('#uemail').val() && arrField[0].ucity == $('#ucity').val())
$('#Save').text('Add');
else
$('#Save').text('Update');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select onchange="setValue();" id="uinfo">
<option value="">Select</option>
<option value="1">User Info</option>
</select>
<div class="form-group has-feedback">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" id="uname" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">Email</label>
<input type="email" class="form-control" placeholder="Username" id="uemail" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">City</label>
<input type="text" class="form-control" placeholder="Username" id="ucity" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<button type="button" class="btn btn-success" onclick="checkAllValue();" id="Save">
<i class="icon-user icon-white"></i> Add
</button>

The (additional) jQuery code you're looking for would be something like this. Note that I added the class "changebtn" to the target button to make it work:
$(document).ready(function(){
// Save original value when document is ready
var original = $("#uinfo").val();
// Update Button when current value is different
// from original as the selection changes
$("#uinfo").on("change", function(){
if ($(this).val() != original) {
$(".changebtn").html("Update");
} else {
// Reset Button when User switches back to original
$(".changebtn").html("Add");
}
});
});
JSFiddle demo: https://jsfiddle.net/0yj5y5sb/2/

Try this way
//Object, key based on select options
var popData= {
'user-info':
{uname: 'User1', uemail: 'user1#test.com', ucity: 'user city'}
,
'emp-info':
{uname: 'Emp1', uemail: 'emp1#test.com', ucity: 'emp city'}
};
//Select change that will update values
$('#uinfo').change(function(){
$.each(popData[$(this).val()], function( i, val ) {
$('#'+i).val(val);
});
});
//When input change check based on the conditions
$('button.check').click(function(){
//Check if any changes in the fields
if(
popData[$('#uinfo').val()].uname != $('#uname').val() ||
popData[$('#uinfo').val()].uemail != $('#uemail').val() || popData[$('#uinfo').val()].ucity != $('#ucity').val()
)
{
$('button.add').text('Update');
}
//Check if no changes in the fields
else if(popData[$('#uinfo').val()].uname == $('#uname').val() &&
popData[$('#uinfo').val()].uemail == $('#uemail').val() && popData[$('#uinfo').val()].ucity == $('#ucity').val())
{
$('button.add').text('Add');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="uinfo">
<option value="">Select</option>
<option value="user-info">User Info</option>
<option value="emp-info">Emp Info</option>
</select>
<div class="form-group has-feedback">
<label class="control-label">Username</label>
<input type="text" class="form-control" placeholder="Username" id="uname" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">Email</label>
<input type="email" class="form-control" placeholder="Username" id="uemail"/>
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label class="control-label">City</label>
<input type="email" class="form-control" placeholder="Username" id="ucity" />
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>
<button type="button" class="btn check">
<i class="icon-user icon-white"></i> Check
</button>
<button type="button" class="btn btn-success add">
<i class="icon-user icon-white"></i> Add
</button>

showing a button if there are no dynamically created form fileds available

i have a field with 'add' and 'remove' field options and my problem is if someone click remove button at first time then there is nothing left. however i created a another button and hide it by this code.
$('#more_fields').hide();
is that possible to show this button when there is no field or no button with deleteMe class available
i'm using this code for delete fields.
$(document).on("click",".deleteMe", function(){
$(this).closest(".addform").remove();
});
var room = 1;
function add_fields() {
room++;
var objTo = document.getElementById('room_fileds')
var divtest = document.createElement("div");
divtest.innerHTML = '<div class="addform"><div class="input-group"> <label for="Services">Services '+room+'</label> <input type="text" class="form-control" id="Services" name="serve[]" style="max-width: 148px;" placeholder="Add Services"> <span class="input-group-btn" > <button class="btn deleteMe" style="">×</button> <button class="btn btn-success pull-right" onclick="add_fields();" type="button"><i class="fa fa-plus"></i></button> </span> </div></div>';
objTo.appendChild(divtest)
}
//]]>
$(document).on("click",".deleteMe", function(){
$(this).closest(".addform").remove();
});
$('#more_fields').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<form class="form-inline">
<div class="">
<div class="form-group">
<div id="room_fileds" class="text-center">
<div class="addform">
<!--<label for="qualification">Services 1</label>
<input type="text" class="form-control" id="Service" style="" placeholder="Add Services">
-->
<div class="input-group">
<label for="Services">Services 1</label>
<input type="text" class="form-control" id='Services' name="serve[]" style="max-width: 148px;" placeholder="Add Services">
<span class="input-group-btn" >
<button class="btn deleteMe" style="">×</button>
<button class="btn btn-success pull-right" onclick="add_fields();" type="button"><i class="fa fa-plus"></i></button>
</span>
</div>
<span id="err_quali" style="color:red;display:none;font-size:13px;padding-left:105px;">Enter only Chars</span>
</div>
</div>
<input type="button" class="btn btn-success btn-sm" id="more_fields" onclick="add_fields();" value="Add Services" />
</div>
</div>
</form>

on delete do like
room -= 1;
than if at some point you do
if(room===0) { /*here show your button */ }
I've noticed that you use ID for buttons like #err_quali, #Services... Don't. you're going to have load of duplicate IDs on the page which is wrong. Use classes instead.
jsBin demo
var rooms = 1;
var c = 1;
var $roomsWrapper = $("#room_fileds"); // the parent
var $room = $(".input-group").clone(); // Store a group
$('#more_fields').hide();
$(".form-inline").on("click", ".deleteMe", function(ev) {
ev.preventDefault();
rooms -= 1;
$(this).closest(".input-group").fadeOut(300, function(){
$(this).remove();
});
$('#more_fields').toggle( !rooms );
}).on("click", ".addField, #more_fields", function(ev) {
ev.preventDefault();
rooms += 1;
c += 1;
var $klon = $room.clone();
$klon.find(".groupNum").text(c);
$roomsWrapper.append( $klon );
});
.err_quali{
color:red;
display:none;
font-size:13px;
padding-left:105px;
}
.form-control{
max-width: 148px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- FORM -->
<form class="form-inline">
<div id="room_fileds">
<!-- CLONABLE FIELD HELPER -->
<div class="input-group">
<label for="Services">Services <span class="groupNum">1</span></label>
<input type="text" name="serve[]" placeholder="Add Service">
<span class="err_quali">Enter only Chars</span>
<span class="input-group-btn" >
<button class="deleteMe btn">×</button>
<button class="addField btn" type="button">+</button>
</span>
</div>
<!-- Here jQuery appends Room group clones -->
</div>
<button id="more_fields">Add Services</button>
</form>

Why is my controller not firing my function.js script

I have function.js script which includes onClickClear() and onValidate() functions, but they are not firing at all. I injected the loginCtrl in the function but it still does not fire the onClickClear() and onValidate() functions. Here is the function.js code which clears text boxes and adds validation and my main.cshtml:
var app = angular.module('HelloWorld', []);
app.controller("loginCtrl", function ($scope) {
$scope.onClickClear = function () {
$scope.UsernameTxtBox = "";
$scope.passwordTxtBox = "";
$scope.rememberMeCheckBox = "";
};
$scope.onValidate = function () {
return ($scope.UsernameTxtBox != "" && $scope.UsernameTxtBox != null) &&
($scope.passwordTxtBox != "" && $scope.passwordTxtBox != null);
};
});
<body ng-app="HelloWorld">
<div ng-controller="loginCtrl">
<div class="container">
<div class="row">
<div class="col-xs-2 col-xs-push-5">
<h3>Login</h3>
<p>
Username:<br />
<input type="text" autofocus name="UsernameTxtBox" ng-model="UsernameTxtBox" ng-minlength="3" ng-maxlength="20" placeholder="Username" required>
<span style="color: red" ng-show="form1.UsernameTxtBox.$error.minlength">Userame Should Contain Atleast 3 Characters</span>
<span style="color: red" ng-show="form1.UsernameTxtBox.$error.maxlength">Limit Exceeded</span>
</p>
<p ng-bind="name"></p>
<p>
Password:<br />
<input type="password" name="passwordTxtBox" ng-model="passwordTxtBox" ng-minlength="3" ng-maxlength="20" placeholder="Password" required>
<span style="color: red" data-ng-show="form1.passwordTxtBox.$error.minlength">Password Should Contain Atleast 3 Characters</span>
<span style="color: red" data-ng-show="form1.passwordTxtBox.$error.maxlength">Limit exceeded</span>
</p>
<p ng-bind="surname"></p>
<div class="checkbox">
<label>
<input type="checkbox" data-ng-model="rememberMeCheckBox" data-ng-disabled="!onValidate()">Remember me</label>
</div>
<button type="button" class="btn btn-success btn-success btn-sm" data-ng-click="onClickClear()" ng-disabled="!onValidate()">Clear</button>
<button type="button" class="btn btn-primary btn-sm" data-ng-click="onClickLogin()" ng-disabled="!onValidate()">Login</button>
<button type="button" class="btn btn-link btn-xs" data-ng-click="onClickOpen()">Not A Member? Register</button>
</div>
</div>
</div>
</div>
</body>

I am not sure what you do, but the example is working in code snippet... It's basically cut and paste from your code and I just change body tag to div and add the two input box for username and password.
var app = angular.module('HelloWorld', []);
app.controller("loginCtrl", function ($scope) {
$scope.onClickClear = function () {
$scope.UsernameTxtBox = "";
$scope.passwordTxtBox = "";
$scope.rememberMeCheckBox = "";
};
$scope.onValidate = function () {
return ($scope.UsernameTxtBox != "" && $scope.UsernameTxtBox != null) &&
($scope.passwordTxtBox != "" && $scope.passwordTxtBox != null);
};
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="HelloWorld">
<div ng-controller="loginCtrl">
<div class="container">
<div class="row">
<div class="col-xs-2 col-xs-push-5">
<h3>Login</h3>
<div class="form-group"><input class="form-control" ng-model="UsernameTxtBox" placeholder="Username"></div>
<div class="form-group"><input class="form-control" type="password" ng-model="passwordTxtBox" placeholder="Password"></div>
<div class="checkbox">
<label>
<input type="checkbox" data-ng-model="rememberMeCheckBox" data-ng-disabled="!onValidate()">Remember me</label>
</div>
<button type="button" class="btn btn-success btn-success btn-sm" data-ng-click="onClickClear()" ng-disabled="!onValidate()">Clear</button>
<button type="button" class="btn btn-primary btn-sm" data-ng-click="onClickLogin()" ng-disabled="!onValidate()">Login</button>
<button type="button" class="btn btn-link btn-xs" data-ng-click="onClickOpen()">Not A Member? Register</button>
</div>
</div>
</div>
</div>
</div>