I have a submit button that I can't click on..
<div class="button_green">
<span>Send SMS</span>
</div>
I have tried this:
page = (HtmlPage) form.getInputByValue("Send SMS").click();
but that won't work.
Is there a way to click on this or run the Javascript with Java and HtmlUnit?
And it is not my site, so can't do anything with the html-code..
You can use XPath:
page = htmlPage.<HtmlDivision>getFirstByXPath("//div[#class='button_green'").click();
Which means: search for the first div with a class attribute of button_green, and click it.
W3schools has a good XPath tutorial.
This should work.
<script>
function sendSMS(){
alert('your sms function work here~~');
}
</script>
<span>Send SMS</span>
You will need to use the button tag like this:
<button type="button">Send SMS</button>
If you cannot edit HTML then you can do this using jquery. Try following code.
$( ".button_green" ).click(function() {
alert( "Handler for .click() called." );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="button_green">
<span>Send SMS</span>
</div>
To enable jquery first add a script line in the HTML page.
Related
I have the following in the <body> of my HTML
<div class="exact">
<div> <a id ="button_some_id" href="#"> Toggle Hidden </a></div>
<div id="item_some_id" hidden>This is hided</div>
<script type='text/javascript'>
$("#button_some_id").click(function() {$("#item_some_id").toggle();});
</script>
</div>
Link to jfiddle
The idea here is I want someone to be able to click on the Toggle Hidden link and it will show some hidden content (and when it is clicked again, hide it). However the javascript is not being triggered. Any help is greatly appreciated
You haven't inputted JQuery or JQuery UI into your JSFiddle's resources. Once putting them in, it works:
https://jsfiddle.net/tj8o8gwf/2/
$("#button_some_id").click(function() {$("#item_some_id").toggle();}); //works fine
Look at the External Resources section on the left hand side of the fiddle.
You also need to make sure the DOM is loaded.
$( document ).ready(function() {
$("#button_some_id").click(function() {$("#item_some_id").toggle();});
});
You need to make sure that jQuery is inputted
$(document).ready(function () {
$("body").on("click", "#button_some_id", function () {
$("#item_some_id").toggle();
});
});
Try this
//HTML
<div class="toBeHidden" hidden>This is hided</div>
//JS inside your click
if ($(".toBeHidden").is(":visible"))
{
$(".toBeHidden").hide('slow');
}
else
{
$(".toBeHidden").show('slow');
}
I'm trying to append a piece of text to a div using jQuery. I try to do this using the following code:
<html><head></head><body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sendButton").click(function(){
$("#conversation").append("<P>This is a message");
});
});
</script>
<div class="conversation"><p>some message</div>
<form><input type="button" id="sendButton" value="Send Message"></form>
</body></html>
Seeing the multitude of tutorials on the subject it seems to be such a simple thing to do, but I can't seem to figure out what I'm doing wrong here. Any help would be greatly appreciated.
You need to use class selector, As #conversation referes to element with id conversation
$(".conversation").append("<P>aergerag");
Fiddle DEMO
EDIT
You should look at this To Close or Not To Close Tags in HTML5 and a good question Closing tags in HTML5
replace # with . in your selector (conversation is a CLASS)
$(".conversation").append("<P>aergerag");
I am not any good at jQuery but from one of my projects I had to simply target the div with html as:
var someData = "This is a message";
$("#conversation").html(someData);
If some contents exists before this, then you can retrieve them, concatenate, and write it back into the target div.
i want to show HTML in alert window same like iframe..? can i do this...
<script>
alert("<html><body><h1>this is alert heading</h1></html></body>")
</script>
how can i do this..?
Instead of using alert, I would use a Pop Up. And I recommend you to use something like jQuery Dialog , look at http://jqueryui.com/demos/dialog/
Sample :
First, create a div to wrap your html elements,
<div id='my-dialog-id' title='my dialog title'>
<h1>this is alert heading</h1>
</div>
Then include some javascript with jQuery and jQueryUI
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#my-dialog-id").dialog(); //Here I select a div with id my-dialog-id and start the plugin.
} );
</script>
And it's ready!
If your asking how to display the HTML markup per se in the alert box, escape it:
alert("\<html\>\<body\>\<h1\>this is alert heading\</h1\>\</html\>\</body\>")
If you are asking how to format the alert box using HTML you cannot. You need to create a modal dialog box as one of the other answers indicates.
You can't do it via alert().
You can mimic it using a modal dialog. There are lots of modal dialog libraries - jQuery UI has a pretty powerful one.
I want to navigate to an HTML element having a particular 'id' in the same page using javascript on click of a button.
for example:
<body>
<div id="navigateHere" >
</div>
<button onclicK="navigate();" />
In the above code what should be there in the javascript function navigate() , so that on a click of a button , it will navigate to the 'div' element with an id 'navigateHere'.....
Thanks in advance ...
Instead of a button, you can use a simple link:
<div>Link text</div>
If you need to use JavaScript and a button, something like the following should work:
HTML:
<button type="button" id="someid">Link text</button>
JavaScript:
document.getElementById("someid").onclick = function () {
window.location.hash = "#navigateHere";
};
window.location = "#navigateHere";
It will navigate to the div element...
This may be what you want.
window.location.hash = 'navigateHere';
There is no need to use JavaScript though. Just link to #navigateHere.
Typically, I do this to prompt the alert box, and say Hello
<div style="color:#00FF00" onclick=alert("Hello"); id = "helloDivTag">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
But this time, I don't want to do it inside the html tag, I want to do it inside the js. How can I do so? Thank you.
i would recommend using the jquery framework then you just do this
$(function(){
$('#helloDivTag').click(function(){
alert("Hello");
});
});
implementing it would look like this you just put it in the header
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
$(function(){
$('#helloDivTag').click(function(){
alert("Hello");
});
});
</script>
why i recommend using jquery and not simple javascript is because there is alot of other functionality that could get in handy almost everytime you want to do something
window.onload = function() {
document.getElementById('helloDivTag').onclick = function(){
alert('hi');
}
}
when the window loads the click event is attached to your div and whenever you do the clicks the alert happens. This is called seperating behvaiour from structure and style.