click button => prevent onclick & show modal, click yes => callback the onclick function - javascript

I have a page with multiple input That All look like the below.
And I want to display a modal before executing the onclick.
The onclick function should be running when the yes button of the modal is clicked.
My problem is that when I click yes, the function executed is always that of the first input. Then I have to execute the function of the clicked button
Many thanks for any help with this.
HTML:
<input id="first" class="btn btn-success" type="button" onclick="doFirstFunction()" value="FirstFunction"/><br>
<input id="second" class="btn btn-success" type="button" onclick="doSecondFunction()" value="SecondFunction"/><br>
<input id="third" class="btn btn-success" type="button" onclick="doThirdFunction()" value="ThirdFunction"/>
//Modal
<div class="modal fade in" id="confirmationYesNo" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
Are you sure ?
<button id="btnYes" type="button" class="btn btn-danger" >Yes</button>
<button type="button" class="btn btn-success" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
JS:
var input = $("input[type=button]");
var defaultFunctionToCallLater = $("input").prop('onclick');
console.log("defaultFunctionToCallLater", defaultFunctionToCallLater);
$("input").prop("onclick", null );
//$("input").removeProp("onclick");
input.click(function(e){
var $target = $(e.target);
var isThird = (e.target.id == 'third');
if(!(isThird)){
$('#confirmationYesNo').appendTo("body").modal({
backdrop:'static',keyboard:false}).show();
$("#btnYes").click(function(){
addEventListener('click', defaultFunctionToCallLater);
});
}
});
function doFirstFunction(){
location.href="link1";
};
function doSecondFunction(){
location.href="link2";
};
function doThirdFunction(){
location.href="link3";
};

<input id="first" class="btn btn-success" type="button" onclick="modalFunction(1)" value="FirstFunction"/><br>
<input id="second" class="btn btn-success" type="button" onclick="modalFunction(2)" value="SecondFunction"/><br>
<input id="third" class="btn btn-success" type="button" onclick="modalFunction(3)" value="ThirdFunction"/>
And here is the JS
function openModal(callbackFunc) {
switch(callbackFunc) {
case 1:
$("#btnYes").on('click', doFirstFunction);
break;
case 2:
$("#btnYes").on('click', doSecondFunction);
break;
case 3:
$("#btnYes").on('click', doThirdFunction);
break;
}
}

All youre inputs should call showModal(id) (id = 1; id=2; ...)
The modal function will just show the modal and redirect to your js functions when you press YES
function showModal(id){
(showtheModal)
IF YES IS PRESSED
switch(id){
case 1:
doFirstFunction();
break;
case 3:
doSecondFunction();
break;
case 3:
doThirdFunction();
break;
}
}

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.

trying to make a value true on click with an if statement

I am trying to change between colors on click in jquery. According to the picture below I have the default value
and then in this image when I click on the input box and then back on a button the background color stays on the input box rather than dissappears when any other button is clicked.
i'd like the background color to disappear when any of the buttons are clicked.
here is my jquery:
$("#donation-amount").click(function() {
if ($(this).hasClass('inpt-first')) {
$(this).css("background-color", "#c97e06");
$("#default").removeClass('active');
$("#btn2").removeClass('active');
$("#btn3").removeClass('active');
}
else{
$(this).removeAttr("background-color")
$("#default").addClass('active');
}
});
and here is my html:
<div class="choose-pricing">
<div class="btn-group">
<div class="buttons">
<button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="50">50</button>
<button type="button" id="btn2" class="btn btn-default selectvalue hover-color" value="100">100</button>
<button type="button" id="btn3" class="btn btn-default selectvalue hover-color" value="150">150</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>
</div>
</fieldset>
</div>
any help would be appreciated!
Try
$(this).css("background-color", "")
Instead of this
$(this).removeAttr("background-color")
You cannot remove the background-color like this as it is not an attribute.
On click of button you should remove the class active from the donation-amount
what you have written will only work as toggle on the custom button only. Its not interacting with rest of the buttons.
Flow should be to remove class from custom button if any button is hit and if custom button is hit remove class from any of button.
$(".selectvalue").each(function(){
$(this).click(function(){
$("#donation-amount").removeClass('active');
})
});
$("#donation").click(function(){
$(".selectvalue").removeClass('active');
})
Is this the functionality you are looking for? Also added in fiddle
Instead of background color, just use the .active class
$('#donation-amount,#default, #btn2, #btn3').click(function(event) {
//add any other checks you want here
$("#default").removeClass('active');
$("#btn2").removeClass('active');
$("#btn3").removeClass('active');
$("#donation-amount").removeClass('active');
$(event.target).addClass('active');
});
.active{
background-color:#c97e06;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="choose-pricing">
<div class="btn-group">
<div class="buttons">
<button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="50">50</button>
<button type="button" id="btn2" class="btn btn-default selectvalue hover-color" value="100">100</button>
<button type="button" id="btn3" class="btn btn-default selectvalue hover-color" value="150">150</button>
<input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" 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>
</div>
I thought this code satisfied your requirement.
if your problem is not solve then write comment in explain then I can do it.
Please vote for me.
$("#donation-amount").click(function() {
if ($(this).hasClass('inpt-first')) {
console.log("hello");
$(this).css("background-color", "#c97e06");
$("#default").removeClass('active');
$("#btn2").removeClass('active');
$("#btn3").removeClass('active');
}
});
$("body").on("click","#default,#btn2, #btn3",function(){
//console.log($(this));
$("#donation-amount").css("background-color","rgb(255,255,255)");
//$("#default").addClass('active');
}
This seems a bit complicated the way you have it. This is a classic "choice highlight" scenario and is easily handled with a simple $(this).addClass('active').siblings().removeClass('active'); to set and remove the active highlight.
I also took the liberty of making the assumption you want some CUSTOM amount so I added a simple input for that to use with the CUSTOM button. I also simplified the custom button by using the data attribute and removed the code from that as frankly it seemed weird to have in there.
HTML with some adjustments:
<div class="choose-pricing">
<div class="btn-group">
<div class="buttons">
<button type="button" class="btn btn-default selectvalue hover-color choice default active " value="50">50</button>
<button type="button" class="btn btn-default selectvalue hover-color choice" value="100">100</button>
<button type="button" class="btn btn-default selectvalue hover-color choice" value="150">150</button>
<button type="button" class="btn btn-default selectvalue hover-color choice" value="" id="donation-amount" data-defaultvalue="57">Custom</button>
</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>
</div>
<div class="container">Custom Amount
<input id="customamount" type="text" value="67" />
</div>
Code that sets the color using an active class and sets the custom amount in the hidden field (or default if it has none)
$(".choice").on('click', function() {
if ($(this).is("#donation-amount")) {
var mydefault = $(this).data("defaultvalue");
// use custom amount if it has one, otherwise use this custom default
this.value = $('#customamount').val() || mydefault;
}
$(this).addClass('active').siblings().removeClass('active');
$('#donation-amount-value').val(this.value);
$('#display-amount').text('$'+this.value);
});
CSS:
.active {
background-color: #c97e06;
}
You can play around with it here: https://jsfiddle.net/MarkSchultheiss/6Lj62ngs/1/

Value of Input is empty after button click

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');
});

getting default value to display when page loads

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>

Validating a form in Twitter Bootstrap Model

I have a form in a modal with some required fields, but when I hit submit the form just reloads and I don't get any message for validation that I am using for submitting the form jQuery, as below :
<script>
$('#InfroTextSubmit').click(function(){
$('#InfroText').submit();
});
</script>
The Twitter Bootstrap Modal Code is :
<!-- Modal1 -->
<div id="myModal1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Edit Introduction</h3>
</div>
<div class="modal-body">
<form id="InfroText" method="POST">
<input type="hidden" name="InfroText" value="1"/>
<table>
<tr><td>Title</td><td><input type="text" name="title" style="width:300px" required="require"/></td></tr>
<tr><td>Introudction</td><td><textarea name="contect" style="width:300px;height:200px"></textarea></td></tr>
</table>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary" id="InfroTextSubmit">Save changes</button>
</div>
</div>
<script>
$('#InfroTextSubmit').click(function(){
$('#InfroText').submit();
});
</script>
So how can i Validate the Form and not let the model close and reload if something is wrong with the form ?
Regards,
You don't have to add any script for validating form text fields if you added the required attribute.
Try this
<input type="text" name="title" style="width:300px" required="required"/>
or
<input type="text" name="title" style="width:300px" required/>
You can add "data-dismiss=modal" to the InfroTextSubmit button, and then use 'return false' on the '#InfroTextSubmit' click function to prevent the form from closing. If the form is valid you call 'submit()'.
Button code:
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true" id="save">Save changes</button>
Click function:
$('#save').click(function(){
if ($('#myField1').val()==="") {
// invalid
$('#myField1').next('.help-inline').show();
return false;
}
else {
// submit the form here
$('#InfroText').submit();
return true;
}
});
There a several different approaches to the validation itself.
Working on Bootply: http://bootply.com/60244

Categories