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');
});
Related
I want my text field to show in my modal using jQuery. How can I fix that code? If I checked my checkbox, it would show in my modal. But if I use my text field its show nothing.
Body
<body>
<div id="hasildetail" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Detail</h4>
</div>
<div class="modal-body">
<p id="isidetail">
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="offset-4 col-sm-8">
<form>
<h3>Please select:</h3>
<input type="checkbox" name="hobby" value="Sepak Bola"> Sepak Bola <br>
<input type="checkbox" name="hobby" value="Membaca"> Membaca <br>
<input type="checkbox" name="hobby" value="Menulis"> Menulis <br>
<input type="checkbox" name="hobby" value="Memancing"> Memancing <br>
<input type="checkbox" name="lainlain" id="lainlain" value="Lain-lain"> Lain-lain <br>
<input type="text" id="ceklain" placeholder="[ Masukkan lain-lain ]">
</form>
<button id="detail" type="button" class="btn btn-primary" data-toggle="modal" data-target="#hasildetail">Detail</button>
</div>
</div>
</body>
Script
// Tampil ke modal detail
$(document).ready(function() {
$("#detail").click(function() {
var p = $("#hasildetail #isidetail");
$(p).html("<h4>you have selected : </h4>");
$.each($("input[name='hobby']:checked"), function() {
$(p).html($(p).html() + '<br>' + $(this).val());
});
});
});
// Checkbox Lain-lain
$(document).ready(function() {
$('#ceklain').hide();
$('#lainlain').change(function() {
if (this.checked)
$('#ceklain').show(1000);
else
$('#ceklain').hide(1000);
});
});
[1] You can use just one $(document).ready()
[2] No need to use something like $(p).html() + '<b>'... you can add the HTML Structure to a variable then use .html(HTMLStructure) to add the html structure to the element .. this can be done with .append() too..
[3] While the id should be unique and you have id for the desired input So you can get its value by use $('#ceklain').val()
$(document).ready(function() {
// Tampil ke modal detail
$("#detail").click(function() {
var p = $("#hasildetail #isidetail");
var HTMLStructure = "<h4>you have selected : </h4>";
$.each($("input[name='hobby']:checked"), function() {
HTMLStructure += '<br>' + $(this).val();
});
HTMLStructure += $('#ceklain').val();
$(p).html(HTMLStructure);
});
// Checkbox Lain-lain
$('#ceklain').hide();
$('#lainlain').change(function() {
if (this.checked)
$('#ceklain').show(1000);
else
$('#ceklain').hide(1000);
});
});
I'm working with DataTables and CodeIgniter, and Right now I want to be able to edit any row in my table, and I'm already doing it! But I'm only updating the row that has the ID = 1, that's because in my controller I defined this :
$this->db->set('NameContact', $_POST['Name']);
$this->db->set('NumberContact', $_POST['Number']);
$this->db->where('IdContact', 1);
$this->db->update('contacts');
As you can see I need to get the id of the selected row in the table to pass it with the $_POST method. But I can't seem to find a right way to do it via JS. Any help pls?
My HTML:
{Contacts}
<tr>
<td id="{IdContact}">{IdContact}</td>
<td>{NameContact}</td>
<td>{NumberContact}</td>
<td><a data-toggle="modal" data-target="#EditNumber"> <i class="fa fa-edit"></i></a></td>
</tr>
{/Contacts}
My JS:
function EditPhoneNumber(){
var Name = document.getElementById("EditName").value;
var Number = document.getElementById("EditNumber").value;
console.log(Name);
console.log(Number);
jQuery.ajax({
type: "POST",
url: 'http://localhost/projeto/index.php/Backoffice_Controller/EditContacts',
data: {Name: Name, Number: Number},
success: function (response) {
console.log("success");
console.log(response);
},
error: function(response){
console.log("error");
console.log(response);
}
});
}
Here is my Modal:
<div id="EditNumber" class="modal fade" role="dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Editar Contacto</h4>
</div>
<div class="modal-body">
<input type="text" name="NameContact" placeholder="Name" id="EditName"><br>
<input type="text" name="NumberContact" placeholder="Number" id="EditNumber">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" onclick="EditPhoneNumber()">Editar</button>
</div>
</div>
Pass data-id into your html tag like below and on tag click you need to manage function instead of opening modal directly.Look at the below code.
HTML
{Contacts}
<tr>
<td id="{IdContact}">{IdContact}</td>
<td>{NameContact}</td>
<td>{NumberContact}</td>
<td> <i class="fa fa-edit"></i></td>
</tr>
{/Contacts}
In your Modal
<div id="EditNumber" class="modal fade" role="dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Editar Contacto</h4>
</div>
<div class="modal-body">
<input type="text" name="NameContact" placeholder="Name" id="EditName"><br>
<input type="text" name="NumberContact" placeholder="Number" id="EditNumber">
<input type="hidden" name="NumberContactId" id="EditId">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" onclick="EditPhoneNumber()">Editar</button>
</div>
</div>
</div>
JS
function editNumberModal(obj){
vat id = jQuery(obj).attr('data-id');
jQuery('#EditNumber').modal();
}
function EditPhoneNumber(){
var Name = document.getElementById("EditName").value;
var Number = document.getElementById("EditNumber").value;
var Id = document.getElementById("EditId").value;
console.log(Name);
console.log(Number);
jQuery.ajax({
type: "POST",
url: 'http://localhost/projeto/index.php/Backoffice_Controller/EditContacts',
data: {Name: Name, Number: Number, Id:Id},
success: function (response) {
console.log("success");
console.log(response);
},
error: function(response){
console.log("error");
console.log(response);
}
});
}
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/
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 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;
}
}