Click button in webpage with Javascript - javascript

Currently, I'm doing an application and I need login to this one particular website. Basically, I need to make this button click using a javascript but I have no idea how to.
This is the button code I retrieved from the website:
<button type="submit" class="uk-width-1-1 uk-button uk-button-primary uk-button-large">Sign in</button>
Thank you for your help in advance

You can click on the button programmatically, in case of pure javascript :
(function(){document.querySelector('button[type="submit"]').click();})()
In case of Android JS Interface :
webView.loadUrl("javascript:(function(){"+
"l=document.querySelector('button[type=\"submit\"]');"+
"e=document.createEvent('HTMLEvents');"+
"e.initEvent('click',true,true);"+
"l.dispatchEvent(e);"+
"})()");

The general way to have button click events is to use something like jQuery. For example lets set the button to have an ID
<button id="my-button" type="submit" class="uk-width-1-1 uk-button uk-button primary uk-button-large">Sign in</button>
Then we would apply a click event to it with jQuery
$('#my-button').click(function(){alert('button has been clicked');})
Instead of the alert you could put whatever code you want in there :D
Example: Codepen example
EDIT: Example for a class:
Example for a class
(Note that we use a "." instead of "#" in the call)
-Kyle

Related

How do I click on a button that has no ID or HTML using Python Selenium?

I have a script written and have been able to code for buttons that have html but this button that I inspected on this link, doesn't have one.
This is the element for the login button.
<input type="submit" value="login" class="button">
How would I write this line of script to click on this button using selenium & python?
To click on the button with text as Login you can use the following line of code :
browser.find_element_by_xpath("//form[#method='post' and #action='/auth/login/']//input[#class='button' and #value='login']").click()
#or
browser.find_element_by_xpath("//form[#method='post' and #action='/auth/login/']//input[#class='button' and #value='login']").submit()
your element has few attributes, which we can use. Try to find an element which starts with input and has an attribute type='submit'
driver.find_element_by_xpath("//div[#class='content']//input[#type='submit']").click()

Button not executing window.location

Im actually having a problem with html5 button in visualforce pages. I have a requirement where when i click on a button, it should redirect to a certain page (user do not want link). For some reason which i don't know, the function i'm executing do not work with HTML5 button (in fact the page only refresh but do not redirect) but when i use input of type button, the function is executed as expected.
I want to use the html5 button as there are some specific css already defined for button in the plugin im using. Find below codes for my button and javascript function :
<button class="butt" onclick="newContact()" >Nouveau</button>
<script type="text/javascript">
function newContact(){
window.location = "/apex/VFP01_NewContact";
}
</script>
What did I do wrong here, and what is the limitation of html5 button ?
Got to know the answer. In visualforce page, the html5 button execute a submit of my form. A way to prevent this, was to specify the attribute type="button".
You really have two options.
You could consider wrapping a element with an anchor tag that points to the URL that you want to target as seen below :
<!-- Target the "YourAction" action in your "YourController" controller -->
<a href='#Url.Action("YourAction","YourController")'>
<input type="Button" id="mybutton" name="url button" value="Next" />
</a>
or you could handle this purely through Javascript and perform your navigation that way :
<!-- The onclick event will trigger a Javascript call to navigate -->
<input type="Button" id="mybutton" name="url button" value="Next" onclick="window.location.href='#Url.Action("YourAction","YourController")';" />

AutoClick on Submit Button Javascript

This is whole code for this button <button type="submit" tabindex="46" class="btn-2 floatRight" onclick="_gaq.push(['_trackEvent', 'Rejestracja', 'Rejestracja - koszyk']);">Next</button>
I tried to put this _gaq.push(['_trackEvent', 'Rejestracja', 'Rejestracja - koszyk']); in GreaseMonkey to automatically proceed next step, but with no result.
Thanks for any ideas!
Have a nice day!
You're doing it wrong, you should instead find the button using document.querySelector() and then click it using the click() function, like this:
document.querySelector("button.btn-2").click()

How to create an HTML button that show more text same page

I'm working with html and javascript. My problems is, in one webpage a show a plot and a few button. When the user press any of this button I need show 3 or 4 options but in the same page without switching pages.
Below is my code
<form action="MyPage">
<button type="submit" value="More Options">
</form>
redirect to an other page.What I can do?
First of all, get rid of type="submit". That's what's causing the page to do stuff you don't want. The second thing is to add an onclick handler. It should return false to avoid behavior like "submit". The variable 'this' will pass the button to your function, which you might need in that code. Then fill in the body of addMoreStuff() with your code to, well, add more stuff!
<form action="MyPage">
<button onclick="addMoreStuff(this); return false; ">More Options</button>
</form>
<script type="text/javascript">
function addMoreStuff(button) {
/* your code here */
}
</script>
Drop the form (use the button alone), and look into jQuery. It's extremely easy to use, and it'll help you quickly build code your application.
HTML
<button type="submit" value="More Options" id="more">
JavaScript (jQuery)
// run "add_options" when someone clicks on the button
jQuery('button#more').on('click', add_options)
function add_options() {
//code here to add more options
}

self destruct button in html

Is it possible to destroy an html button. If it is clicked because it already served its purpose after clicking.
You can do so with JavaScript:
<button onclick="this.parentNode.removeChild(this)">Label</button>
Yes, it is possible, by using JavaScript to set its CSS property "display" to "none".
See also Seven ways to toggle an element with JavaScript.
I think you can do also by
<input type="button" onclick="this.style.visibility='hidden';">
Yes, you can disable or hide it. Example:
<input type="button" onclick="this.disabled=true;" />
However, if you do this to the submit button, it may not work properly. The value for the button will not be included in the form data, so if the server looks for the button data to find out what it was that caused the form to submit, it won't find it.
Yes you can do like this:
<input type="button" onclick="this.style.display = 'none';">

Categories

Resources