Javascript making submit button non functional - javascript

I am using velocity scripting for a web page.I have a hidden field that I am populating with value entered with the value entered in another field ( JS fiddle: http://jsfiddle.net/x1bdgvyt/). when I try to implement the javascript with my existing code base the submit button doesn not function anymore. IIt works fine before I plug in the JS. Clicking on it doesnt do anything. I am not sure what is wrong. Any help is much appreciated.
HTML submit button code
<div>
<ul class="action">
<li> <input class="Orange_button" type="submit" value="Start my free trial">
<div class="sub-text"> TEXT TEXT TEXT </div> </li>
<div class="column">
<li>
<span > | </span><br/>
<span > or </span><br/>
<span > | </span>
</li>
</div>
<li> <input class="green_button" type="submit" value="Buy it now">
<div class="sub-text"> TEXT TEXT TEXT </div> </li>
</ul>
</div>
Java script code
$('form').on('submit', function(e){
$('[name="retype-email"]').val($('[name="email"]').val());
e.preventDefault()
});

By including e.preventDefault() you're blocking the default behavior of the button. Remove it.

Related

using smooth-scroll plugin on a button

I'm using the Smooth-Scroll plugin from the following git - link.
It works great in places like navbar where I used it as follows:
<nav class="navbar">
<ul>
<li>Home</li>
<li>Skills</li>
<li>Service</li>
<li>end</li>
</ul>
</nav>
<script>
var scroll = new SmoothScroll('a[href*="#"]');
</script>
However, on the same screen, I have a search button inside a form and I had liked it to act as the navbar - I want that once the user clicks on the search button it will smooth-scroll to the next section.
My form looks like this and I tried the following:
<form method="POST" class="hiscore_query">
<input type="text" placeholder="username" id="username" autocomplete="off">
<button type="submit" href="#skills"><i class="fa fa-search"></i></button>
</form>
and I tried to change my js into:
<script>
var scroll = new SmoothScroll('button[href*="#"]');
</script>
but nothing happens.
Is there any way to make that search button do that smooth scroll?
Thank you
<button>s can't be used as links. Change <button type="submit" href="#skills"><i class="fa fa-search"></i></button> to <i class="fa fa-search"></i>.

A href through $ variable javascript/html

So I am trying to get the firebase link that the user has provided and make it a clickable link. I have this so far
<li>
<div class="collapsible-header grey lighten-4">${forum.title}</div>
<div class="collapsible-body white">
${forum.content} <br />
<p>${forum.link}</p>
</div>
</li>
I want to make forum.link clickable but don't know how to add a href before a variable.
Thanks
Can you try this:
<div class="collapsible-body white">
${forum.content} <br/>
<p>
Link Description
</p>
</div>

Webdriver cannot find xpath of "new loaded element"

Currently I am trying to scrape some information off the web, but I kinda ran into a dead end.
So in order to get the data I want, I need to select the right currency off of a list. I click the link to change the currency and via java script the site gets another chunk of html that contains the list and opens an overlay, where I can select the right currency.
I tried to locate the div in which the list is stored:
driver.find_elements_by_xpath("//html/body/div[19]/div[2]/div/div/div[2]/form/div[2]")
I tried the list itself but I wasnt able to locate the element.
Then I wanted to see if something is found and using the following:
len(driver.find_elements_by_xpath("//html/body/div[19]/div[2]/div/div/div[2]/form/div[2]"))
the answer 0 was provided, so my webdriver wasnt able to locate the newly added chunk of html.
This is the newly added html:
<div class="module">
<div class="modal_mask" style="opacity: 0.5;"/>
<div class="modal_scroller">
<div class="modal_container" style="margin-top: 164.5px;">
<div class="modal_ship" style="margin: 0px auto;">
<div class="modal_title">
Address Currency
<i onclick="modal_remove();">×</i>
</div>
<div class="modal_ship_con">
<h3>Please select your shipping destination & currency</h3>
<p>Price may differ based on your Shipping destination.</p>
<form action="#" method="get">
<input value="81" name="country_sel" type="hidden"/>
<input value="USD" name="currency_sel" type="hidden"/>
<div class="currency">
<b>Currency:</b>
<div class="currency_list">
<div class="active">
<i class="arrow_a">
<i/>
</i>
<span>
USD
<u>US$</u>
</span>
</div>
<div class="currency_box" style="display: none;">
<ul>
<li sel="USD">
USD
<u>US$</u>
</li>
<li sel="EUR">
EUR
<u>€</u>
</li>
<li sel="GBP">
GBP
<u>£</u>
</li>
<li sel="AUD">
AUD
<u>AU$</u>
</li>
<li sel="CAD">
CAD
<u>CA$</u>
</li>
</ul>
</div>
</div>
</div>
<div class="submit">
<input onclick="saveShip(0);" value="Save" type="button"/>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
And this where I have to click:
<div class="active">
<i class="arrow_a">
<i/>
</i>
<span>
USD
<u>US$</u>
</span>
</div>
So now my question: is there any possibility to get to the newly added html code? Is there something like "refresh webdriver"?
Regards
I think you can simply use time.sleep() before trying to capture the button you want to click.
Just use this:
import time
time.sleep(2) #you can keep this behind the code for clicking the button
This will make selenium wait for sometime so that the code can load and then only selenium will click it
you can keep any no. of seconds instead of 2,I just kept it for an example

RobotFramework/JavaScript automated tree checkbox click and icon check with various tree element id

I have dynamically generated tree html code like below:
<div class="treeDiv">
<ul id="tree" class="ztree">
(...)
<li id="tree_115" class="level2" treenode="">
<button id="tree_115_switch" class="level2 switch bottom_open" treenode_switch="" title="" type="button"></button>
<button id="tree_115_check" class="chk checkbox_false_full" onfocus="this.blur();" treenode_check="" type="button"></button>
<a id="tree_115_a" class="level2" title="myItem" style="" target="_blank" onclick="" treenode_a="">
<button id="tree_115_ico" class="ico_open" treenode_ico="" title="" type="button" style="background:url(./images/icon.png) 0 0 no-repeat;"></button>
<span id="tree_115_span">
myItem
</span>
</a>
<ul id="tree_115_ul" class="level2" style="display:block"></ul>
</li>
</ul>
</div>
And i have to automate setting true various checkboxes (in this case tree_115_check) and after that and after clicking OK button on this page and some operations, i have to check whether icon.png changed to OK.png. I have to reffer to object by its name, because before executing test i will know myItem name, but i won't know which element of the tree it will be. Do you know how to do that using RobotFramework or JavaScript? It will be simple, if i will know ID of all checkboxes, icons, etc, but how to do that when it is various and I know just, that i have to find "myItem" element of tree, its checkbox and status icon?
Thank You in advance for your support.

issue with jquery external linking

I am working on jquery. I have 4 tabs within the <li> tags. I have used jquery 1.9.1.js for my project. my <li> looks like the one below. I got a solution to use http://www.asual.com/jquery/address/docs/#api-reference. But the fact is that I have used and imported this external lib but it doesn't seem to work. The thing which i am trying to attain is when ever I select the specific <li> item and press f5 the page by default loads the first <li> item. But the thing which I am looking for is , it has to load the same selected <li> item and its contents when refreshed. any help would be appreciated.
Here is my HTML code:
<div class="container">
<div class="coolbar">
<div class="cool-inner">
<ul id="mybar" class="nav cool-tabs">
<li class="Coke">
Coke <span class="dashboard-bottom"></span>
</li>
<li class="Fanta">
Fanta<span class="Pricing-bottom"></span>
</li>
<li class="Pepsi">
Pepsi<span class="Promotion-bottom"></span>
</li>
<li class="Limca">
Limca<span class="Product-bottom"></span>
</li>
</ul>
</div>
</div>
</div>.
<div id="login">
<button type="button" id="submit" value="Login" class="btn">Click me for cool drinks</button>
</div>
And my jquery code for page refresh:
$(function() {
$('#submit').click(function() {
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
Thanks in advance.
when activating the tab you may want to set the tabs position/value in the cookie and when the page loads, check if tabs position/value exist in the cookie, then accordingly activate that tab or trigger click event on that tab.
may this help

Categories