This question already has answers here:
Button text toggle in jquery
(10 answers)
Closed 7 years ago.
So, I have the following jQuery code that slides a list up to replace another list when a button is clicked. The button's text is then changed to "dev languages" so that the user knows to click the button again to go back to the original list. When the user clicks the button again to go back to that original list how do I get the button to change back to it's original text?
$(document).ready(function() {
$(".projects").on("click", function(){
$(".devList").slideToggle();
$(".devButton").slideToggle();
$(".projects").text("Development Languages");
});
});
There are many ways to do this, the simplest of which is to use the .text() method to retrieve the current text of the button and test it:
var currentText = $(this).text();
if (currentText === "Development Languages")
$(this).text("Whatever the old label was");
else
$(this).text("Development Languages");
However, you may not want to have to hard-code the different labels within your JavaScript. So you could put it in the markup like this:
<button class="projects" data-alternate-label="Development Languages">Click me</button>
...and then have more generic JavaScript that checks the data- attribute to see what the alternate label is when clicked, storing the previous text for use after the next click:
var $this = $(this),
alternateLabel = $this.data("alternate-label");
$this.data("alternate-label", $this.text());
$this.text(alternateLabel);
That way you could have multiple buttons with associated lists on the same page and still only need the one click handler to manage them, as shown here: http://jsfiddle.net/c5584bgr/2/
You can check what the current text is and change it depending on the state:
if ($(".projects").text() === "Development Languages") {
$(".projects").text("New Text");
} else {
$(".projects").text("Development Languages");
}
Related
So I created the following script to select all check boxes on a page
(function(d) {
var input = d.querySelectorAll('input[type="checkbox"]');
var i = input.length;
while (i--) {
input[i].checked = true;
}
})(this.document);
It does work to do that, however when trying it in Quickbooks while it does select all the boxes, the website does not register it as actually being selected (the total cost at the bottom remains the same, its like it superficially checks the boxes, visually only with no actual register). Any help would be great.
EDIT: Maybe simulating a click instead of changing the box values?
The only thing that changes when physically selecting a box is the value posted below changes to true from false
You should do :
input[i].setAttribute("checked", "");
The checked attribute is a boolean attribute, so the standard way to add it to an element is to pass an empty string for value.
https://developer.mozilla.org/fr/docs/Web/API/Element/setAttribute#Exemple
I currently have made a way so the user can add another text field to the form by pressing on a 'add_another' div, this uses basic JS so when the user presses on the div 'add_another' the div 'author_2' is toggled.
I would like to make it so that when the user presses on the 'add_another' div for a second time it shows 'author_3' div, and when they press 'add_another' again, it then shows 'author_4'. I have put all the CSS and HTML divs in place to support this, I am just trying to adapt my code so it shows one div after another, rather then toggling a single div.
Here is my JS:
<script>
$(document).ready(function() {
$('.add_another').on('click', function(){
$('.author_2').toggle();
});
});
</script>
I have tried altering this code, however with no luck.
I haven't added my HTML as it is just 4 divs, 'author_1' 'author_2' ... 3...4
Thankyou for your help
There are two solutions to Your problem.
First one - use static code
It means the max author count is 4 and if user gets to 4, this is it.
If so - You need to store the number of authors already shown.
var authors_shown = 1;
$(document).ready(function() {
$('.add_another').on('click', function(){
authors_shown++;
if (!$('.author_'+authors_shown).is(":visible")) {
$('.author_'+authors_shown).toggle();
}
});
});
But there is also a second - more dynamic option.
What if user wants to input 10 or 20 authors? You don't want to pre render all that html code and hide it. You should clone the div and change its id or if the (HTML) code (for another author) is not too long, you can render it within JS code.
var div = document.getElementById('div_id'),
clone = div.cloneNode(true); // true means clone all childNodes and all event handlers
clone.id = "some_id";
document.body.appendChild(clone);
If it's a form, then change names of input fields to array as author_firstname[]
Also You can store number of added authors in another hidden field (so you know how long to loop the form fields on the server side.
The second option is a bit more complex and longer, but way more dynamic.
You should make another div when clicked on add_another:
something like this:
<script>
$(document).ready(function() {
$('.add_another').on('click', function(){
$('<div><input type="text" name="name[]" /></div>').appendTo('.your_container');
});
});
</script>
as you see, input's name has [] which means you should treat with the inputs as an array.
let me know if you got any further questions
good luck.
This question already has answers here:
How to set HTML value attribute (with spaces)
(6 answers)
Closed 11 months ago.
I have a form with various input boxes. I use jQuery on a click event to take the text in the input boxes and populate several select menus. This all works quite happily.
I noticed the problem when I used PHP to submit the form data to MySQL: the selected values in the select menus were included but if there was a space in the string then it only included text to the first space.
Tracking the problem back using an onchange event on the select menu and outputting it to the console.log shows it happens immediately, it is not lost in translation.
I use some pre-set select menus and they work fine, even if I add spaces.
Below some code examples, shortened:
HTML
<input type="text" name="head_loss1" id="head_loss1">
<select name="loss_depend1" id="loss_depend1">
JS/JQ
<script>
$(document).ready(function() {
$( "#collapse5" ).one("click", create_holoss_list);
function create_holoss_list(){
var lo1 = $('#head_loss1').val();
$('#loss_depend1').append('<option value=""></option><option value='+lo1+'>'+lo1+'</option><option value='+lo2+'>'+lo2+'</option><option value='+lo3+'>'+lo3+'</option><option value='+lo4+'>'+lo4+'</option><option value='+lo5+'>'+lo5+'</option><option value='+lo6+'>'+lo6+'</option><option value='+lo7+'>'+lo7+'</option><option value='+lo8+'>'+lo8+'</option><option value='+lo9+'>'+lo9+'</option><option value='+lo10+'>'+lo10+'</option>');
};
});
</script>
JS (for output to console)
loss_depend1.addEventListener("change", myScript);
function myScript() {
console.log(loss_depend1.value);
}
So if the text in the input box is: one two
The select menu will show one two as an option, but when I output the selected value it will be one
I am hoping I have done something stupid because I have been looking at it too long and I can't see where I should have " instead of ' or vice versa!
Thanks for any assistance
Blair
After taking a break I came back and noticed:
$('#loss_depend1').append('<option value=""></option><option value='+lo1+'>'+lo1+'</option>
should be:
$('#loss_depend1').append('<option value=""></option><option value="'+lo1+'">'+lo1+'</option>
"'+lo1+'"
It's the simple things...
So, I have 4 categories, 2 subcategories and two button as shown below.
https://jsfiddle.net/mboz45fv/15/
So, here is what I am trying to achieve.
There are two buttons and 4 category buttons, 2 sub category buttons.
By default, it will say Button 1 and Button 2.
When cat_B button is clicked (Image-A), the user will be directed to .com/cat_B page (Image-B). I want to show the cat_B in the title of the button 1 as shown in the picture.
Each categories will have two sub-categories.
When sub_cat_B is clicked, the user will be redirected to .com/cat_b/sub_cat_b. I would like the title of the button 2 to be sub_cat_B when they are in that page.
How can I achieve this?
Thanks!
Personally I would build each page with seperate buttons already showing the host page URl, precisely as you describe, i presume there is a reason why not. if you do want to set a buttons text with jquery you could use:
$("#cat_b").html('.com/cat_b');
If reduced code is what youre after then assuming you are using buttons not inputs and have structured your button something like:
<button id="cat_b" class="butt" onclick="location.href='.com/cat_b'">button</button>
You could use #rkho's approach but grab the url directly from the buttons own onclick attribute, also triggering this by class should reduce the amount of code:
$('.butt').click(function(){
var link=$(this).attr('onclick');
var buttonText = link.substr(link.lastIndexOf('/') + 1);
$("#cat_b").html(buttonText)
})
We're going to get the URL in the window first. Let's store it in a variable called id:
var id = window.location.href
Then, let's grab everything to the right of that last slash:
var buttonText = id.substr(id.lastIndexOf('/') + 1);
Now, you can set your specific button (let's assume you've labeled it with a class 'button'):
$(".button").text(buttonText);
I'm using 100% pure javascript, tried Jquery but it didn't help. Code not working in FF/Chrome/Safari.
I have built Edit-In-Place functionality where when the user clicks "Edit" (calling external function with onclick - passing in item_id) -- a string of text is hidden to reveal an input with the same string of text in it. (by changing classes) "Edit" is also replaced by "Save". When done editing the string - the user clicks save, and everything reverts back to normal.
AJAX is processing all the updates - but commenting out the AJAX block does not fix it.
I am loading a stream of these objects. The javascript works for all of them - but only updates the DOM, visually anyway for what appears is items before the last 24 hours. The blocks themselves are identical. That is - items that have been added within the last 18-26 hours when I click "Edit", do nothing. BUT if I alert out the class of the element I want to edit it says "editing" (as opposed to "saved") like it is working. (see below) Although this change is never reflected in inspect element.
Code on Page
<input type="text" class="input_field" id="input_254" value="Foo" onkeydown="javascript: if (event.keyCode == 13) { update(254); }" style="display: none; ">
<span class="user_links" id="display_269" style="display:none;">Foo</span> //hidden span that holds the value and acts at the check
<span id="edit_state_269" class="saved" style="display: none;">Foo</span>
<span onclick="update(269)" id="edit_269">Edit</span>
External Javascript
function update(item_id) {
var links_span = document.getElementById('display_' + item_id);
var input_span = document.getElementById('input_' + item_id);
var string_old = document.getElementById('edit_state_' + item_id).innerHTML;
var state_check = document.getElementById('edit_state_' + item_id);
var edit_button = document.getElementById('edit_' + item_id);
if (state_check.getAttribute('class') == 'saved') {
// Hide the links display list and show the input field
links_span.style.display = 'none';
input_span.style.display = 'inline';
// Change the Edit button text and state_check
edit_button.innerHTML = 'Save';
state_check.setAttribute('class','editing');
//alert(state_check.getAttribute('class')); // this alerts "editing" although in DOM it is still "saved" on the blocks that are the problem
If any more details would be helpful - I will provide them.
It is a devil of a problem - with no obvious solution. Would really appreciate any direction you can give!
Solved. As usual it's the little things. The first few blocks were being loaded on page load - and then hidden as the user navigated resulting in duplicate IDs. Javascript naturally selected the one higher on the page - the one that was hidden.