Here I want to add button value in textbox - javascript

I want to add button value in text box. When I select "call", the value will be "call" in textbox and suppose when I select "meeting", the value will be "meeting" in textbox.
My problem is, when I select the value is coming multiple and also page is redirecting. I could not find solution.
Thanks in advanced.
My code:
Javascript:
<script type="text/javascript">
function moveValue(num) {
var txt = document.getElementById("subject").value;
txt = txt + num;
document.getElementById("subject").value = txt;
}
</script>
Html:
<div class="form-group">
<label class="col-lg-2 control-label">Subject<span class="text-danger">*</span></label>
<div class="col-lg-10">
<input type="text" id="subject" class="form-control holiday_name" name="holiday_name" required>
</div>
</div>
<div class="form-group row">
<button type="submit" class="btn btn-default col-md-2" value="Call" onclick="moveValue(this.value)"><i class="fa fa-phone"></i> Call</button>
<button type="submit" class="btn btn-default col-md-2" value="Meeting" onclick="moveValue(this.value)"><i class="fa fa-group"></i> Meeting</button>
<button type="submit" class="btn btn-default col-md-2" value="Task" onclick="moveValue(this.value)"><i class="fa fa-tasks"></i> Task</button>
<button type="submit" class="btn btn-default col-md-2" value="Deadline" onclick="moveValue(this.value)"><i class="fa fa-flag"></i> Deadline</button>
<button type="submit" class="btn btn-default col-md-2" value="Email" onclick="moveValue(this.value)"><i class="fa fa-envelope"></i> Email</button>
<button type="submit" class="btn btn-default col-md-2" value="Lunch" onclick="moveValue(this.value)"><i class="fa fa-cutlery"></i> Lunch</button>
</div>

My problem is, when I select the value is coming multiple and also page is redirecting.
Because you submit the form. Note, that you have buttons as type submit. Change them to just button and it will not attempt to send form for server processing.
<button type="button" class="btn btn-default col-md-2" value="Call" onclick="moveValue(this.value)"><i class="fa fa-phone"></i> Call</button>

First you have to remove the submit attribute in the buttons, so it won't redirect the page, here is a working code:
https://jsfiddle.net/yrpwop7o/1/
And the correct version of the javascript code is:
window.moveValue = function(num) {
var subject = document.getElementById("subject");
subject.value = num;
}

You should just set the value of subject as num which is passing from the onclick event.
function moveValue(num) {
var txt = document.getElementById("subject").value;
//txt = txt + num; //remove this line because it will bind the values
document.getElementById("subject").value = num;
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-lg-2 control-label">Subject<span class="text-danger">*</span>
</label>
<div class="col-lg-10">
<input type="text" id="subject" class="form-control holiday_name" name="holiday_name" required>
</div>
</div>
<div class="form-group row">
<button type="submit" class="btn btn-default col-md-2" value="Call" onclick="moveValue(this.value);"><i class="fa fa-phone"></i> Call</button>
<button type="submit" class="btn btn-default col-md-2" value="Meeting" onclick="moveValue(this.value);"><i class="fa fa-group"></i> Meeting</button>
<button type="submit" class="btn btn-default col-md-2" value="Task" onclick="moveValue(this.value);"><i class="fa fa-tasks"></i> Task</button>
<button type="submit" class="btn btn-default col-md-2" value="Deadline" onclick="moveValue(this.value);"><i class="fa fa-flag"></i> Deadline</button>
<button type="submit" class="btn btn-default col-md-2" value="Email" onclick="moveValue(this.value);"><i class="fa fa-envelope"></i> Email</button>
<button type="submit" class="btn btn-default col-md-2" value="Lunch" onclick="moveValue(this.value);"><i class="fa fa-cutlery"></i> Lunch</button>
</div>

Related

Reading a data fielding that is set by javascript

I am creating a list of button bars that look like this via a php script:
<button type="button" class="btn btn-light btn-lg btn-block" onclick="set_buttons(49228)" > Button Name </button>
<button type="button" class="btn btn-light btn-lg btn-block" onclick="set_buttons(49568)" > Button Name </button>
<button type="button" class="btn btn-light btn-lg btn-block" onclick="set_buttons(49538)" > Button Name </button>
This button list when a button is clicked would set the data attribute for some other buttons I have set up on the page.
This is the javascript I use to set the attributes for the secondary buttons I have defined on the page (see below):
function set_buttons(customer_id) {
var set_id = customer_id;
var edit = document.getElementById("edit");
var delete_customer = document.getElementById("delete");
var orders = document.getElementById("orders");
var password = document.getElementById("password");
var email = document.getElementById("email");
var details = document.getElementById("details");
edit.setAttribute("data-customerID", set_id);
delete_customer.setAttribute("data-customerID", set_id);
orders.setAttribute("data-customerID", set_id);
password.setAttribute("data-customerID", set_id);
email.setAttribute("data-customerID", set_id);
details.setAttribute("data-customerID", set_id);
};
This is the set of buttons on the page that I set the data-customerID="" with the previous button click from the list I generated:
<form name="main_buttons">
<div class="row sticky-top" style="padding:3em 0 2em 0; z-index: 900;background-color: white;">
<div class="col-sm-1 text-left"> </div>
<div class="col-sm-1 text-left"><button class="btn btn-primary" id="edit" onclick="page_redirect('customer_edit')";return false; data-customerID="">Edit</button></div>
<div class="col-sm-1 text-left"><button class="btn btn-danger" id="delete" onclick="show_modal('delete_customer')" data-customerID="">Delete</button></div>
<div class="col-sm-1 text-left"><button class="btn btn-info" id="orders" onclick="page_redirect('customer_orders');return false;" data-customerID="">Orders</button></div>
<div class="col-sm-2 text-left"><button class="btn btn-secondary" id="password" onclick="show_modal('customer_password')"data-customerID="">Change Password</button></div>
<div class="col-sm-1 text-left"><button class="btn btn-success" id="email" onclick="page_redirect('email_customer');return false;" data-customerID="">Email</button></div>
<div class="col-sm-2 text-left"><button class="btn btn-info" id="details" onclick="show_modal('customer_details')" data-customerID="">View Details</button></div>
<div class="col-sm-1 text-left"> </div>
</div>
</form>
What I would like to do is use that data value I previously set from the first button click and be able to grab it in a second javascript function:
function page_redirect(link){
var page_link = link;
if (page_link == 'customer_edit') {
var customerID = document.querySelector("#edit");
var data = customerID.dataset.data-customerID;
alert(data);
}
};
The alert always displays NaN though and I am unsure how I can get the value. If I can get this value, then I can finish off the rest of the script functionality. I have only set up the first button for edit at present until I can get this data attribute value issue resolved.

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.

jquery set div attr id not working but for the rest of the elements

I'm creating a clone of a div along with all the elements it contains. For the new div I'm changing the IDs, I'm able to change all of them but the div one, any idea what I'm doing wrong?
HTML
<form class="form-horizontal" action="${pageContext.request.contextPath}/search" method="post">
<div class="card" id="criteriaContainer_0">
<div class="card-body">
<div class="row">
<div class="col-sm-12" id="andOr_0">And</div>
</div>
<div class="row">
<div class="col-sm-2">
<div class="input-group mb-3">
<input type="text" class="form-control" id="leftParenthesis_0" readonly>
<div class="input-group-append">
<button class="btn btn-outline-success" id="addLeftParenthesis_0" title="Add left parenthesis" onclick="addLeftParenthesis(this)" type="button">+</button>
<button class="btn btn-outline-danger" id="delLeftParenthesis_0" title="Remove left parenthesis" onclick="delLeftParenthesis(this)" type="button">-</button>
</div>
</div>
</div>
<div class="col-sm-8">
<input type="text" class="form-control" id="criteria_0" placeholder="Enter search term" name="criteria_0" required>
</div>
<div class="col-sm-2">
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-danger" id="delRightParenthesis_0" title="Remove right parenthesis" onclick="delRightParenthesis(this)" type="button">-</button>
<button class="btn btn-outline-success" id="addRightParenthesis_0" title="Add right parenthesis" onclick="addRightParenthesis(this)" type="button">+</button>
</div>
<input type="text" class="form-control" id="rightParenthesis_0" readonly>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2 offset-sm-10">
<button class="btn" id="addCriteria" title="Add (Up to 5 criteria)" onclick="addSearchTerm()" type="button"><i class="fas fa-plus-circle" style="font-size:48px;color:green"></i></button>
<button class="btn" id="delCriteria" title="Delete search term" onclick="delSearchTerm()" type="button"><i class="fas fa-minus-circle" style="font-size:48px;color:red"></i></button>
</div>
</div>
</form>
JQuery
var current_id = 0;
function addSearchTerm() {
current_id++;
var newCriteria = $("#criteriaContainer_0").clone(true);
// Setting Ids for new elements
// NOT WORKING (Always shows as criteriaContainer_0 in the new ones)
$(newCriteria).find("#criteriaContainer_0").attr("id", "criteriaContainer_" + current_id);
// Beyond this point everything works as expected (andOr_1, andOr_2, ...)
$(newCriteria).find("#andOr_0").attr("id", "andOr_" + current_id);
$(newCriteria).find("#leftParenthesis_0").attr("id", "leftParenthesis_" + current_id);
$(newCriteria).find("#addLeftParenthesis_0").attr("id", "addLeftParenthesis_" + current_id);
$(newCriteria).find("#delLeftParenthesis_0").attr("id", "delLeftParenthesis_" + current_id);
$(newCriteria).find("#criteria_0").attr("id", "criteria_" + current_id);
$(newCriteria).find("#delRightParenthesis_0").attr("id", "delRightParenthesis_" + current_id);
$(newCriteria).find("#addRightParenthesis_0").attr("id", "addRightParenthesis_" + current_id);
$(newCriteria).find("#rightParenthesis_0").attr("id", "rightParenthesis_" + current_id);
// Cleaning values
$(newCriteria).find("#leftParenthesis_" + current_id).val("");
$(newCriteria).find("#criteria_" + current_id).val("");
$(newCriteria).find("#rightParenthesis_" + current_id).val("");
// Insert new criteria
$(newCriteria).insertAfter(".card:last");
if (current_id > 4) {
$("#addCriteria").prop("disabled",true);
} else {
$("#addCriteria").prop("disabled",false);
}
};
Please try to change
var newCriteria = $("#criteriaContainer_0").clone(true);
to
var newCriteria = $("#criteriaContainer_0").clone(true).attr("id", "criteriaContainer_" + current_id);

Checkboxes weird behaviour in AngularJS ng-repeat

I've a form containing input fields and checkboxes (table crud generating dynamically). See the image below:
Here, In my clients modal dialog form I've implemented small crud for adding/updating/deleting Providers data and showing table below of it on the fly.
Following is my code:
View:
<form name="clientForm" ng-submit="check(id)" ng-controller="ClientsController">
<div class="form-group">
<label for="name">Name</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Name" ng-model="client.name">
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Email" ng-model="client.email">
</div>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Phone" ng-model="client.phone">
</div>
</div>
<div class="form-group">
<label for="phone">Providers</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
<input type="text" class="form-control" id="title" ng-model="provider.provider_name" placeholder="Enter Provider Name">
</div>
<br>
<button type="button" id="addbtn" class="btn btn-sm btn-primary" ng-click="addProvider()">Add Provider</button>
<button type="button" id="editbtn" class="btn btn-sm btn-info" ng-click="updateProvider(id)">Update Provider</button>
<button type="button" id="editbtn" class="btn btn-sm btn-default" ng-click="clearProvider()">Clear Provider</button>
<br>
<table style="width: 50%; margin-top: 10px;" class="">
<tbody>
<tr ng-repeat="val in providersData">
<td>
<input type="checkbox" name="providersData" ng-model="$parent.client.providersList" value="{{val._id}}"/>
</td>
<td>{{val.provider_name}}</td>
<td>
<a style="color: blue;" href="javascript:void(0);" ng-click="editProvider(val._id)"><i class="glyphicon glyphicon-edit"></i></a>
<a style="color: red;" href="javascript:void(0);" title="Delete" confirmed-click="removeProvider(val._id)" ng-confirm-click="Are you sure you want to remove provider?"><i class="glyphicon glyphicon-trash"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="well well-lg text-center bg-gray">
<button class="btn btn-success" ng-if="id">Save Client</button>
<button class="btn btn-danger" ng-if="id" title="Delete" confirmed-click="remove(client._id)" ng-confirm-click="Are you sure you want to remove?">Delete</button>
<button type="button" class="btn btn-warning" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-success" ng-if="!id">Add Client</button>
</div>
</form>
Controller:
$scope.showModal = false;
$scope.client = {};
$scope.provider = null;
$scope.addClient = function () {
alert(JSON.stringify($scope.client));
$http.post('/clients', {param: $scope.client}).success(function (response) {
if (response) {
alert("Client added successfully");
$scope.client = "";
refresh();
$scope.closemodal();
}
});
};
Now I want to insert/update selected checkboxes value to db along with Name, Email, and Phone field.
Here I'm facing following issues:
Whenever I'm clicking on any checkbox its checking all checkboxes.
After clicking on Add Client button its showing result of alert(JSON.stringify($scope.client)) like this
{"name":"asdfdsafasdf","email":"sdf","phone":"sadf","providersList":{"id":true}}
In mongodb its showing like this:
I've search a lot tried this and ng-model="$parent.client.providersList.id" but still its not working.
I'm beginner in AngularJS and just started working on it.
Any help would be appreciated.
You should use ng-true-value & ng-false-value over the checkbox(I'm considering default value to be 0). And then use $index of providersData ng-repeat to create an array of client.providersList.
Markup
<input type="checkbox" name="{{'providersData'+$index}}"
ng-model="client.providersList[$index].id" ng-true-value="val._id" ng-false-value="0" />
You are facing this problem because of the value of your ng-model attribute. The value for ng-model attribute must be different for each checkbox. Here, try this:
<input type="checkbox" name="providersData" ng-model="client.providersList{{$index}}" ng-value="val._id" />
Try something like this:
$scope.client = {};
$scope.client.providersList = [];
// Now watch the model for changes
$scope.$watch('client', function(){
// When the checkbox is selected it returns true
if($scope.client.providersList1 == true){
$scope.client.providersList.push({"id": value})
}
// Repeat the if statements for all the checkboxes (or use a for loop)
}, true);

Limit the up down movement of divs with Jquery

I making a "to do list" of task to be done. I have some buttons that will move the tasks up and down on the list.
I go the up and down buttons going. My only issue is that the task divs are able to move up and down the entire page. How can I keep the task divs to only moving up and down on on each other?
Thank you!
Here's my code:
$(document).ready(function(){
$('.up_button').click(function(){
$(this).parents('.task').insertBefore($(this).parents('.task').prev());
});
$('.down_button').click(function(){
$(this).parents('.task').insertAfter($(this).parents('.task').next());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="task col-sm-12">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon"><input type="checkbox" name="task1" value="taskID1" /></span> <input type="text" class="form-control" value="Write HTML" readonly>
</div>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-default up_button"><span class="glyphicon glyphicon-arrow-up"></span> Move Up</button>
<button type="button" class="btn btn-default down_button"><span class="glyphicon glyphicon-arrow-down"></span> Move Down</button>
</div>
</div>
<div class="task col-sm-12">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon"><input type="checkbox" name="task1" value="taskID1" /></span> <input type="text" class="form-control" value="Write XML" readonly>
</div>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-default up_button"><span class="glyphicon glyphicon-arrow-up"></span> Move Up</button>
<button type="button" class="btn btn-default down_button"><span class="glyphicon glyphicon-arrow-down"></span> Move Down</button>
</div>
</div>
1st: I think you need to define $(this) before going to insertAfter or insertBefore
2nd: you can use .closest()
$(document).ready(function(){
$('.up_button').click(function(){
var ThisIt = $(this);
$(this).closest('.task').insertBefore(ThisIt.closest('.task').prev('.task'));
});
$('.down_button').click(function(){
var ThisIt = $(this);
ThisIt.closest('.task').insertAfter(ThisIt.closest('.task').next('.task'));
});
});
Demo Here

Categories