I am trying to change the value of a text area and clicking the button to submit it, but my code doesn't seem to click on the target. What could I be doing wrong? Could it be that the modal is preventing the click?
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>
<form id="form1" name="form1" method="post">
<p>
<input type="button" value="submit" onclick="setValue()" />
</p>
<p>
</p>
</form>
<script type="text/javascript">
function setValue() {
document.getElementById('set').value = "5d10";
document.getElementById("throw").click();
}
</script>
</p>
</div>
</div>
Edit:
omg, I am SO sorry. I did not explain this well. I wrote this almost at 2 am my time. I was tired and frustrated (i spent a few hours trying to find what I was doing wrong) and did not explain myself properly. Let me try again.
What I posted was a snippet of the code where I believe is the problem since the function bit that modifies "set" does work, but the part that is supposed to click on "throw" doesn't. (ignore that empty p).
I am editing the source code of this git: https://github.com/MajorVictory/3DDiceRoller
I have managed to edit a few things like adding buttons and setting a modal from where the button you see in the snippet operates from. Visual reference: enter image description here
Set and Throw
In short, "document.getElementById('set').value = "5d10";" works, but "document.getElementById("throw").click();" doesn't.
There is no element called 'set' in your html code.
The correct code is this:
<!DOCTYPE html>
<html>
<head>
<title>Training File Upload</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p></p>
<form id="form1" name="form1" method="post">
<input type="button" id='set' value="submit" onclick="setValue()" />
</form>
<script type="text/javascript">
function setValue() {
document.getElementById('set').value = "5d10";
}
</script>
</p>
</div>
</div>
</body>
</html>
Related
I'm trying to use Selenium in python to web scrape some data that is behind a login page. By viewing source, the page source code is as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>sometitle</title>
</head>
<body>
<div id="id1"></div>
<div id="wrapper">Loading...</div>
<div id="id2">
... some code ...
</div>
... some code ...
<script data-main="main" src="libs/requirejs.js"></script>
</body>
</html>
I tried to use the following code to log into system and go to the next page, but it cannot find username/password elements in the above source code:
from selenium import webdriver
browser = webdriver.Chrome()
username = 'username'
password = 'password'
browser.get("https://sometitle.com")
browser.find_element_by_name("callback_0").send_keys(username)
browser.find_element_by_name("callback_1").send_keys(password)
browser.find_element_by_name("callback_2").click()
I then examined elements by inspect elements and found the elements on that page:
<div id="wrapper"><div id="login-base" class="base-wrapper">
<div id="header" class="clearfix">
...
</div>
<div id="content" class="content"><div class="container-shadow" id="login-container" style="background-image: url(../images/box-bg.png);">
<br>
<h1>Header</h1>
<form action="" method="post" class="form small">
<fieldset>
<div class="group-field-block">
<label class="short">Username:</label><input type="username" name="callback_0" value="" data-validator="required" required="" data-validator-event="keyup">
</div>
<div class="group-field-block">
<label class="short">Password:</label><input type="password" name="callback_1" value="" data-validator="required" required="" data-validator-event="keyup">
</div>
<div class="group-field-block float-left">
<input name="callback_2" type="submit" class="button" index="0" value="Login">
</div>
<ul class="link-box float-left"></ul>
</fieldset>
</form>
</div>
</div>
</div>
</div>
My question is - how can I locate the username/password/submit elements on the page that is only visible from inspect elements but not page source? Did some research, seems the website was built as dynamic website and it's redirecting to other page via jquery or javascript or something. I don't quite understand what's going on. Really appreciate some help or some insights!
I'm trying to get a hidden form CLASS to show onclick of a class.
Heres my code:
<div class="product">
<input type="submit" class="clickme" />
<script>
document.getElementsByClassName('clickme')[0].onclick = function(){
document.write('<form class="etc"><label>Etc</label><select></select>');
};
</script>
</div>
<div class="product">
<input type="submit" class="clickme" />
<script>
document.getElementsByClassName('clickme')[0].onclick = function(){
document.write('<form class="etc"><label>Etc</label><select></select>');
};
</script>
</div>
<div class="product">
<input type="submit" class="clickme" />
<script>
document.getElementsByClassName('clickme')[0].onclick = function(){
document.write('<form class="etc"><label>Etc</label><select></select>');
};
</script>
</div>
The forms inside the scripts are styled.
I want the click to show only the content in the script, however nothing is working, Alerts work fine - So my question is can i use HTML in Scripts? And if so - based on what you see in this code, how can i do that?
I know this is not really what you expect as answer but I believe you can pretty much what you are trying to do with jquery click and jquery html.
Hope this helps
I am trying to create a model in angularJS with angular UI, and I tried to use this code in my page's controller
$scope.insertEvent = function() {
$modal.open({
templateUrl: 'views/overlays/insert-event.html'
});
};
Inside insert-event.html it looks like this:
<section class="overlay overlay-insert-event">
<span class="bg"></span>
<form class="wrap">
<header>
Insert an Event
</header>
<div class="main">
<label>Name<input type="text" ng-model="newEvent.name" name="name" /></label>
<label>Start<input type="text" date-picker ng-model="newEvent.start" name="start" /></label>
<label>Stop<input type="text" date-picker ng-model="newEvent.stop" name="stop" /></label>
</div>
<footer>
<button ng-click="insertEventSubmit()">Insert</button>
<a ng-click="insertEventReset()">Cancel</a>
</footer>
</form>
</section>
Now the problem is that when I open it, the background of the overlay with the semi-tranparent black appears, but the content doesn't appear. I hope someone can help me understand how this works. Thank you in advance, Daniel!
Where is your views folder located? Try '/views/overlays/insert-event.html' if it is directly located under the project.
Try wrapping the HTML for your modal content in proper HTML tags with an ng-app directive defined. Worked for me when I also got just the background overlay when opening the modal.
<html>
<head>
<title>
Modal
</title>
</head>
<body>
<div ng-app="yourAppName">
<<<YOUR_CONTENT>>>
</div>
</body>
</html>
I found I can include my modal markup in the body of my index.php and load it via this line without any problems:
<a data-toggle="modal" href="#modal-add">Add</a>
Assuming, of course, that there's a div somewhere in that page called #modal-add. When I moved that out to its own file (modal-add.html) and try this:
<a data-toggle="modal" href="modal-add.html" data-target="#modal-add">Add</a>
...I can't see that anything is happening. Chrome's developer tools don't register any activity when I click the link. I've created a basic fiddle to demonstrate: http://jsfiddle.net/tmountjr/3bnyq/2/
According to the docs (http://getbootstrap.com/javascript/#modals) that should just work, right? Where am I going wrong? (I'm referencing the Bootstrap js and css files from netdna, and jquery from their site, and everything else on my site is behaving normally, minus this.)
EDIT
Since it appears that fiddle has a built-in cross-domain request, here's a bare-bones setup that anyone with a WAMP server can try:
modal.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body>
<p>Click here</p>
<script src="//code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>
modaltest.html:
<div id="modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add New Designation</h4>
</div>
<div class="modal-body">
<form>
<fieldset>
<div class="form-group">
<label for="add-designation">Designation Description:</label>
<input type="text" name="add-designation" id="add-designation" class="form-control" />
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="resetdesignation">Reset</button>
<button type="button" class="btn btn-primary" id="adddesignation">Add Designation</button>
</div>
</div>
</div>
</div>
I think you have to point data-target attribute to element which exists in DOM (not returned in AJAX-response).
And as I know returned result just placed into target with .html() method which equal to innerHTML which replaces everything inside target.
So you can point all links to one Modal (with id="modal") and it's content will be just replaced with AJAX-response.
As an aside, it's also worth noting that this method (using a remote page as your dialog source) is limited out of the box to one external source. (In other words, if you have three different remote sources it'll only ever load the first one you click.) I tried emptying the #modal div after it closes but that didn't seem to work; the only way I found around it was this fiddle which overrides the default modal behavior, manually loads the content each time, and then displays the modal. For good measure (though I don't think it's required) I empty the div after the modal closes, just so I don't have extra code laying around inside my page. Here's my code:
$("[data-target]").on('click', function(e) {
e.preventDefault();
var placeholder = $(this).data('target');
var target = $(this).attr('href');
$(placeholder).load(target);
});
$('#modal').on('hidden.bs.modal', function () {
$("#modal").empty();
});
EDIT
There's an even better solution documented here.
I have a select box that directs users to another page when an item is selected. I would like to show some kind of loading.gif when the user selects an Item, so they know that something is happening. Can someone please show me how to accomplish this?
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$("sRedirect").change(function(){
$("#sRedirect :selected").not(:contains('Click Here To Select')).siblings("img").first().attr('src','loading.gif');
});
</script>
</head>
<body>
<div class="titleBar">
<div class="Logo"><a class ="backBtn" href="javascript:history.back();"> </a><img src="logotop.png" align="right" />
</div>
<br><br>
<div class="top"><br><br><h2>Step 1<br><br>Choose an Area</h2><br><br> <div>
<div class="middle">
<form name=form1>
<select name="URL" id="sRedirect" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value" onfocus="javascript:toggle();" >
<option value="" disabled="disabled" selected="selected">Click Here To Select</option>
<?=$options?>
</SELECT>
<br>
<img src="" id="myLoadingPicture"/>
</form>
</div>
</html>
Just show an image before you set the location.href.
<select name="URL" onchange="$('#myLoadingPicture').show(); window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value" onfocus="javascript:toggle();" >
When you start going to another page (more specifically, start unloading a page) then the page is no longer required to respond. Therefore, even if you added an animated GIF (a simple task, just create an image element and append it to the body) there is no guarantee that it will animate, or even show up.