I'm trying to fetch values from some input fields that are placed in a Bootstrap Popover. But I get empty string.
Complexity: There is a button within a form, when you click this button a popover appears with 2 input fields and a button. I want to capture the values of these 2 fields when we click the button. If I put these fields in a form, then it would become nested forms.
Following is my code.
<button type="button" class="btn btn-danger popper hyperlink" data-toggle="popover">Trial</button>
<div class="popper-content hide">
<input type="text" class="form-control" id='urlLabel' placeholder="URL Label">
<input type="text" class="form-control url" id='url' placeholder="Complete URL">
<button type="button" class="btn btn-default btn-block urlDetails">Done</button>
</div>
My way of fetching values
$('.urlDetails').click(function(){
console.log('clicked');
console.log($('#urlLabel').val());
console.log($('#url').val());
})
Here is my JSFiddle covering the above case.
Try following code:
$(document).ready(function() {
$(document).on('click', '.urlDetails', function() {
console.log('clicked');
console.log($('.popover-content').find('#urlLabel').val());
console.log($('.popover-content').find('#url').val());
})
});
I think you misspelled
$(document).ready(function() {
$('.urlDetails').click(function(){
console.log('clicked');
console.log($('#urlLabel').val());
console.log($('#url').val());
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-danger popper hyperlink" data-toggle="popover">Trial</button>
<div class="popper-content hide">
<input type="text" class="form-control" id='urlLabel' placeholder="URL Label">
<input type="text" class="form-control url" id='url' placeholder="Complete URL">
<button type="button" class="btn btn-default btn-block urlDetails">Done</button>
</div>
Here is a working code
Related
I have multiple groups of DIV´s with each their button, in these groups I have 2 DIVS that should toggle between them on click on that button, and also switch the content on the buttons, but each group and button have their own unique ID.
The button ID´s are defined with EditButton<%=DataCon("ID")%> (Which gives EditButton1, EditButton2, EditButton3 .. etc) and the 2 DIVS in each group is called EditData<%=DataCon("ID")%> and TextData<%=DataCon("ID")%> (I.e EditData1 and TextData)
The button serverside:
<button id="EditButton<%=DataCon("ID")%>" class="btn btn-success" data-text-swap="<< Luk Redigering">Åben Redigering >></button>
Which result in:
<button id="EditButton1" class="btn btn-success" data-text-swap="<< Luk Redigering">Åben Redigering >></button>
The Severside JavaScript (ASP) I have:
$(function(){
$('div.EditData<%=DataCon("ID")%>').hide();// hide it initially
$('button').on('click', function(){
$('div.EditData<%=DataCon("ID")%>, div.TextData<%=DataCon("ID")%>').toggle();
});
});
$("button.EditButton<%=DataCon("ID")%>").on("click", function() {
var el = $(this);
if (el.text() == el.data("text-swap")) {
el.text(el.data("text-original"));
} else {
el.data("text-original", el.text());
el.text(el.data("text-swap"));
}
});
Which results in :
$(function(){
$('div.EditData1').hide();// hide it initially
$('button').on('click', function(){
$('div.EditData1, div.TextData1').toggle();
});
});
$("button.EditButton1").on("click", function() {
var el = $(this);
if (el.text() == el.data("text-swap")) {
el.text(el.data("text-original"));
} else {
el.data("text-original", el.text());
el.text(el.data("text-swap"));
}
});
The Severside DIVS in HTML :
<div class="EditData<%=DataCon("ID")%>" style="display:none">
<div class="input-group">
<input type="text" class="form-control" placeholder="<%=DataCon("FullName")%>" aria-label="Recipient's username" aria-describedby="basic-addon2" style="width: 100px;">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button"><i class="far fa-save"></i></button>
</div>
</div>
</div>
<div class="TextData<%=DataCon("ID")%>">
<%=DataCon("FullName")%>
</div>
Which results in:
<div class="EditData1" style="display:none">
<div class="input-group">
<input type="text" class="form-control" placeholder="Some Name" aria-label="Recipient's username" aria-describedby="basic-addon2" style="width: 100px;">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button"><i class="far fa-save"></i></button>
</div>
</div>
</div>
<div class="TextData1">
Some Name
</div>
The above script is obviously not working because I am not calling the DIVS and Buttons correctly, but how do I fix this?
Best Regards
Stig :-)
I think #Rory McCrossan's idea to use closest() would work, the only issue is that if you have display none on the container with the button in it, then the button won't be visible to begin with.
You could adjust your markup a bit so that the Edit button and the form are both siblings of a common parent. That would allow you to use nextSibling() in vanilla JS, or next() in jQuery
$('.toggle').on('click', function(event) {
$(this).next('.EditData').toggleClass('invisible');
let text = $(this).parent().find('.TextData').toggleClass('invisible');
let newText = $(this).text() === 'Åben Redigering >>' ? '<< Luk Redigering' : 'Åben Redigering >>';
$(this).text(newText);
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button id="EditButton1" class="toggle btn btn-success" data-text-swap="<< Luk Redigering">Åben Redigering >></button>
<div class="EditData invisible">
<div class="input-group">
<input type="text" class="form-control" placeholder="Some Name" aria-label="Recipient's username" aria-describedby="basic-addon2" style="width: 100px;">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button"><i class="far fa-save"></i></button>
</div>
</div>
</div>
<div class="TextData">
Some more info should appear here below
</div>
</div>
If you do it this way, you're relying on the structure of your template. You don't need to use a dynamic id to do a query each time as long as you put your button that triggers the toggle in the same position relative to one another with the same class names, this should work. Let me know if I misunderstood what you were trying to do there and I can edit my answer :)
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 would like to have ajax submit (without reloading the page) on multiple inputs.
So I have a form which has several input fields with edit and save buttons. When a user click on edit, it focuses on that input field and save with ajax.
The question is, how to make the save button with ajax submit without reloading the page and only that edited field will be changed on save.
Here's my html and js:
HTML
<br>
<br>
<label>Fullname</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Fullname" value="John Doe" readonly> <span class="input-group-btn">
<button class="btn btn-default btn-edit" type="button">EDIT</button>
<button class="btn btn-default btn-save" type="button">SAVE</button>
<button class="btn btn-default btn-cancel" type="button">CANCEL</button>
</span>
</div>
<br>
<label>Nickname</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Nickname" value="John" readonly> <span class="input-group-btn">
<button class="btn btn-default btn-edit" type="button">EDIT</button>
<button class="btn btn-default btn-save" type="button">SAVE</button>
<button class="btn btn-default btn-cancel" type="button">CANCEL</button>
</span>
</div>
JS
jQuery(document).ready(function () {
$('.btn-save, .btn-cancel').hide();
var inputVal;
$('.btn-edit').click(function () {
$(this).closest('div').find('.btn-edit').hide();
$(this).closest('div').find('.btn-save, .btn-cancel').show();
$(this).closest('div').find('input').removeAttr('readonly').focus();
inputVal = $(this).closest('div').find('input').val();
});
$('.btn-save').click(function () {
$(this).closest('div').find('input').attr('readonly', 'readonly');
$(this).closest('div').find('.btn-save, .btn-cancel').hide();
$(this).closest('div').find('.btn-edit').show();
});
$('.btn-cancel').click(function () {
$(this).closest('div').find('input').val(inputVal);
$(this).closest('div').find('input').attr('readonly', 'readonly');
$(this).closest('div').find('.btn-save, .btn-cancel').hide();
$(this).closest('div').find('.btn-edit').show();
});
});
I created a demo on JSFiddle. Please help....
DEMO
In your save button put ajax request onclick:
$('.btn-save').click(function () {
$(this).closest('div').find('input').attr('readonly', 'readonly');
$(this).closest('div').find('.btn-save, .btn-cancel').hide();
$(this).closest('div').find('.btn-edit').show();
var inputValue=$(this).closest('div').find('input').val();
$.ajax({ URL:"submit url",
type:"POST",
data:{ inputValue:inputValue },
success:function(data){
// do whatever you want with the response
}
});
});
Please read more about jQuery ajax documentation as what Euphoria said.
I have a section tag that contains a div which consists of a list buttons. I have a hidden div within this button div that I want to slide down under the button clicked which pushes down the rest of the content below it. How would i go about this? I have tried using the CSS position : relative but I don't think I'm using it correctly. Here is my HTML code:
<section style="float: left;" id="querySelection">
<div id="queryButtons">
<input class="btn btn-info net-man" id="zStory11" type="submit"
value="Top 10 Market/Operator/Cell ID combinations" />
<input class="btn btn-info net-man" id="failuresPerDeviceBtn" type="submit"
value="Failures per Device" />
<input class="btn btn-info cust-rep supp-eng net-man" id="failuresPerImsiBtn" type="submit"
value="Failures per IMSI" />
<input class="btn btn-info cust-rep net-man supp-eng" id="st6_CauseCodesPerImsiBtn" type="submit"
value="Failure Cause Codes per IMSI" />
<input class="btn btn-info supp-eng net-man" id="imsisPerFailureClassBtn"
type="submit" value="IMSI's Per Failure Class"/>
<input class="btn btn-info net-man" id="top10ImsiCallFailsTimePeriod" type="submit"
value="Top 10 IMSIs with Call Failures" />
<div id="queryPanel">
</div>
</div>
</section>
How would i go about sliding the "queryPanel" div below the button clicked. Here is the JavaScript used when a button is clicked.
if($('#queryPanel').is(':visible')){
$('#queryPanel').slideToggle("fast");
}
else{
$("#queryPanel").slideToggle("slow");
}
At the moment this slides the "queryPanel" div under the "queryButtons" div which is not the desired result
This is what I came up with:
$(".net-man").click(function(){
var elem = $("#queryPanel");
$("#queryPanel").remove();
elem.insertAfter($(this));
$("#queryPanel").hide().slideToggle("fast");
});
Here is the JSFiddle demo
In my controller i have methods
$scope.openJukeboxesModalToGroup -- open modal popup
$scope.searchJukeboxes --- to search on the page
$scope.keyPressed -- capture the key pressing
In the partial with a form
<form class="form-inline" role="form" ng-submit="deadForm()">
<div class="form-group">
<button ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
</div>
<div class="form-group">
<input type="text" ng-model="jukeboxFilter" ng-keypress="keyPressed($event, 'search')" class="form-control" placeholder="search">
</div>
<button type="button" ng-click="searchJukeboxes()" class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" ng-click="resetFilter()" class="btn btn-info"><span class="glyphicon glyphicon-repeat"></span></button>
</form>
keyPressed method is
$scope.keyPressed = function($event, eventType) {
$event.stopImmediatePropagation();
if(eventType=='search') {
if($event.which==13) {
$scope.searchJukeboxes();
}
}
};
I am trying to start the search whenever ever somebody types something in the text bar and clicks enter. But i don't somehow the openJukeboxesModalToGroup() method is called too. I have tried to stop this by calling stop event proprpagation, changing name of openJukeboxesModalToGroup() method. But nothing is working. Any help on this.
deadForm() method is impleament and i am not getting any error in chrome console.
Change your button for openJukeBoxesModalToGroup() to this:
<button type="button" ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
The issue is you are not providing a type so it is classing the button as a submit in which case openJukeboxesModalToGroup() is being fired from your enter submit event.
When you are hitting enter inside a form it will trigger a submission, I recommend adding your method to the form itself via the ng-submit directive and making your button the submission...
<form class="form-inline" role="form" ng-submit="searchJukeboxes()">
<div class="form-group">
<button type="button" ng-click="openJukeboxesModalToGroup()" class="btn btn-info">Add Stores to Group</button>
</div>
<div class="form-group">
<input type="text" ng-model="jukeboxFilter" ng-keypress="keyPressed($event, 'search')" class="form-control" placeholder="search">
</div>
<button type="submit" ng-click="searchJukeboxes()" class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
<button type="button" ng-click="resetFilter()" class="btn btn-info"><span class="glyphicon glyphicon-repeat"></span></button>
</form>