Fill out text field within an element - javascript

I know there are already some threads about accessing an element within another element...I tried a lot of stuff but I can't get it to work...
JSFiddle -> http://jsfiddle.net/YcPc8/2/
What I want to do on the page is to fill out the username and the password - then click the login button.
Here is a part of the html code of the webpage:
<section id="notifications"></section>
<div style="display: block;" id="login" class="">
<div id="login-content">
<form>
<h1>Nessus Vulnerability Scanner</h1>
<input name="login" tabindex="1" placeholder="Username" maxlength="128" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" class="required login-username" type="text">
<i class="glyphicons username"></i>
<input name="password" tabindex="2" placeholder="Password" maxlength="128" autocomplete="off" class="required login-password" type="password">
<i class="glyphicons password"></i>
<div id="remember-me" class="floatleft">
<div class="checkbox login-remember"></div>
<span class="floatleft">Remember Me</span>
</div>
<button type="submit" id="sign-in" tabindex="3" class="button secondary login floatright">Sign In</button>
</form>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
<h2>Tenable Network Security</h2>
<div class="clear"></div>
Now I want to fill in the login and the password field...
Here is some of the code I tried within a javascript:
var nessus = window.open("https://localhost:8834/html5.html#/scans");
var doc = nessus.document.getElementById("login-content").getElementsByName("login");
doc.setAttribute("value","USERNAME");

element.getElementsByName("login") returns a list of elements. You might want to write this if you're sure it will return 1 element:
var doc = nessus.document.getElementsByName("login")[0];
EDIT : Moreover, getElementsByName is a method of the Document Interface. You can't use it on node element.
You'd better give an ID to your username input field, and access it directly by
var doc = document.getElementById("usernameInput");
doc.value = "USERNAME";
JSFiddle : http://jsfiddle.net/YcPc8/4/

Related

redirect event with javascript

I'm doing a project and I don't understand the front end well.
I have this html page:
<form class="form-group" action="/create" method="post" enctype="multipart/form-data">
<div class="title">
<h1>Cadastre seu produto</h1>
</div>
<div class="single-input">
<input class="form-control" placeholder="nome do produto" type="text" id="nome_produto" name="nome_produto">
</div>
<div class="single-input">
<input class="form-control" placeholder="quantidade em estoque" type="number" id="quantidade" name="quantidade">
</div>
<div class="single-input">
<input class="form-control" placeholder="preco do produto" type="number" id="preco_produto" name="preco_produto">
</div>
<button onclick="loadPage()" id="button" type="submit" class="btn btn btn-danger">ENVIAR</button>
</form>
I want that when I click on the SUBMIT button, I am redirected to another page, I want to do this using Javascript.
I tried to do this:
<script type="text/javascript">
function loadPage(){
window.location("http://localhost:8080/list")
}
but it's not working, every time I click on the button I'm redirected to a blank page
Any solution ?
Window.location is a property not a function. So it should be
window.location = "http://localhost:8080/list";
More details here: https://developer.mozilla.org/en-US/docs/Web/API/Window/location

How can I select multiple span elements?

If I select my span element by ID it gets executed but I want to select multiple span elements. I tried with class and name but it also not working.
const uname = document.getElementById('fname')
const form = document.getElementById('form')
const errorElement = document.getElementById('formerror')
form.addEventListener('submit', (e) = \ > {
let messages = \ [\]
if (uname.value === '' || uname.value == null) {
messages.push("Name is required")
}
if (messages.length\ > 0) {
e.preventDefault()
errorElement.innerHTML = messages.join(', ')
}
})
<div id="error">
<form name="signupform" action="signupdetails.php" method="get" id="form">
<input type="text" class="text" placeholder="Username" id="fname"><b><span id="formerror"></span></b>
<input type="text" class="text" placeholder="Roll:no" name="froll"><b><span id="formerror"></span></b>
<input type="email" class="text" placeholder="Email" id="femail"><b><span id="formerror"></span></b>
<i class="fa fa-eye-slash" aria-hidden="true" id="icon1"></i>
<input type="password" class="text" placeholder="Password" id="password1" name="fpass">
<i class="fa fa-eye-slash" aria-hidden="true" id="icon2"></i>
<input type="password" class="text" placeholder="Confirm Password" id="password2" name="fcpass">
<button id="btn" style="color: white;" type="submit">Sign up</button> <br> <br> <br>
</form>
</div>
An id should be unique in the entire document, see https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute
Use a class on your span elements and query them with document.querySelectorAll('.formerror').
const uname = document.getElementById('fname')
const form = document.getElementById('form')
const errorElements = document.querySelectorAll('.formerror')
console.log(errorElements)
<div id="error">
<form name="signupform" action="signupdetails.php" method="get" id="form">
<input type="text" class="text" placeholder="Username" id="fname"><b><span class="formerror"></span></b>
<input type="text" class="text" placeholder="Roll:no" name="froll"><b><span class="formerror"></span></b>
<input type="email" class="text" placeholder="Email" id="femail"><b><span class="formerror"></span></b>
<i class="fa fa-eye-slash" aria-hidden="true" id="icon1"></i>
<input type="password" class="text" placeholder="Password" id="password1" name="fpass">
<i class="fa fa-eye-slash" aria-hidden="true" id="icon2"></i>
<input type="password" class="text" placeholder="Confirm Password" id="password2" name="fcpass">
<button id="btn" style="color: white;" type="submit">Sign up</button> <br> <br> <br>
</form>
</div>
Just had a somewhat similar issue to this, & as others have already mentioned. You will want to change this snippet of code below in you're javascript
document.getElementById('formerror')
To instead
document.querySelectorAll(".formerror") // Be sure to also change from and ID to instead using classes for the form error
Also as ID's are only meant to be used once, trying to assign them and use them more than once should not work as they are meant to be unique to one element. So this is why you should instead transition to adding them as classes instead.
Now as for when you are trying to access you're span elements by Javascript, since there is more than one span element. You will need to ensure that you use the "querySelectorAll" function as this will allow you to target all of you're span elements. Otherwise if using just the "querySelector" it will only apply to the first span element, while the other two span elements remain un affected.
Hope this could help to add a bit of insight and clear some things up for you.
First change the id to a class attribute, because the id should be unique to the entire document.
<span class="formerror"></span>
Then Instead of using document.getElementById(), use document.querySelectorAll(".formerror").
It will solve your problem.

How can I append new/updated innerHTML to a p tag that doesn't have a class or id?

I'm writing out a test script where I'm wanting to select an existing p tag in a form and update the copy being used. I don't have access to the original code and having to use JavaScript only to make updates until it's approved by the client's tech lead and test results.
My original code is:
var p = document.querySelector(".form-bg form p").innerHTML;
p.innerHTML = 'By hitting Get Your Quote, I agree to receive autodialed calls, to include scheduling reminders, and texts from this company.';
However, the p tag's content isn't being updated and hitting barriers stating the code is undefined or isn't a function.
So, I attempted using .appendChild() with a thought process of creating a new element and hiding the existing if I can't update the existing copy.
My updated code using .appendChild() is:
let updatedCopy = document.createElement('p');
updatedCopy.id = 'testCopy';
updatedCopy.innerHTML = 'By hitting Get Your Quote, I agree to receive autodialed calls, to include scheduling reminders, and texts from this company';
document.getElementsByClassName('form-bg').appendChild(updatedCopy);
I've tried running this within the browser, but haven't been successful yet. Any guidance would be greatly appreciated! :)
Lastly, here's the HTML snippet with the form that's needing to be modified:
<div id="lightbox_shell">
<div class="test-w_contact-lightbox-individuals">
<div class="form-main-bg">
<div class="close-bg">
<button class="close" type="button">close</button>
</div>
<!-- Form Starts Here -->
<div class="form-bg">
<div class="legend">
Provide your information so an agent can reach you.
</div>
<form method="post">
<input name="offering" type="hidden" value="Individual"> <input name="language" type="hidden" value="English">
<div class="contact-fields">
<div class="flex_columns">
<div class="flex_2col">
<span class="input-text firstname" data-manual="1"><input class="required" id="firstname" maxlength="150" name="firstname" placeholder="First Name *" title="First Name" type="text"></span>
</div>
<div class="flex_2col">
<span class="input-text lastname" data-manual="1"><input class="required" id="lastname" maxlength="150" name="lastname" placeholder="Last Name *" title="Last Name" type="text"></span>
</div>
<div class="clearfloat"></div>
</div>
<div class="flex_columns">
<div class="flex_2col">
<span class="input-text phone" data-manual="1"><input class="required" id="phone" maxlength="12" name="phone" placeholder="Phone Number *" title="Phone Number" type="tel"></span>
</div>
<div class="flex_2col">
<span class="input-text zipcode" data-manual="1"><input class="required" id="zipcode" maxlength="5" name="zipcode" placeholder="Zip Code *" title="Zip Code" type="tel"></span>
</div>
<div class="clearfloat"></div>
</div>
<div class="flex_columns">
<div class="flex_2col">
<span class="input-text email" data-manual="1"><input class="required" id="email" maxlength="255" name="email" placeholder="Email *" title="Email" type="email"></span>
</div>
<div class="flex_2col">
<div class="requirement-info">
* fields are required
</div>
<ul class="misc">
<li>
<p>Would you like an agent to call asap?</p><label class="checkbox"><input name="yesmeet" type="checkbox"> Yes</label> <label class="checkbox"><input name="nomeet" type="checkbox"> No</label>
</li>
</ul>
</div>
<div class="clearfloat"></div>
</div>
</div>
<p style="font-size: 13px;line-height: 100%;margin: 15px 0 14px;">By hitting submit, I agree to receive autodialed calls, to include scheduling reminders, and texts from this company.</p>
</form>
</div>
<div class="raq-complete-panel">
<div class="thanks">
<div class="title">
Thank You!
</div>
<p>An agent will call you<br>
<span class="eta">within 15 minutes.</span></p>
</div>
<div class="info">
<p>Your confirmation number is <span class="number"></span>.</p>
<p>If you have any questions regarding your request, contact us at <a class="textlink" href="mailto:email#test.com">email#test.com</a></p>
<p>Please provide your confirmation number listed above for reference.</p>
</div>
</div>
<div class="clearfloat"></div>
</div>
</div>
</div>
Your first try was so close. You want your assignment to be like this:
var p = document.querySelector(".form-bg form > p");
then you can set the innerHTML.
p.innerHTML = "Your new text";

Link from a html to directly a block element on other website

Please help me, I have a html that contain a link
Sign Up
When I was click it I want to move it right into other html
<div class="containerlogin">
<div class="avatarcontainer avatar">
<img src="avatar.jpg">
</div>
<div class="Loginbox">
<div class="form">
<form class="login-form" name="login">
<p>User Name</p>
<input type="text" placeholder="Enter Your Name"/><br>
<p>Password</p>
<input type="text" placeholder="Enter Your Password"/><br>
<input type="submit" value="Login"><br>
<p class="message">Create an account? Register</p>
</form>
<form class="register-form" name="signup">
<p>User Name</p>
<input type="text" placeholder="Enter Your Name"/><br>
<p>Password</p>
<input type="text" placeholder="Enter Your Password"/><br>
<p>Email</p>
<input type="email" placeholder="Enter Your Email"/><br>
<p>Phone number</p>
<input type="tel" placeholder="Enter Yo Telephone Number"/><br>
<p>Address</p>
<input type="text" placeholder="Enter Your Address"/><br>
<button>Create Account</button>
<p class="message">Alreday Have an account? Login</p>
</form>
</div>
</div>
</div>
Javascript
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
<script>
$('.message a').click(function(){
$('form').animate({height:"toggle",opacity: "toggle"},"slow");
} )
</script>
Here is the form
https://i.imgur.com/vg27sQo.jpg
https://i.imgur.com/ogEdgSY.jpg
I use the javascript to change to login form to the sign up form but when I put a link like LoginandRegistration/Login_register.html#signup to the link on first html that can't link directly to sign up form, it still link to login form
Please help me, thanks.
The url hash is a link to an id related anchor in the page - You need to add the id to the form - such as:
<form class="register-form" name="signup" id="signup">
That said - I would do it differently - I would display only the form identified by the url hash - rather than showing both and scrolling to the indicated one.

how to get a dynamic form id generated by jsp in jquery

How to get a formId that is generated by using a jsp using jquery?
<c:url var="updateSubUserDetails" value="/employer/recruiters/updateSubUserDetails"/>
<form id="updateform${subUser.employerId}" action="${updateSubUserDetails}" method="post" >
<div class="modal-body">
<input type="hidden" name="subUserId" value="${subUser.employerId}"/>
<div class="form-group">
<input type="text" id="subUserName${subUser.employerId}" name="subUserName" class="form-control " value="${subUser.firstName}" placeholder="Edit Sub User Name"/>
</div>
<div class="form-group">
<input type="text" id="subUserEmail${subUser.employerId}" name="subUserEmail" class="form-control " value="${subUser.emailId}" onchange="checkMail(${subUser.employerId})" placeholder="Edit Email"/>
</div>
<span id="avialabilityMessage${subUser.employerId}"></span>
<div class="form-group">
<input type="text" id="subUserMobile${subUser.employerId}" name="subUserMobile" class="form-control " value="${subUser.mobileNumber}"placeholder="Edit Contact No"/>
</div>
<sec:csrfInput/>
<div class="modal-footer">
<input type="button" id="muEditButtonID" onclick="updateSubUserDetails(${subUser.employerId})" class="btn btn-warning btn-lg glyphicon glyphicon-ok-sign" value="Update"> 
</div>
</div>
</form>
How to get above dynamically generated form id in javascript jquery? Please assist me.
//if you sure there is only one form
document.forms[0]
//else
document.querySelector('[id^="updateform"]')
so, if you want to get id just add .id
//if you sure there is only one form
document.forms[0].id
//else
document.querySelector('[id^="updateform"]').id

Categories