I need to scrape some data behind those hyperlinks from this Site. However, those hyperlinks are javascript function calls, which later submits a form using post method. After some search, selenium seems to be a candidate. So my question is that how should I properly set a value to an input tag and submit the form which does not a submit a button.
from selenium import webdriver
url = "http://www.echemportal.org/echemportal/propertysearch/treeselect_input.action?queryID=PROQ3h3n"
driver = webdriver.Firefox()
driver.get(url)
treePath_tag = driver.find_element_by_name("treePath")
Before submitting the form, I need to assign value to tag <input>. However, I got an error
Message: Element is not currently visible and so may not be interacted
with
treePath_tag.send_keys('/TR.SE00.00/QU.SE.DATA_ENV/QU.SE.ENV_ENVIRONMENT_DATA/QU.SE.EN_MONITORING')
IF above is correct, I would like to submit form this way. Is it correct?
selenium.find_element_by_name("add_form").submit()
Below are sources from the web page.
JavaScript function
<script type="text/javascript">
function AddBlock(path){
document.add_form.treePath.value=path;
document.add_form.submit();
}
</script>
form "add_form"
<form id="addblock_input" name="add_form" action="/echemportal/propertysearch/addblock_input.action" method="post" style="display:none;">
<table class="wwFormTable" style="display:none;"><tr style="display:none;">
<td colspan="2">
<input type="hidden" name="queryID" value="PROQ3h1w" id="addblock_input_queryID"/> </td>
</tr>
<tr style="display:none;">
<td colspan="2">
<input type="hidden" name="treePath" value="" id="addblock_input_treePath"/> </td>
</tr>
</table></form>
div with javascript call
<div id="querytree">
<h1>Property Search</h1>
<h2>Select Query Block Type</h2>
<p>Select a section for which to define query criteria.</p>
<div class="queryblocktools"><img style="vertical-align:top;" alt="Load" src="/echemportal/etc/img/load.gif"/> Load Query</div>
<ul class="listexpander">
<li>Physical and chemical properties<ul>
<li>Melting point/freezing point</li>
<li>Boiling point</li>
</ul>
</div>
You are trying to set value on hidden input is which not visible on the page, that's why error has occurred. If you want to set value on hidden field try using execute_script as below :-
treePath_tag = driver.find_element_by_name("treePath")
driver.execute_script('arguments[0].value = arguments[1]', treePath_tag, '/TR.SE00.00/QU.SE.DATA_ENV/QU.SE.ENV_ENVIRONMENT_DATA/QU.SE.EN_MONITORING')
After setting value on hidden field you can use following to submit the form :-
selenium.find_element_by_name("add_form").submit()
Hope it helps..:)
Related
I would like to make my own website, where I
use reCAPTCHA. However, I don't know how to wait after grecaptcha.execute() until the user has completed the tasks. Because now the link is called directly without passing the tasks.
For the rest I use the standard Google Script
https://developers.google.com/recaptcha/docs/invisible
It is the reCAPTCHA v2 invisible.
I would be happy about answers.
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function onSubmit(token) {
grecaptcha.execute().then(var vslg = document.getElementById("vslg").value;
window.location.replace("url");
}
</script>
</head>
<body>
<a class="button"></a>
<div class="topBar">
</div>
<div class="underTopBar">
<form action="JavaScript:onSubmit()" class="flex-itemform form" method="POST" id="formV">
<table>
<tr>
<td>
<div>
<input type="text" id="vslg" required>
</div>
</td>
<td>
<div>
<div class="g-recaptcha"
data-sitekey="..."
data-callback="onSubmit"
data-size="invisible">
</div>
<input type="submit" class="buttonDesign" value="Senden">
</div>
</td>
<tr>
</table>
</form>
</div>
I have spent more than 3 hours on this nonsense. It turned out to be a straightforward problem. I hope I can help somebody with this answer.
First, you must realize that you need 2 JavaScript functions.
1- A one that is executed after the submit button is pressed. In this function, always use:
event.preventDefault() to avoid form submission! You don't want to submit your form yet.
grecaptcha.execute() to initiate the reCAPTCHA.
You can execute this function with the submit button (onClick property).
2- A one that is executed after the reCAPTCHA is solved successfully. For this function, you only need:
document.getElementById("form").submit() to submit your form.
To execute this function, use data-callback property in your reCAPTCHA div element. As you can see in the docs, data-callback property is defined as
The name of your callback function, executed when the user submits a
successful response. The g-recaptcha-response token is passed to your
callback.
That's all you need. Make sure that your form only gets submitted with the second function you created, nothing else.
The following code does this:
The <button class="g-recaptcha"... is the Automatically bind the challenge to a button. It will automatically trigger the invisible recaptcha when the button is clicked.
Once the recaptcha is completed it will add a hidden field named g-recaptcha-response which contains the token and then run the onSubmit callback which submits the form.
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function onSubmit() {
document.getElementById("formV").submit();
}
</script>
</head>
<body>
<a class="button"></a>
<div class="topBar">
</div>
<div class="underTopBar">
<form class="flex-itemform form" method="POST" id="formV">
<table>
<tr>
<td>
<div>
<button
class="g-recaptcha buttonDesign"
data-sitekey="..."
data-callback="onSubmit"
data-size="invisible">Senden</button>
</div>
</td>
<tr>
</table>
</form>
</div>
Important: You still need to verify the token g-recaptcha-response server side. See Verifying the user's response. Without verifying the token, adding the recaptcha to the frontend doesn't stop anyone from submitting the form.
So I have this form:
<form method="post" action="index.php" id="searchform">
<input type="text" name="search" placeholder="Search...">
<input type="image" src="img/img1.png" alt="submit" onmouseover="hover(this);" onmouseout="unhover(this);" /></a>
</form>
When the user searches for something I want to change this div:
<div class = "mainText">
<h2>Today's Events: </h2>
</div>
To say this:
<div class = "mainText">
<h2>Results: </h2>
</div>
How can I do this?
EDIT: Is it possible to run this code from within a php if statement?
jquery .text() seems a better fit, so you can just change the text of the tag.
$(".mainText h2").text("Results:");
More on this here:
http://www.w3schools.com/jquery/html_text.asp
The action in your form is the destination of where your form ends up.
If you are looking to control the dom elements you need something like javascript or jquery to control the front end of your application.
You could use jquery to simply listen for when your user has clicked the button or submitted the form and parse the results (in this case, just switching html text). *Remove the the action destination otherwise the page will redirect to index.php
$('form').submit(function(){
$('.mainText').html('<h2>Results: </h2>');
return false;
});
Common usage is to put an ajax call in the submit function to retrieve some data from outside the page source. Hopefully that puts you on track :)
I am basically trying to implement this
http://www.impressivewebs.com/html5-form-attribute/
I have a cart which is outputting and sandwiched by a html table. Below the table, I currently have my submit button.
<thead>
<tr>
<th>ITEM</th>
<th>PRICE</th>
<th>WEIGHT (Kg)</th>
<th>QTY</th>
<th>SUBTOTAL</th>
<th></th>
</tr>
</thead>
<tbody>
<form action='shop.php' id='cart' method='post'>
<?php echo $cartOutput; ?>
</form>
<tr>
<td class="totals"><strong>Total</strong></td>
<td class="totals"> </td>
<td class="totals"><?php if (isset($weightTotal)) { echo $weightTotal . 'kg';} ?> </td>
<td class="totals"><?php if (isset($quantityTotal)) { echo $quantityTotal; } ?></td>
<td class="totals"><strong><?php if (isset($cartTotal)) { echo '$' . $cartTotal; } ?></strong></td>
<td class="totals"></td>
</tr>
</tbody>
/* code finishing table here */
<div class="col-lg-12 col-md-12 col-xs-12 remove-padding">
<button type="submit" class="btn btn-default" form="cart" name="adjustButton" id="adjust-button">UPDATE CART</button>
<button type="button" class="btn btn-default" form="contact" name="order" id="order-button" onclick="confirmOrder()" >ORDER NOW</button>
</div>
So because of the way I want the layout to look.. I can't put the buttons inside the form. I want to have the ability to put the update button below the cart.
Right now the order button is not a submit button but just a button. I can put it beneath its own form section but right now I force it through javascript for a confirmation and then submit the request through JS if they say OK.
I want to keep that function while supporting browsers including IE 9 +10. From what I found form="" doesn't work in IE
Can I achieve this?
Put the form tag outside all 'relevant' content (including submit button(s)):
<body>
<form>
<table>
</table>
<div>
<button>
</button>
</div>
</form>
</body>
If the button cannot be inside the form, make the form outside the
button.
This should work in all browsers:
document.getElementById('cart').submit();
You can put that in the onClick, and wrap it in a function if needed.
Edit: Since the issue (per the comments below) is that you have inputs outside the form: Really the simplest solution, and one that involves no Javascript, is to put the </form> at the end of the page (so that all your inputs and buttons will be in the form). But of course this doesn't work if you need to have more than one form on the page, and it might not even be possible depending on how the page is layed out.
If your submit button is outside the form and you have some input elements outside the form then the simplest way to send this form (without using ajax) would be to make a form and put your submit button in it.
And since your input fields are outside the form you will make a copy of those input fields inside your form and hide them with display:none; and when user changes the value of your visible input fields you will use javascript to change the value of the hidden input field.
This way you get to send the form the usual way, without the input fields having to be inside the form itself.....
You could copy the outside form elements to inside the form and sync them using JS.
http://jsfiddle.net/rudiedirkx/y0cmda4o/
if ( !('fform' in document.createElement('input')) ) {
$('input[fform], textarea[fform], select[fform]').on('change', function(e) {
this.$hidden.val(this.value);
}).each(function(i, el) {
var formId = $(el).attr('fform'),
$form = $('#' + formId),
$hidden = $('<input name="' + el.name + '" type="hidden">');
$form.append($hidden);
el.$hidden = $hidden;
});
}
As you can see, I used the fform attribute, to trigger the if statement. Change it to form and try it in IE.
Disclaimer:
This won't work with multiple value elements (like select[multiple]), or you have to add some serious JS to fake those multiple values.
This won't send the triggered button value. Normal submit buttons send only their value, and not the other submit buttons'. You could maybe add an onclick to handle that... If you use it.
I have a html page with a form and input fields. When a user enters text into the input field, at each key a database is searched for corresponding values. This is done through a Javascript call which then does an XMLHttpRequest to a PHP script. In the PHP I return a top 10 list of matches. This list is then shown on the html page.
What I now would like is to make each item in the list clickable and when clicked it should fill the form field with the value. I can make the results linkable by adding <a href> around them, but the onClick doesn't seem to work for it.
Html/PHP page with form:
<form action="index.php?page=n0402" method="post" Name="AddPolish" >
<div id="frmBrandInput">
<label for="frmBrand">Brand name:</label>
<input type="text" name="frmBrand" size="50" onkeyup="n0401CheckRecords(1);" onchange="n0401AddResults_Clear();" maxlength="100" id="frmBrand" />
</div>
<div id="ListResults">
<ul style="list-style-type:none;">
<div class="n0401AddResults" id="n0401AddResults_Status">
</div>
</ul>
</div>
<button type="submit" name="submit" value="submit-value">ADD</button>
</form>
The javascript calls the PHP and changes the n0401AddResults_Status:
function n0401CheckRecords( jsCheck){
---- xmlhttp request code and return snipped out ---
document.getElementById("n0401AddResults_Status").innerHTML = return_data;
}
The PHP page that checks the database:
While ($dbCheck_result = mysqli_fetch_row($result))
{
echo "<li class='CheckListItem' onClick='ClickMe();'><a href='".$dbCheck_result[1]."'>".$dbCheck_result[1] ."</a></li>";
}
What is the best way to structure that return string to make it clickable? Btw, I'm now using a list for it, but that is not a requirement to me.
Btw I'm NOT using JQuery.
I should have used the # for <a href>. Solution was to use this line:
echo "<li class='CheckListItem' onClick='ClickMe(\"".$dbCheck_result[1]."\");'><a href='#'>".$dbCheck_result[1] ."</a></li>";
I'm having problems with getting a login box I made to hide. Here is the HTML code I use to make the login box:
<center>
<form name=login>
<table width=225 border=1 cellpadding=3>
<tr><td colspan=2><center><font size="+2"><b>Login</b></font></center></td></tr>
<tr><td>Username:</td><td><input type=text name=username></td></tr>
<tr><td>Password:</td><td><input type=password name=password></td></tr>
<tr><td colspan=2 align=center>
<button type="button" onclick="loginNow()">Login</button>
</td></tr>
</table>
</form>
</center>
When the "Login" button is clicked, it runs some Javascript code. The loginNow() function runs, which verifies the password. Once the password is verified, I need this form to hide.
Can anyone give me some code that will work in this situation?
Wrap your form in a div with an id:
<div id="loginform">
<form>...</form>
</div>
Then, in the loginNow() function, use document.getElementById('loginform').style.visibility = 'hidden'
Add an id to the center tag like : center id="login_box"
And write this script inside the success block of the loginNow() code
$('#login_box').hide('fast');
Or if you cannot add id to the center tag then add this script inside the success block of the loginNow()code
$('center').hide('fast');
But it will hide all the center tags present in the code.