Please help me, I stuck at likely simple task. I'm learning to webdriverjs , so I wrote a small code to register an account on FitBit site at url: www.fitbit.com/signup, after input my email and password, there is an div popup show up and ask user to fill all required field. Problem comes here, I cannot 'sendkeys' or 'click' on First Name field, could you please help me out?
my code is very simple:
const webdriver = require('selenium-webdriver');
const driver = new webdriver.Builder()
.forBrowser('firefox')
.build();
const By = webdriver.By;
// ask the browser to open a page
driver.navigate().to('https://www.fitbit.com/signup');
//Enter Email
driver.findElement(By.className('field email')).sendKeys('thisisatest#yopmail.com');
//Enter Password
driver.findElement(By.className('field password')).sendKeys('Abcd1234');
//Check check box
driver.findElement(By.id('termsPrivacyConnected')).click();
//Click Continue button
driver.findElement(By.xpath("//button[#type='submit' and #tabindex='16']")).click();
//Input First Name
driver.sleep(3000);
driver.findElement(By.xpath('//input[#id="firstName"]')).click();
driver.findElement(By.xpath('//input[#id="firstName"]')).sendKeys('why not input');
Depending on if this is a popup, a frame or another window you need a different SwitchTo() command. See: http://toolsqa.com/selenium-webdriver/switch-commands/ or here: http://learn-automation.com/handle-frames-in-selenium/
Now you added your HTML it is clear that that you don't have to Switch to fill in the popup fields. I translated your code to C# and use Chromedriver instead of Firefox and there where no problems filling in the Firstname and Lastname. So basicly nothing is wrong with your code.
Are you getting any error messages?
There is no window here, that's a tag, I posted its source code here for your reference
<section class="wrapper profile common-form">
<div class="panel panel-profile">
<h1 class="headline">
Tell Us About Yourself
</h1>
<p class="explain">
We use this information to improve accuracy.
</p>
<form method="post" autocomplete="off" name="completeProfile" action="https://www.fitbit.com/user/profile/complete" id="completeProfile" class="form">
<input name="_eventName" type="hidden" value="signupAndCompleteProfile" />
<input name="redirect" type="hidden" value="" />
<input name="csrfToken" type="hidden" value="84764c8b4da04c85a4541e49947240d0" />
<fieldset class="info-personal">
<dl class="field-group">
<dd class="left-cell">
<label class="field-label">
Name
</label>
<input autocomplete="off" tabindex="1" name="firstName" id="firstName" placeholder="First Name" type="text" class="field firstName" />
</dd>
<dd class="right-cell">
<label class="field-label"> </label>
<input autocomplete="off" tabindex="1" name="lastName" id="lastName" placeholder="Last Name" type="text" class="field lastName" />
</dd>
</dl>
<div class="clear"></div>
</fieldset>
</section>
Related
I am using formspree for a contact sheet on my site, and I am wondering if there is a way to use javascript to block profanity from being sent on the sheet, or a way to block specific words at all. The code I have is super basic so far:
<label>
Your name:
<input type="name" name="Name">
</label>
<label>
Your email:
<input type="text" name="Email">
</label>
<label>
Your message:
<textarea name="message"></textarea>
</label>
<button type="submit">Send</button>
Ideally I would want to be able to block profanity on the Your Message area. I know you can do this on formspree if you have a premium account but I am wondering if there's anyway I can do it within the code. Thank you!
You can make JS code which will work onchange of your message, if last symbol isn't letter (word is finished)read it and if it find some bad word delete it. Also you can use JQuery or write that yourself.
Also JQuery word filter
Jquery page with that function
I gave it a go using Vanilla JavaScript, but I'm not too sure if this is what you wanted. Either way, hope it helps:
<!DOCTYPE html>
<html>
<body>
<label>
Your name:
<input type="name" name="Name">
</label>
<label>
Your email:
<input type="text" name="Email">
</label>
<label>
Your message:
<textarea id="msg" name="message" ></textarea>
</label>
<button onclick="check()" type="submit">Send</button>
<script>
function check() {
const black_list = ["Pineapple Pizza"];
var description = document.getElementById("msg").value;
console.log(description);
let profane = black_list.some(word => description.includes(word));
console.log(profane);
}
</script>
</body>
</html>
I want to send input value to the to the other page in node.js.I am working on a travel agency project.So i have a buy ticket page and the page that shows your ticket including your name,surname etc.
So i want to take client's name from my input and i want to send that to ticket page and the ticket will shown client's name.I have a js file which i included that both to buy ticket and ticket page.I wrote a function for test.The function is when you click the buy ticket button in the "buy ticket" page,it will do document.write("Hi there"); Like that:
<button onlcick="buy()">Buy</button>
Js:
function buy() {
document.write("Ticket bought");
}
It worked when i click the buy button in the "buy ticket" page it writes "Ticket Bought" in the "ticket" page.Now i want to send the input value which that input including client's name,and i want to show the name on the ticket.
My code
<form class="row g-3 needs-validation" style="margin-top: 50px;" action="/ticket" method="POST" novalidate>
<div class="col-md-6">
<label for="validationCustom01" class="form-label" style="color: white;">First name</label>
<input type="text" class="form-control" id="name" value="" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-6">
<label for="validationCustom01" class="form-label" style="color: white;">Last name</label>
<input type="text" class="form-control" id="surname" value="" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<button type="submit" onclick="buy">Buy</button>
</form>
Javascript:
var user_name,user_surname;
user_name = document.getElementById("name")
user_surname = document.getElementById("surname");
function buy(){
var surnameValue,nameValue;
nameValue = user_name.value;
surnameValue = user_surname.value;
document.write(nameValue + surnameValue);
}
I want that the code will write the user's name and surname but i get an error:
Uncaught TypeError: Cannot read property 'value' of null
How can i solve that?
P.S:I have a controller.js and router.js file which control the localhost path.
I am not web developer, but I have a task to add autocomplete function for an input box. Please treat me as a very beginner.
<div>
<label id="email_label" for="send_email" style="padding-right:5px">
Send Email:
</label>
<input id="send_email" type="text" placeholder="e.g. xx.yy#zz.com" />
<button id="ack" onclick="requestAck()">
Request
</button>
</div>
requestAck() is a javascript function sending a email to address given by user (i.e. address in <input >). I am trying to add a flag in <input autocomplete="on" ...>, but it doesn't work. Perhaps because it's not in a <form></form> environment.
Could you help me to modify this code adding autocomplete (from cache) without changing other functions. Many thanks!
Try setting the property name="email" on the input tag, without that set the browser doesn't know what's supposed to autocomplete the field with :)
protip: I warmly suggest you to set the type of the input to email with type="email" instead of text, it's not required but it will help validating the input!
check this code:
<div>
<label id="email_label" for="send_email" style="paddingright:5px">Send Email:</label>
<input id="send_email" type="email" name="email" placeholder="e.g. xx.yy#zz.com" />
<button id="ack" onclick="requestAck()">Request</button>
</div>
EDIT: Final solution discussed in comments
<form onsubmit="submitForm(event)">
<label id="email_label" for="send_email" style="padding-right:5px">Send Email:</label>
<input id="send_email" type="email" autocomplete="email" name="email" placeholder="e.g. xx.yy#zz.com" />
<button id="ack" type="submit">Request</button>
</form>
<script>
function submitForm(e) {
e.preventDefault(); // this prevents the page from reloading
requestAck();
}
//dummy function so the javascript won't crash:
function requestAck() {}
</script>
Working example: https://codesandbox.io/s/focused-cray-ubkw4
I'm using JQuery Steps and I'm trying to make the last step verify what the user has put in throughout the previous steps. But the problem is that its not populating the labels with the values of the previous text boxes.
This is really confusing me because i have seen many working examples on this, but mine doesn't work? Any ideas? Am i missing something?
HTML
<label for="firstName">First Name *</label>
<input id="firstName" name="firstName" type="text">
<label for="lastname">last Name *</label>
<input id="lastname" name="lastname" type="text">
<br/><br/>
<label for="shippingaddress">Shipping Address *</label>
<input id="shippingaddress" name="shippingaddress" type="text">
<br/><hr><br/>
<p>
Name: <label id="vname"></label>
</p>
<p>
Shipping Address: <label id="vsaddress"></label>
</p>
JAVASCRIPT
$("#firstName,#lastname").change(function () {
var firstnameLAstName = $("#firstName").val()+ " " + $("#lastname").val();
$("#vname").text(firstnameLAstName);
});
$("#shippingaddress").change(function () {
var shippingAddress = $("#shippingaddress").val();
$("#vsaddress").text(shippingAddress);
});
here is my jsfiddle:
https://jsfiddle.net/7say10d8/4/
i even tried adding something to OnChanging
Remember import Jquery
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
its working https://jsfiddle.net/cmedina/7say10d8/5/
I am creating a checkout page and I cannot figure out how to do the following. When the customer enters their shipping information, I want to display that same information further down the page in a confirmation section. I will not be submitting the information until the customer places the order, so there is no way to echo this information as I won't be submitting to my db until after they submit it.
I looked into this and I see things with a data-copy function and that is basically what I need except I do not want the copied data to show up in an input field. I just want it to display the text.
So if I had the following field:
Shipping street:
123 Main St.
I would want the 123 Main St to show up in a different section of the page.
I tried doing the data-copy function and I couldn't even get that to work. I'm not sure if this is the best method to use for this. I do not want the copied data to be editable. I have disabled that from my code.
I tried doing this:
<div class="field">
<label class="paddingleft" for="fullname">Full Name</label>
<div class="center"><input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="name" name="ShipToFullname" required> </div>
</div>
This is the confirmation part farther down the page:
<p><input type="text" class="preview" id="name" disabled></p>
The Jquery
$(document).ready(function() {
$(".preview").keyup(function() {
var ElemId = $(this).data('copy');
$("#"+ElemId).val($(this).val());
});
});
Is there a better way I can do this and most importantly an input field not show up with the copied data?
UPDATED CODE
<div class="center">
<div class="field">
<label class="paddingleft" for="fullname">Full Name</label>
<div class="center"><input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required></div>
</div>
Confirmation part
<p>Shipping to:</p>
<p><div class="preview" id="name"></div></p>
The Jquery
$(document).ready(function() {
$(".preview").on('keyup', function() {
$($(this).data('copy')).html($(this).val());
});
});
Is this what you want?
Note that data-copy="name" should now be data-copy="#name" for it to work
$(document).ready(function() {
$(".preview").on('keyup', function() {
$($(this).data('copy')).html($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field">
<label class="paddingleft" for="fullname">Full Name</label>
<div class="center">
<input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required>
</div>
</div>
<br>
Your name is:
<div id="name"></div>
Simply change
var ElemId = $(this).data('copy');
$("#"+ElemId).val($(this).val());
to
$('#name').val($('#ShipToFullname').val());
Basicaly it says to set the value of id nameto the value of id ShipToFullname
Here the fiddle => http://jsfiddle.net/9sgcydmg/1/
If you don't want to output the data in another input you can simply set an id to any html element and use instead:
$('#name').html($('#ShipToFullname').val());
Here the fiddle => http://jsfiddle.net/89oeyq0h/
FINAL ANSWER : in it's most simple way, using jQuery, i would do something like this:
<input onkeyup="$('#name').html(this.value)" ... />
<p id='name'></p>
<input onkeyup="$('#addr').html(this.value)" ... />
<p id='addr'></p>
and so on...
http://jsfiddle.net/oky005a0/