I have three buttons which are automatically generated with a jQuery plugin.
<button class="execute">Invoice1</button>
<button class="execute">Invoice2</button>
<button class="execute">Invoice3</button>
I want to write jQuery (JS) code to update form textbook only click Invoice2 button.
So, I want to write jQuery to identify it using text on button. I can write jQuery to update text box, but I don't know how to separately click Invoice2 button from others. I can't add another class or id because the buttons are generated automatically.
Try to use :contains like,
$('button:contains("Invoice2")').on('click',function(){
alert('Invoice 2 clicked');
});
This demo can help you more.
You can use below code:
$('.execute').click(function(){
if($(this).html() == 'Invoice2') {
//Do your stuff
}
});
Use :Contain function in the jquery and check weather the text contains Invoice2 or not if yes than execute the code. Here is the sample of the code
<script>
$(document).ready(function(){
$('button:contains("Invoice2")').on('click',function(){
alert("Invocie2 input was clicked");
});
});
</script>
Related
I've been trying for some time now to get this to work. I don't have much experience with jquery or javascript. I want to set a default option that is selected from the drop down options when the button is pressed. I hope this will also prevent the alert(not sure if that's correct) from appearing. I have add the following code to the "code injection" part of squarespace, which seems to work fine. (Edited, I have removed the code as recommend)
I'm using the Brine template. Here's a link to the website https://www.metastudio35.com/private-photography-services/event-collection the password is "Google360".
<squarespace:script src="plugin.js" combo="true"?>
<squarespace:script src="site.js" combo="true"?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
I then added the code below in the page I needed to redirect the button. Which also works, but without the "$("#Additional Photos").val("0");" and "$( ".sqs-widgets-confirmation-content clear" ).dialog( "close" )" lines.
<script>
$(document).ready(function(){
$("#Additional Photos").val("0");
$( ".sqs-widgets-confirmation-content clear" ).dialog( "close" )
$(".sqs-add-to-cart-button").click(function(){
window.location = '/booking/';
});
});
</script>
This is a screenshot of the dialog box I want to remove/disable.
dialog box pop up screenshot
If someone could point me in the right direction or tell me what I'm doing wrong it would be greatly apprenticed.
Thank you for your help.
I checked your website and it seems like jQuery is not used by your template, and instead of including jQuery just for this simple function, I've written the below code in vanilla JS instead.
function setValue() {
var dropdown = document.querySelectorAll('[data-variant-option-name="Additional Photos"]')[0];
dropdown.value = '0';
Y.one('#'+dropdown.id).simulate('change');
}
window.onload = setValue;
If you're interested in figuring out why your code wasn't working, here's the explanation :
$('#Additional Photos').val("0")
This line of code is setting the element that has an ID of "Additional Photos" with a value of "0".
Your "Additional Photos" select box does not have an ID of "Additional Photos", instead - it has a randomly generated ID that re-generates each time the page is refreshed.
So the reason that your code isn't working is because you're simply targeting the wrong element :)
var dropdown = document.querySelectorAll('[data-variant-option-name="Additional Photos"]')[0];
Due to the fact that the ID of the select box is not constant, we are targeting the select box by the 'data-variant-option-name' attribute instead. I figured out this constant attribute simply by inspecting the selectbox on the ChromDev tools.
dropdown.value = '0';
Y.one('#'+dropdown.id).simulate('change');
The other thing to consider is the fact that your template is using YUI to handle the select box. This means that we need to manually trigger the 'change' event in order for the UI to update. As you can see from the code above, the first line is setting the value of the select box, while the second is telling YUI to simulate the 'change' event, and thus - updating the UI.
Hope this helps !
I have a one or more groups of select elements. I need to disable one at a time but both are being disabled. I am using a checkbox to activate the disable action. I am using javascript / jquery.
$(document).ready(function(){
$('#hour-check').change(function() {
$('select').prop('disabled', this.checked);
});
});
JSFiddle LINK
You're using the same id for each check box. These should be unique, or preferably, use a class.
You should also wrap the tables in a containing class to make traversing the DOM easier.
<div class="table-container">
<p>
<input type='checkbox' class="hour-check"> 24hr
</p>
...
Once you've done this you can use the following to disable the appropriate selects:
$('.hour-check').change(function() {
$(this).parents('.table-container').find('select').prop('disabled', this.checked)
});
See https://jsfiddle.net/d58euhas/
I have a simple problem:
I have a form:
<form>
<textarea type="text" name="comment_text" class="comment-input"></textarea>
<div class="remaining"></div>
<input type="submit" class="button comment-button" />
</form>
Now when the textarea (.comment-text) is focused I want the submit button (.comment-button) to be displayed using jQuery.
$(document).ready(function() {
//display the comment button when the comment textarea is focused
$('.comment-input').focus(function() {
$('.comment-button').fadeIn(800);
});
});
This works fine. The problem is that I have the form in a foreach loop and when I focus one textarea all the buttons get selected. So I was trying to do it with the 'this' keyword something like this:
$(document).ready(function() {
//display the comment button when the comment textarea is focused
$('.comment-input').focus(function() {
$(this).find('.comment-button').fadeIn(800);
});
});
But that did not work. After trying things out for way too long now, I just decided that I do not speak sufficient jQuery to master this simple task and turned to somebody in the know for help!
Thank you in advance!
That is because the button is a sibling element of the textarea
$(this).siblings('.comment-button').fadeIn(800);
find will try to find a child element in the textarea so it will never find your button:
you can use siblings
$(document).ready(function() {
//display the comment button when the comment textarea is focused
$('.comment-input').focus(function() {
$(this).siblings('.comment-button').fadeIn(800);
});
});
Sibling is the solution for this problem , but no more will works if you wrap the submit button in any wrapper(div or span) .
This will work safer -
$(this).closest("form").find('.comment-button').fadeIn(800);
There are others ways to get the correct element other than these 3 answers,
$(this).parent().find('.comment-button').fadeIn(800);
or
$(this).next().next().fadeIn(800);
or
$(this).nextUntil('.comment-button').next().fadeIn(800);
I just created a selectbox plugin.It is very simple and I am trying to modify it.
Actually what it is doing is to hide the select and add some ul,li after that select.
Say that I have these options available
<select id="test">
<option>1</option>
<option>2</option>
</select>
Now I can do
$("#test").selectBox(); //to make it my selectBox
I have setter and getter options
$("#test").selectBox("changeValue",["changed option",index]);
On my plugin I am using methods ..
var methods = {
init :function(options){},
changeValue:function(value){
//some code to change the value ...
}
};
I can change the value ,but how can I catch the change event?
change means that a change in select or ul,li
What I really need is
$("#test").selectBox(); //initialise
$("#test").change(function(){ //attach change event
//my codes.....
});
or
$("#test").selectBox({
onChange : function(){
console.log("changed....");
}
});
Hope that the question is clear now.
Thank you.
EDIT : HERE IS THE FIDDLE link http://jsfiddle.net/jitheshkt/rBjqq/3/
Please note that i am not a expert on this and just trying to make it.
*Edit : i wrote events inside the each function ,so i think that that will be the problem. i changed it and working well *
Try this...
$("#test").on('change',function(){
// Write your code here.
});
For Older version of jQuery Use this
$("#test").change(function() {
console.log('HI');
});
This should work as it is.
I suppose you are setting the value using val() method. The change event doesn't trigger if you are changing the value using jQuery API/JavaScript, so you have to trigger it manually, like this:
$('#test').change()
or
$('#test').trigger('change');
I hope that would do the trick!!
You can depend on the original select box change rather than your customized select box.
When you select an li item, you update the corresponding value in original selectbox so that change get's fired..
not sure what is wrong with this jquery code: http://jsfiddle.net/aCABM/
I want to to grey out the dropdown menu when 'yes' is selected. When no is selected it can be selected if the user so wishes.
Select the elements by radio button name there is no need to select them individually by there ids and use prop instead of attr since you are manipulating its disabled property. Try this.
$(function(){
$("input[name='discount']").click(function() {
$("#discountselection").prop("disabled", this.value == 'Yes');
});
});
Demo
In your fiddle there were few issues.
Missed to include jQuery library
You cannot just begin your markup with td, it should be enclosed with table and tr element.
In the Js window you just have to put your js, no need to have script tags.
check updated code here
http://jsfiddle.net/ylokesh/aCABM/1/
Update code here:
http://jsfiddle.net/aCABM/6/enter link description here
You need to wrap your code in a $(document).ready() function, like so:
$(document).ready(function() {
$("#Yes").click(function() {
$("#discountselection").attr("disabled", false);
//$("#discountselection").show(); //To Show the dropdown
});
$("#No").click(function() {
$("#discountselection").attr("disabled", true);
//$("#discountselection").hide();//To hide the dropdown
});
})
Also, you didn't setup jsFiddle correctly, it required jQuery library and (document)ready()
You can use this :
$("#Yes").click(function() {
$("#discountselection").show();
});
$("#No").click(function() {
$("#discountselection").hide();
});
and remove the disable="disable".
Good-Luck !