How to execute javascript after filling in a form using selenium? - python

Just getting started with selenium, this is the HTML of the page:
<div id="signInForm">
<form action="/cgi-bin/VmLoginCgi" method="POST" name="signIn1" id="signIn">
<h2 id="loginTitle">Sign in to view and change your settings</h2>
<div class="field formField noHint username clearfix">
<label for="username"></label>
</div>
<div style="position:relative;" class="field formField noHint password clearfix"><label for="password">Settings Password</label><input type="password" autocomplete="off" value="" maxlength="15" class="name required onefiftyPX inactive" name="jgwhnZLOXn" id="password" onkeypress="handleKeyPress(event)"></div>
<div>
Sign In
</div>
</form>
<p>
<span style="font-weight:bold;">Don't know your password?</span><br>You'll find your default password on the bottom of your Super Hub.
</p>
</div>
I'm filling in the text box by doing:
ele = browser.find_element_by_id("password")
ele.send_keys("supersecretpassword")
But can't submit the actual form by executing the javascript. I've tried:
browser.execute_script("SignIn()")
But get a big long error, any pointers?

Submit the form with submit():
ele.submit()
It would find the element's parent form and submit it.
Or, if that's not gonna work in your case, find the Sign In button and click it:
driver.find_element_by_link_text("Sign In").click()

Related

Handle non-submit input types in django

Okay so I have two input tags with types as buttons.
<div class="buttons-for-trade-or-sell" style="display: flex; position:relative;left: 33px; top:14px">
<div class="button-to-trade">
<input type="button" class="trade-btn" id="button-to-select-trade" name="trade1" value="Trade"></input>
</div>
<div class="button-to-sell">
<input type="button" class="sell-btn" id="button-to-select-sell" name= "trade2" value="Sell"></input>
</div>
My problem is how do I send to the server side code which button is selected. For example, if the trade-btn is selected i want the boolean to be set to true in my view. Then from there I would handle it accordingly. Basically, how do I send which button is selected to the server-side?
Thanks.
There are multiple ways to solve this. One of them is to use pure javascript and embed a hidden form_type in the form which specifies whether the form is trade or sell and assign each button to the function with different input parameter.
<from id="my_form" action="#" method="POST">
{% csrf_token %}
<input id='form_type' name='form_type' value='' class='d-none' style='display: None;'>
<div class="buttons-for-trade-or-sell" style="display: flex; position:relative;left: 33px; top:14px">
<div class="button-to-trade">
<input type="button" onclick="update_value_and_submit('trade');" class="trade-btn" id="button-to-select-trade" name="trade1" value="Trade"></input>
</div>
<div class="button-to-sell">
<input type="button" onclick="update_value_and_submit('sell');" class="sell-btn" id="button-to-select-sell" name= "trade2" value="Sell"></input>
</div>
</form>
<script>
function update_value_and_submit(val){
let ftype = document.getElementById('form_type');
ftype.value = val;
let my_form = document.getElementById('my_form');
my_form.submit();
}
</script>

Django1.8 and Python 2.7: Radio button stores the first option whatever is my choice

I'm using Django 1.8 and python 2.7
In my template I have a radio button.
<div class="form-group">
<label class="col-md-4 control-label" for="radios">Liquids:</label>
<div class="col-md-4">
<label class="radio-inline" for="radios">
<input type="radio" name="liquids" id="liquids" value="1" disabled>
With cough
</label>
<label class="radio-inline" for="radios">
<input type="radio" name="liquids" id="liquids" value="0" >
No cough
</label>
</div>
</div>
When I push the submit button whatever is my choice, the first option is taken as selected. Do you know how to fix this?
How do I get the correct value of radio choice in views.py?
Also, when I render the template having filled values with selected the 2nd option, the radio button for the first option is selected in template.
Can you provide your complete HTML page? Probably you forgot to use <form></form> HTML tag.
When you need to get the selected values of an input element you can use jQuery. The function .serializeArray(); will come in handy.
var fields = $( ":input" ).serializeArray();

400 Bad Request Error on POST request with Flask

I am attempting to return data from a HTML form with a POST request using Flask. For some reason I get a 400 Bad Request error. Looking at Chrome Dev Tools, I can see that all of the form fields with the input tag are part of the post request. The select tag with the dropwdown list is not being captured and I think this is creating the error. Anyone know why the select tag is not being captured in the post request? Any help much appreciated.
Here is the HTML form:
<label for="vendor">Select Vendor</label>
<div class="flextable p-b" style="padd">
<div class="flextable-item">
<select class="selectpicker" data-live-search="true" form="addInvoice" name="vendor" id="vendor">
<option>Jack Jaffa & Associates</option>
<option>Jacobs/Doland/Beer LLC</option>
<option>Jenkins & Huntington Inc.</option>
<option>Joseph J. Blake & Associates, Inc.</option>
<option>Langan (Geotechnical)</option>
<option>Madison Realty Capital</option>
<option>McNamara Salvia, Inc</option>
<option>Metropolis Group, Inc</option>
<option>National Grid</option>
</select>
</div>
<div class="flextable-item">
<button type="button" class="btn btn-xs btn-primary-outline">Add vendor</button>
</div>
<label for="invoice_number">Invoice Number:</label>
<input type="text" class="form-control p-b" placeholder="Every vendor invoice # must be unique" name="invoice_number" id="invoice_number">
<label for="invoice_amount">Amount:</label>
<input type="text" class="form-control p-b" placeholder="$0.00" name="invoice_amount" id="invoice_amount">
<label for="invoice_amount">Description:</label>
<input type="text" class="form-control p-b" placeholder="$0.00" width="100%" name="description" id="description">
<div class="spacer"></div>
<div class="flextable">
<div class="flextable-item">
<label for="date_received">Date received:</label>
</div>
<div>
<div class="flextable-item">
<div class="input-group">
<span class="input-group-addon">
<span class="icon icon-calendar"></span>
</span>
<input type="text" value="01/01/2015" class="form-control" data-provide="datepicker" style="width: 200px;" name="date_received" id="date_received">
</div>
</div>
</div>
</div>
</div>
<div class="modal-actions p-t-lg">
<button type="button" class="btn-link modal-action" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn-link modal-action" id="submit" >
<strong>Save + Continue</strong>
</button>
</div>
</form>
Here is the Flask python route:
#app.route('/add_invoice', methods=['GET', 'POST'])
def add_invoice():
""" Method for capturing form data to add invoice items to database"""
if request.method == 'POST':
find_cost_code = 7777 # eventually need code to lookup cost-code from POST request
print request.form['invoice_number']
print request.form['invoice_amount']
print request.form['description']
print request.form['vendor']
print request.form['date_received']
return "This is a test"
ADDED INFO:
So if I remove this line, the bad request error goes away:
print request.form['vendor']
This is because the "vendor" field is the only one in the html form that uses a select tag for input and that data is not catpured in the post request dictionary (which i can see in Chrome Dev Tool). The POST request is missing the field associated with the select tag. Not sure how to capture the select tag in the form data...
I've faced this issue many time when dealing with flask form, I think the solution is to enable csrf token protection :
according to this you need to initialise and enable it for you app!
Most of time error 400 is due to missing CSRF token.
you can do it as :
from flask_wtf.csrf import CSRFProtect
csrf = CSRFProtect(app)
for initialisation
and in your form add:
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
hope it will help!!
feel free to edit.
form="addInvoice"
This attribute as part of my HTML form markup was what caused the error. I'm not sure exactly why but when it is removed, the error goes away.
(Thanks for your help above in trying to look into this.)
You need getlist to capture select.

How can I pass my login details to a web page?

<div class="group group-form group-form-requiredinformation">
<h2 class="sr">Required Information</h2>
<ol class="list-input">
<li class="field required text" id="field-email">
<label for="email">E-mail</label>
<input class="" id="email" type="email" name="email" value="" placeholder="example: username#domain.com" required aria-required="true" aria-described-by="email-tip" />
<span class="tip tip-input" id="email-tip">This is the e-mail address you used to register with edX</span>
</li>
<li class="field required password" id="field-password">
<label for="password">Password</label>
<input id="password" type="password" name="password" value="" required aria-required="true" />
<span class="tip tip-input">
I am trying to write some code that will parse a webpage and check for updated content periodically, my problem is that I need to be logged in but I am unsure how to pass in my login details, the above is some of the source of the login page, how is it possible to achieve this?
I have tried something like the code below but to no avail.
browser = mechanize.Browser()
browser.open("https:xxxx")
browser.select_form(nr = 0)
browser.form['username'] = "email"
browser.form['password'] = "xxxxx"
browser.submit()
At least, the field is called email, not username:
browser.form['email'] = "email"
browser.form['password'] = "xxxxx"
browser.submit()
store the last updated date time in a variable and have a javascript timer function to invoke a function to check the last updated date time and if the content was updated more than the predefined time, make a call to backend and update the info on the page.
FYI.. there is no browser object. there is document object which has properties and methods to manipulate the page

Use existing html page elements (its form and button) withing django app

My goal is to run python function when a user clicks on a button within a form on my web page, when the argument is taken from textarea HTML element.
The following html code is my form with button within and is part of django application.
<div id="contact_form" class="col_400 float_l">
<form id="demoForm" name="contact" >
<label for="text">Your Review:</label>
<textarea id="text" name="text" rows="0" cols="0" class="required"></textarea>
<div class="cleaner_h10"></div>
<input type="button" onclick="return Button1_onclick()" class="submit_btn float_l" name="submit" id="predictSentBtn" value="Predict" />
</form>
</div>
I looked on django.forms and django.forms.widgets, but still don't understand how to "link" between existing html elements and python objects.
This should help:
<div id="contact_form" class="col_400 float_l">
<form id="demoForm" name="contact" >
<label for="text">Your Review:</label>
<textarea id="needid" name="needid" rows="0" cols="0" class="required"></textarea>
<div class="cleaner_h10"></div>
<input type="button" onclick="return Button1_onclick()" class="submit_btn float_l" name="submit" id="predictSentBtn" value="Predict" />
</form>
def function(request):
if request.method = 'POST':
print request.POST['needid'] # print request.POST.get('needid')
Try it ;)

Categories

Resources