I don't know how to click on a button that has no id or value.
I've already tried using the xpath and selector paths but neither worked for me.
<div class="button js-vehicle-section-next full-width mb1">Next Step: Select a Repair</div>
Is the code for the button on the site. My current attempts are.
find('js-vehicle-section-next').click
click_on('js-vehicle-section-next')
find_all(:xpath, "//*[normalize-space(text())='Next Step: Select a Repair'").first.click
The expected result is that the button will be clicked
click_on clicks link or button elements so it’s not going to work here because you are trying to click a div. Instead you can just use a valid CSS selector and call click on the returned element
find(‘.button.js-vehicle-section-next’).click
If you didn't have a specific class for the next "button" and you needed to do it by the contained text you could do
find('div.button', exact_text: 'Next Step: Select a Repair').click
Related
I am trying to make element lets say button active on page open. By active I mean when u pressing tab buttons elements, tabs and stuff us getting active one after one. But how can I achieve that element is selected defaulty on page start.
Try using:
element.focus();
Link to javascript documentation
All HTML elements have a Boolean attribute autofocus. It does not only work on form elements such as buttons, input fields, dropdowns, but also on focussable elements like <div contenteditable="true">.
I am attempting to automate a button click on a website. The only problem is, the HTML for the button looks like this (please note that this is not the exact button I am trying to click, it is just a real example of what a lot of buttons look like):
<button type="submit" class="Ghost-btn">Continue</button>
Obviously, there is no ID for this button, so I don't know how to 'click' on it. Is there a way of using the class name, or is there a way to program javascript to edit the HTML and add an ID for the button?
Thanks for your help in advance.
Louis
PS the link for the above button is https://raffle.sneakersnstuff.com/adidas-yeezy-boost-700-salt-EG7487 , and it is the first button you will see, labelled 'continue'.
You can use document.querySelector to use any CSS selector to select an element in JS, for example:
document.querySelector(".Ghost-btn").click();
Read more about this at MDN.
This would also allow you to select the button in other ways, for instance:
document.querySelector("button[type=\"submit\"]").click();
is also valid.
You can use
document.getElementsByClassName("Ghost-btn");
document.getElementsByTagName("BUTTTON");
but be sure that there might be more than one components so have to select the right one.
ID is just a handy and simple way for identifying any DOM element.
You can use other attribute or a set of attributes unique to the document for this purpose.
For example "type" in your example, if this is the only input of type "submit"
Or if there are more than one "submit" buttons, you can use type="submit" and class="Ghost-btn" or even text of the button.
I am trying to toggle one button using jQuery. So far, all of the information I have found is to toggle a paragraph, for instance, using another button, but I want to make this button appear and reappear when it is clicked. I also want to increase the "score" when the shown button is clicked, and decrease the "score" when the button reappears (after the user clicks it). Does anyone know how to accomplish this?
I have a series of buttons, but I will link the code for one of them for now.
HTML:
<li><button id="active1" onclick="disappear1()"></button></li>
JavaScript:
function disappear1() {
$("#active1").toggle();
currentStreak++;
document.getElementById("streak").innerHTML="current streak: " + currentStreak;
}
I know that the problem is that when I click on the button, the button disappears so there's no way for me to find it again. I want there to be a way to still reference it.
The .toggle() function changes the targeted element's CSS display property to hide/show the element. When the element is hidden it is still in the DOM and can still be targeted with same method as when it's visible.
The example below toggles an element with an ID of 'active1' when a button is clicked. Even when the 'active1' element is hidden it is still referenced and made visible again.
$('#button1').click( function (){
$('#active1').toggle();
});
I use this script to show an additional language menu additional, which works great however if the user selects a value then decided they don't want to add an additional language an clicks "Remove" the form field is hidden however the value is still there and is submitted with the form.
Is there away to change the field value to when the user clicks the "remove" button or remove the field completely?
$(document).ready(function(){
//Hide div w/id extra
$(".smalla").hide();
$("#langadtional").hide();
$("#langadd").click(function(){
$("#langadtional").show();
});
$("#langrem").click(function(){
$("#langadtional").hide();
});
If you want to remove the element, use remove:
$("#langadtional").remove();
If you want to disable a form element:
$("#langadtional").attr("disabled", "disabled");
To enable:
$("#langadtional").removeAttr("disabled");
You can clear the element's value with val() when hiding it:
$("#langadtional").hide().val("");
Removing the element is also possible, as Linus G Thiel demonstrates in his answer, but that would mean you'd have to completely recreate the element if your Add button is clicked further down the line.
I have a grid. In a each cell in a column in the grid, there is a text box. Next to each text box is a button. Attached to the button is a click event handler (jQuery .click()) What I want to do is when the user clicks the button, I want to fetch the value of the text box immediately next to it. There are multiple rows in the grid. Each row how a text box and a button.
I know how to use jQuery to fetch an individual, or group of items (using selectors). I also know how to attach the click event handler to all the buttons.
But what are some good ways to reference the text box next to the button -- aside from "walking the DOM" (i.e. using .parent() or .next())0
An easy way to do it would be to get the TR then find the input from there:
$(this).closest('tr').find('input');
You want .siblings('input') - this will find those input elements "next to the button" that was clicked.