Use JavaScript to automatically fill in HTML forms - javascript

I'm trying to automate a test routine in a web application. My goal is to fill forms, submit them and get the html returned by the application after the form is submited. In other words, i want to simulate what a human would do, but as i need to do this in dozens of forms, i want to do it automatically using pure JS (no frameworks).
For instance, a login form i'm trying to submit looks like this :
To fill the form i'm using a code like this :
document.getElementById('username').value = 'test#test.com';
document.getElementById('password').value = 'mypassord';
But it seems the information is not being correctly filled ; after i run the code above, the form looks like this :
As you can see, the placeholder is still on the inputs and if i submit the form, the input values are not submited. It seems the 'value = 'xxx'' is not effectively filling the field.
It only works if i manually input something on the keyboard after running the code above.
What else can i try ?
Thanks !

Here is the complete code. Run on your browser hope it will works for you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="This is text Field" id="txtField">
<input type="password" placeholder="Input password" id="txtPass">
<script>
document.getElementById('txtField').value = 'test#test.com';
document.getElementById('txtPass').value = 'test#123';
</script>
</body>
</html>

Related

unable to email using EmailJS without alert

I am trying out EmailJS.com service with the following snippets:
The HTML part:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Daily Report</title>
<script src="https://cdn.emailjs.com/dist/email.min.js"></script>
<script src="tst.js"></script>
<noscript>Please enable JavaScript.</noscript>
</head>
<body onLoad="today()">
<h1 id="today"></h1>
<hr>
<form onSubmit="draft()">
<fieldset>
<legend>Message</legend>
<textarea id="shout" rows="2" cols="97">TEST.</textarea><br>
<input type="submit" value="Email">
</fieldset>
</form>
</body>
</html>
The JavaScript part:
var s = new Date().toDateString();
function today() {
emailjs.init("EMAILJSASSIGNED");
document.getElementById("today").innerHTML = s;
}
function draft() {
var m = s + "<br>";
m += document.getElementById("shout").value + "<br>";
emailjs.send("EMAILJS_service", "TEMPLATE", {"body":m});
//alert(m);
}
I found that the code worked (ie, emailed according to my template specs) only if I add the alert(m) line. Seems like alert triggers a submit event to execute emailjs.send(). Without the alert, the emailjs.send is "skipped". I don't understand why.
The reason the email is not sent without the alert is because once you submit the form the page is reloaded, and the browser doesn't have a chance to complete the emailjs.send() request.
One easy solution is to add "return false" to the onSubmit statement, as follows:
<form onSubmit="draft(); return false;">
That will prevent the form from being submitted though, so if you do need the form to be submitted to the server you'll need to do this asynchronously, after the promise returned by emailjs.send() is resolved.
You can read more on emailjs.send() syntax, with and without promises here:
https://www.emailjs.com/docs/api-reference/emailjs-send/
Hope this helps!

Why isn't my JS function working when I call it through "onchange" in an html form?

Okay, I should preface this by saying I'm pretty new to JS and HTML.
I am attempting to write a simple page that will take the value a user types into the form and use it to make a call to the Spotify api via my findArtist() function. I've set the project up with npm and have the proper dependencies in the node-modules directory and all of that stuff.
Here is my code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>My Title</title>
</head>
<body>
<header>
<h1>My Header</h1>
</header>
<section>
<form>
Search for an artist! <br/>
<input type="text" name="searchrequest" value="" onchange="findArtist()">
</form>
</section>
<script>
function findArtist () {
var artistName = document.getElementsByName("searchrequest")[0].value;
spotifyApi.searchArtists(artistName)
.then(function(data) {
console.log(data.body);
}, function(err) {
console.error(err);
});
}
</script>
</body>
</html>
When I type something in the search bar, I expect to see the call occur in my browsers console, where the JSON should be logged thanks to findArtist(), but nothing happens. Is this because I am attempting to use node when I should be using plain JS? Do I have to setup a server to make the call? I'm rather confused as to what my actual problem is.
I would like to add that I realize using onchange to call my function is going to put me over my api limit, so a suggestion on a better way to call the function would be appreciated as well.
Thanks for the help.
onchange detects changes only after you lose focus or blur from the textbox.
As this answer says oninput might just be the right method to look upto.

Jquery with dynamic paragraphs

im doing a school work with Jquery and I just want to know if its possible and how to do the following:
Page A has the following : external JS file that has the function to allow a user to enter some text and then when they press the submit button that text is automatically put as the paragraph text as ive use JS to get the element and replace the text using innerhtml.
External JS file:
function grabText() {
var grabThePara = document.getElementById("firstP").value;
var intoParagraph = document.getElementById("pOne").innerHTML = grabThePara;
}
HTML FILE :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
<input type="text" id="firstP" name="firstP">
<br />
<p id="pOne">Static works fine -- > this is the static</p>
<input type="button" onclick="grabText()" value="Submit">
GO to JD Panel
</body>
</html>
Page B has the Jquery part, this has the code that will grab the text from the Page A's first paragrpah called ID pOne, it gets the text without an issue if its STATIC input but the moment you use as described previous by using the textbox and dynamically changing the text of the paragraph the page A does the change but Page B still shows the static text input, not the new dynamic changes that occurred after input-ed into the textbox and submitted. I will show code.
Page B code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="ts.js"></script>
</head>
<body>
Change the text again
<script type="text/javascript">
jQuery.ajax({
url: "adminPanel.html",
success: function (printIt) {
var html = jQuery('<p>').html(printIt);
var grabIt = html.find("p#pOne").html();
var sendItToParaOne = document.getElementById("paraOne").innerHTML = grabIt;
}
});
</script>
<p id="paraOne"></p>
</body>
</html>
Sorry for my English i know its not the best. thanks for taking the time in reading my issue and any helps is appreciated
Thanks again!
M
You need to save your data somewhere. If you don't want to work with a database, you can use HTML 5 web storage: http://www.w3schools.com/html/html5_webstorage.asp
Furthermore, looking at your external JS file, you might want to have a look at jQuery selectors: http://www.w3schools.com/jquery/jquery_selectors.asp
I hope this helps you.
You're confusing yourself by thinking that pages are able to talk to each other. Your page A has to send the changes to the server, but the server also has to be programmed to listen to those changes in server code like PHP or ASP.NET. Only then can page B get the changes made by page A.

How to load php file with JS code

Since I am new to JS coding and web designing, I have a following doubt:
I have one html page which has onclick function for form text area. If text area remains empty and user clicks submit, it should display message to enter entry and if entry is right one the corresponding file should get open. I have if/else condition in JS file, which is giving appropriate message while text area remains empty but not loading file which I am mentioning when entry is not empty.
Below is the html snippet:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
</head>
<body>
<form name="drugform" action="#">
<pre> Drug Name<input type="text" name="name1" value="" /></pre>
</p>
<input type="button" value="Enter" onclick='buttoncheck()' />
</form>
<script type="text/javascript" src="if-else-button.js"></script>
</body>
</html>
and JS code is:
function buttoncheck() {
if (Boolean(document.drugform.name1.value)) {
load(form1.php);
} else {
alert('Enter Drug name');
}
}
How to load file with js code (mentioned in if condition)?
if you want to load that form1.php file in existing file then you can use ajax for for reference go here.
and if you want to redirect to another page then you should use
window.location.href = "form1.php";
var url = 'form1.php';
window.location.href = url;
Instead of load(form1.php), substitute the above code snippet!
EDIT:
If you want to load the file without actually redirecting to a new page, you can use jquery's .load()
Check more about it here: http://api.jquery.com/load/
try like this,
function buttoncheck() {
if (document.drugform.name1.value != "") { // check not empty condition
load("form1.php"); // passing value to function with quotes
} else {
alert('Enter Drug name');
}
}

Get value of html text box in Apps Script function

Something is wrong here, and all the suggestions I've tried from others with similar questions don't seem to work.
I have two files: myPage.html and myCode.gs in google scripts. I have deployed the html file as a web app, and I have figured out (with help) how to make the onclick event for the 'submit' button to trigger the emailTech function from the myCode.gs file just fine.
Now I want to insert the value from the text box in the html file into the email that is called from the onClick event. I have tried document.getElementById('textBoxId').value, but I get the following error "Reference Error: "document" is not defined. " What gives?
myPage.html file:
<html>
<head>
<title>Test Page</title>
</head>
<body>
<input type="button" onClick="google.script.run.emailTech();" value="Submit" />
<input type="text" value=" " id = "textBox" name = "textBox" />
</body>
<script type="text/javascript">
</script>
</html>
myCode.gs file:
function doGet() {
return HtmlService.createHtmlOutputFromFile('myPage');
}
function emailTech(){
var nameBox = document.getElementById('textBox').value;
var message = "This is the text box value" + nameBox;
MailApp.sendEmail("123#xyz.com", "This is the subject", message );
}
The error message is correct - in your Apps Script function emailTech(), there is no variable in scope that's named document.
You've got two different ways of deploying Apps Script WebApps mixed up. Since you're using the HTML Service (and your user interface is an html file), you can't use the UI Service methods (like getElementById()) to access input values. So, you'll do something different.
To tie the submit button and input field together, use a form, enclosed in <form> tags. The submit button will still have an onclick function, but now it will be a javascript function embedded in your HTML, which will pass all the input from the form to your emailTech() function.
In your apps-script-side handler, you'll receive the form input as an Object, with the fields from the form as key-value pairs. The key is the name from the field.
The general solution is described in this answer. Here's a version that fits your code. I've left out the success and failure handling that Arun shows. You should build in error checking before deploying this in real life, of course.
Code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('myPage');
}
function emailTech(form){
var nameBox = form.techEmail;
var message = "This is the text box value" + nameBox;
MailApp.sendEmail("email#somewhere.com", "This is the subject", message );
}
myPage.html
<html>
<head>
<title>Test Page</title>
</head>
<body>
<form>
<input type="text" value=" " name="techEmail" />
<input type="button" onClick="formSubmit()" value="Submit" />
</form>
</body>
<script type="text/javascript">
function formSubmit() {
google.script.run.emailTech(document.forms[0]);
}
</script>
</html>

Categories