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.
Related
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).
Basically I am opening up a modal to create a user where they enter their user name. For some reason The submit button isn't working can anyone help me out?
HTML button Calling Modal.
<button class="btn btn-primary pull-right" style="float: right;" ng-click='createUser()' id="users-create-user">
<span translate="createUser"></span>
</button>
My Form
<form role="form" id="CreateUserForm" ng-submit="ok(user)">
<div class="modal-header bg-primary">
<h3 class="modal-title">
<span translate="userdetails"></span>
</h3>
</div>
<div class="modal-body">
<div class="form-group">
<label translate="username">
</label>
<input id="users--user-name" class="form-control" type="text" ng-model="user.GlobalSightUsername" required maxlength="200">
</div>
</div>
<div class="modal-footer">
<button id="dialog--ok_confirm" type="submit" class="btn btn-primary" translate="ok">
</button>
<button id="dialog--cancel" type="button" class="btn btn-default" ng-click="cancel()" translate="cancel">
</button>
</div>
</form>
JavaScript
$scope.createUser = function(user) {
return $uibModal.open({
templateUrl: 'views/users/createUser.html',
controller: 'Users',
resolve: {
user: function() {
return angular.copy(user);
}
}
}).result.then(function(newUser) {
$scope.adding = true;
return $http.put($config.serverAddress + "User/CreateUsers", newUser).then(function(response) {
$scope.adding = false;
return DialogService.dialog('success', 'success', 'addedUserSuccess');
})["catch"](function() {
$scope.adding = false;
return DialogService.error("error", "errorAddingUser");
});
});
};
I also tested my backed with some dummy data so the error isn't coming from there, any help would be greatly appreciated!
I use bootstrap modal dialog.
My modal:
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Hello</h4>
</div>
<div class="modal-body">
Your name:
<input id="colorData" name="colorData" type="hidden" value=""/>
<input id="nameData" name="nameData" class="input-lg" type="text" value=""/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="postAnswer" type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
I have buttons:
<div align="center" style="margin-bottom: 20px">
<button value="all" type="button" class="btn btn-lg btn-default">All</button>
<button value="green" type="button" class="btn btn-lg btn-success">Green</button>
<button value="blue" type="button" class="btn btn-lg btn-info">Blue</button>
</div>
And i have script:
<script type="text/javascript">
$(document).ready(function () {
$(".btn").click(function () {
var color = $(this).val();
$(".modal-body #colorData").val(color);
// $('#colorData').val() - is not empty
$("#myModal").modal('show');
});
$('#postAnswer').click(function (e) {
e.preventDefault();
$.ajax({
// $('#colorData').val() is empty
// $('#nameData').val() is not empty (I write this on dialog)
url: "#Url.Action("WriteAnswer", "Home")?name=" + $('#nameData').val() + "&color=" + $('#colorData').val(),
type: 'POST',
data: $('#nameData').serialize(),
success: function (data) {
//alert('successfully submitted');
}
});
$("#myModal").modal('hide');
});
});
</script>
After call function $(".btn").click element $('#colorData').val() is not empty.But! If I click button on modal then post empty value and value of input colorData is empty. Why? I wanna post data to controller, but value is reset. Sorry for my English.
You <button> element with id="postAnswer" also has class="btn", so when you click it, the $(".btn").click(function () { method is also called and var color = $(this).val(); returns null (because that button does not have a value attribute.
To handle this correctly, give an additional class name to the 3 'color' buttons (say)
<button value="all" type="button" class="color btn btn-lg btn-default">All</button>
<button value="green" type="button" class="color btn btn-lg btn-success">Green</button>
<button value="blue" type="button" class="color btn btn-lg btn-info">Blue</button>
and change the first script to
$(".color").click(function () {
var color = $(this).val();
$(".modal-body #colorData").val(color);
$("#myModal").modal('show');
});
I am trying to get a default value to display when the page loads.
I am trying to get the first button to always show by default in the display-donation div whenever someone navigates to the form.
At the moment, this is what it looks like when the page loads. 10 is highlighted but does not display.
Here is my html
<div class="btn-group">
<div class="buttons">
<button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="10">10</button>
<button type="button" class="btn btn-default selectvalue hover-color" value="15">15</button>
<button type="button" class="btn btn-default selectvalue hover-color" value="20">20</button>
<input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="Custom">
</div>
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount" id="display-amount">
</div>
</div>
Here is my JS
$(document).ready(function() {
$('#donation-amount').keyup(function() {
$('#display-amount').text($(this).val());
});
$( ".selectvalue" ).click(function() {
$('#display-amount').text($(this).val());
});
$(".buttons .btn").click(function(){
$(".buttons .btn").removeClass('active');
$(this).toggleClass('active');
});
});
any help would be appreciated!
You're currently asking for the value attribute of the display-amount div, which of course doesn't exist. You want something like $('#display-amount').text($('.active').val()); instead.
Try this - change line 3 to:
$('#display-amount').text($('button.active).val());
You need to show the class .active amount
Taking the amount from this:
<button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="10">10</button>
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>