I'm trying to make an auto-login using Greasemonkey.
Can anyone help me?
Relevant HTML source:
<div id="login-main">
<div id="login-container">
<div id="login-left">
<div id="welcome">Welcome</div>
<form id="login-form" action="auth/login" method="post">
<div>
<label for="rememberme">Remember me</label>
<input type="checkbox" class="remember" checked="checked" name="remember me"/>
<label for="email" id="email-label" class="no-js">Email</label>
<input id="email-email" type="text" name="handle" value="" autocomplete="off"/>
<label for="combination" id="combo-label" class="no-js">Combination</label>
<input id="password-clear" type="text" value="Combination" autocomplete="off"/>
<input id="password-password" type="password" name="password" value="" autocomplete="off"/>
<input id="sumbitLogin" class="signin" type="submit" value="Sign In"/>
</div>
</form>
var f = document.getElementById("login-form");
f.elements.namedItem("email-email").value = "email#email";
f.elements.namedItem("password-password").value = "password";
f.submit();
Related
I am new to HTML and Javascript. I was working on creating a basic login screen.
As I am trying to print the value of the email and the password in the console, I get nothing. Can someone help me out?
document.querySelector('.form').addEventListener('submit', (e) => {
e.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
console.log(email, password);
});
<div class="login-form">
<h2 class="heading-secondary ma-bt-lg">Log into your account</h2>
<form class="form"></form>
<div class="form__group">
<label class="form__label" for="email">Email address</label
><input
class="form__input"
id="email"
type="email"
placeholder="you#example.com"
required=""
/>
</div>
<div class="form__group ma-bt-md">
<label class="form__label" for="password">Password</label
><input
class="form__input"
id="password"
type="password"
placeholder="••••••••"
required=""
minlength="8"
/>
</div>
<div class="form__group">
<button class="btn btn--green">Login</button>
</div>
</div>
<!-- <script src="/js/login.js"></script> -->
That's because <form class="form"></form> is empty, you should put the inputs inside it.
<div class="login-form">
<h2 class="heading-secondary ma-bt-lg">Log into your account</h2>
<form class="form">
<div class="form__group"><label class="form__label" for="email">Email address</label><input class="form__input" id="email" type="email" placeholder="you#example.com" required="" /></div>
<div class="form__group ma-bt-md"><label class="form__label" for="password">Password</label><input class="form__input" id="password" type="password" placeholder="••••••••" required="" minlength="8" /></div>
<div class="form__group">
<button class="btn btn--green">Login</button>
</div>
</form>
</div>
I have a problem. I want to display different types of forms such as the form for adding, the form for modifying, and the form for deleting based on the user input by using a JavaScript switch statement. So if the user input "A", the add form will show up, when the user input "B" then the modify form will show up, etc. The problem here is it doesn't matter what I typed in nothing shows up. Can someone explain it to me? Thank you.
Note: The CSS for the forms display: none; because I don't want the forms to show up when the page load. I just want base on the user input, then the specific form will show. I want to make the dropdown list instead of typing in the box, but it is not easy to do it.
var val=document.getElementById("user").value;
var check=document.getElementById("enter");
function change(){
switch(val){
case 'A': {
document.getElementById("add").style.display="block";
break;
}
case 'B': {
document.getElementById("modify").style.display="block";
break;
}
case 'C': {
document.getElementById("delete").style.display="block";
break;
}
}
}
check.addEventListener("click", change);
div#add, div#modify, div#delete{
display: none;
}
<div id="add">
<div id="add_task_form">
<button id="add_task">Add New Task</button>
<form id="add_form" name="task_form" method="post">
<div id="title_form">
<label for="title">Title</label>
<input type="text" name="title" id="title"><br>
</div>
<div id="description_form">
<label for="description">Description</label>
<input type="text" name="description" id="description"><br>
</div>
<div id="due_date_form">
<label for="due_date">Due Date</label>
<input type="text" name="due_date" id="due_date" placeholder="yyyy-mm-dd"><br>
</div>
<div id="time_form">
<label for="time">Time</label>
<input type="text" name="time" id="time" placeholder="hh:mi"><br>
</div>
<input id="submit_add_form" type="submit" name="submit" value="Save">
</form>
<br>
</div>
</div>
<div id="modify">
<div id="modify_task_form">
<button id="modify_task">Modify Task</button>
<form id="modify_form" name="modify_form" method="post">
<div id="modify_section">
<label for="modify_com_in">What section?</label>
<input type="text" id="modify_com_in" name="modify_com_in" placeholder="Complete or Incomplete"><br>
</div>
<div id="modify_section_id">
<label for="modify_com_in_id">What ID?</label>
<input type="text" id="modify_com_in_id" name="modify_com_in_id"><br>
</div>
<div id="title_modify_form">
<label for="modify_title">Title</label>
<input type="text" name="title" id="modify_title"><br>
</div>
<div id="description_modify_form">
<label for="modify_description">Description</label>
<input type="text" name="description" id="modify_description"><br>
</div>
<div id="due_date_modify_form">
<label for="due_date">Due Date</label>
<input type="text" name="due_date" id="modify_due_date" placeholder="yyyy-mm-dd"><br>
</div>
<div id="time_modify_form">
<label for="modify_time">Time</label>
<input type="text" name="time" id="modify_time" placeholder="hh:mi"><br>
</div>
<input id="submit_modify_form" type="submit" name="modify" value="Modify">
</form>
<br>
</div>
</div>
<div id="delete">
<div id="delete_task_form">
<button id="delete_task">Delete Task</button>
<form id="delete_form" name="delete_form" method="post">
<div id="delete_section">
<label for="delete_com_in">What section?</label>
<input type="text" id="delete_com_in" name="delete_com_in" placeholder="Complete or Incomplete"><br>
</div>
<div id="delete_section_id">
<label for="delete_com_in_id">What ID?</label>
<input type="text" id="delete_com_in_id" name="delete_com_in_id"><br>
</div>
<input id="submit_delete_form" type="submit" name="delete" value="Delete">
</form>
<br>
</div>
</div>
<label for="user">User</label>
<input id="user" type="text" name="user">
<input type="button" value="Enter" id="enter">
Try this to use a dropdown menu instead:
<label for="action">Choose an action:</label>
<select id="action" name="action" onchange='onSelectChangeHandler()'>
<option value="add">Add</option>
<option value="modify">Edit</option>
<option value="delete">Delete</option>
</select>
and the Javascript code:
function onSelectChangeHandler() {
var val = document.getElementById("action").value;
switch (val) {
case "add":
// document.getElementById("add").style.display="block";
console.log("Show form Add");
break;
case "modify":
// document.getElementById("modify").style.display = "block";
console.log("Show form Modify");
break;
case "delete":
// document.getElementById("delete").style.display = "block";
console.log("Show form Delete");
break;
}
}
Just remove the comments if it works.
But you could also remove the switch statement by simply doing:
function onSelectChangeHandler() {
var val = document.getElementById("action").value;
document.getElementById(val).style.display="block";
console.log("Show form ", val);
}
That is if the option value(s) are the exact same as their id tags counterparts
You need to get the value of user input inside change function.
var check=document.getElementById("enter");
function change(){
var val=document.getElementById("user").value;
switch(val){
case 'A': {
document.getElementById("add").style.display="block";
break;
}
case 'B': {
document.getElementById("modify").style.display="block";
break;
}
case 'C': {
document.getElementById("delete").style.display="block";
break;
}
}
}
check.addEventListener("click", change);
div#add, div#modify, div#delete{
display: none;
}
<div id="add">
<div id="add_task_form">
<button id="add_task">Add New Task</button>
<form id="add_form" name="task_form" method="post">
<div id="title_form">
<label for="title">Title</label>
<input type="text" name="title" id="title"><br>
</div>
<div id="description_form">
<label for="description">Description</label>
<input type="text" name="description" id="description"><br>
</div>
<div id="due_date_form">
<label for="due_date">Due Date</label>
<input type="text" name="due_date" id="due_date" placeholder="yyyy-mm-dd"><br>
</div>
<div id="time_form">
<label for="time">Time</label>
<input type="text" name="time" id="time" placeholder="hh:mi"><br>
</div>
<input id="submit_add_form" type="submit" name="submit" value="Save">
</form>
<br>
</div>
</div>
<div id="modify">
<div id="modify_task_form">
<button id="modify_task">Modify Task</button>
<form id="modify_form" name="modify_form" method="post">
<div id="modify_section">
<label for="modify_com_in">What section?</label>
<input type="text" id="modify_com_in" name="modify_com_in" placeholder="Complete or Incomplete"><br>
</div>
<div id="modify_section_id">
<label for="modify_com_in_id">What ID?</label>
<input type="text" id="modify_com_in_id" name="modify_com_in_id"><br>
</div>
<div id="title_modify_form">
<label for="modify_title">Title</label>
<input type="text" name="title" id="modify_title"><br>
</div>
<div id="description_modify_form">
<label for="modify_description">Description</label>
<input type="text" name="description" id="modify_description"><br>
</div>
<div id="due_date_modify_form">
<label for="due_date">Due Date</label>
<input type="text" name="due_date" id="modify_due_date" placeholder="yyyy-mm-dd"><br>
</div>
<div id="time_modify_form">
<label for="modify_time">Time</label>
<input type="text" name="time" id="modify_time" placeholder="hh:mi"><br>
</div>
<input id="submit_modify_form" type="submit" name="modify" value="Modify">
</form>
<br>
</div>
</div>
<div id="delete">
<div id="delete_task_form">
<button id="delete_task">Delete Task</button>
<form id="delete_form" name="delete_form" method="post">
<div id="delete_section">
<label for="delete_com_in">What section?</label>
<input type="text" id="delete_com_in" name="delete_com_in" placeholder="Complete or Incomplete"><br>
</div>
<div id="delete_section_id">
<label for="delete_com_in_id">What ID?</label>
<input type="text" id="delete_com_in_id" name="delete_com_in_id"><br>
</div>
<input id="submit_delete_form" type="submit" name="delete" value="Delete">
</form>
<br>
</div>
</div>
<label for="user">User</label>
<input id="user" type="text" name="user">
<input type="button" value="Enter" id="enter">
Trying to target only parent divs that have child with class="has-error"
I'm using the following, but scope inside of conditional is referring to #pdf-form. Please advise how to fix.
JS:
$( "#pdf-form" ).submit(function( event ) {
if ($(".form-control").hasClass("has-error")) {
$(this).parent().addClass('has-error');
}
event.preventDefault();
});
HTML:
<form action="http://example.com" accept-charset="utf-8" id="pdf-form" enctype="multipart/form-data" method="post" novalidate="novalidate">
<div style="display:none">
<input type="hidden" name="params_id" value="363">
<input type="hidden" name="csrf_token" value="668186205c07bd680af53ba2f5f05ca78143a43d">
</div>
<div class="form-group">
<label for="email" class="control-label">Email</label>
<input type="text" name="email" value="" id="freeform_email" maxlength="150" class="form-control has-error" required="" aria-required="true" aria-describedby="freeform_email-error" aria-invalid="true">
<div id="freeform_email-error" class="has-error">Please Enter a Valid Email Address</div>
</div>
<div class="form-group">
<label for="first_name" class="control-label">Name</label>
<div class="row">
<div class="col-sm-6">
<input type="text" name="first_name" value="" id="freeform_first_name" maxlength="150" class="form-control" placeholder="Your first name">
</div>
<div class="clearfix visible-xs" style="height: 10px;"></div>
<div class="col-sm-6">
<input type="text" name="last_name" value="" id="last_name" maxlength="150" class="form-control" placeholder="Your last name">
</div>
</div>
</div>
<div class="form-group hidden">
<label class="control-label">report</label>
<input type="file" name="report[0]" value="" id="freeform_report0">
</div>
<input type="hidden" name="pdf_press_entries" value="77|8">
<input type="hidden" name="pdf_press_template" value="site/email_pdf_report">
<input type="hidden" name="pdf_press_upload_fieldname" value="report">
<input type="hidden" name="pdf_press_filename_fieldname" value="report_filename">
<p><input type="submit" name="submit" value="Submit" class="btn btn-primary"></p>
</form>
It's still unclear exactly what you are looking for. I suspect your initial setup is not quite correct, but this should give you an idea of how to access the parent elements that contain error controls.
It won't work here in the Stack Overflow snippet environment, because they disable submit events, but you can see it working here. I added an additional class to illustrate what is getting selected when you click submit.
$( "#pdf-form" ).submit(function( event ) {
var $errorElements = $(".form-control.has-error");
$errorElements.parent().addClass('added-error');
// If there are error elements, don't submit the form
$errorElements.length > 0 ? event.preventDefault() : "";
});
.has-error { background:red; }
.added-error { border:2px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://example.com" accept-charset="utf-8" id="pdf-form" enctype="multipart/form-data" method="post" novalidate="novalidate">
<div style="display:none">
<input type="hidden" name="params_id" value="363">
<input type="hidden" name="csrf_token" value="668186205c07bd680af53ba2f5f05ca78143a43d">
</div>
<div class="form-group">
<label for="email" class="control-label">Email</label>
<input type="text" name="email" value="" id="freeform_email" maxlength="150" class="form-control has-error" required="" aria-required="true" aria-describedby="freeform_email-error" aria-invalid="true">
<div id="freeform_email-error" class="has-error">Please Enter a Valid Email Address</div>
</div>
<div class="form-group">
<label for="first_name" class="control-label">Name</label>
<div class="row">
<div class="col-sm-6">
<input type="text" name="first_name" value="" id="freeform_first_name" maxlength="150" class="form-control" placeholder="Your first name">
</div>
<div class="clearfix visible-xs" style="height: 10px;"></div>
<div class="col-sm-6">
<input type="text" name="last_name" value="" id="last_name" maxlength="150" class="form-control" placeholder="Your last name">
</div>
</div>
</div>
<div class="form-group hidden">
<label class="control-label">report</label>
<input type="file" name="report[0]" value="" id="freeform_report0">
</div>
<input type="hidden" name="pdf_press_entries" value="77|8">
<input type="hidden" name="pdf_press_template" value="site/email_pdf_report">
<input type="hidden" name="pdf_press_upload_fieldname" value="report">
<input type="hidden" name="pdf_press_filename_fieldname" value="report_filename">
<p><input type="submit" name="submit" value="Submit" class="btn btn-primary"></p>
</form>
To cancel the submit it appears, based on your example, that you need to detect if any form-control elements have the has-error class. Then, to set the has-error on the class on the parents of those form-control elements you need to use the .each() approach instead of the if you have tried.
Something like this:
$( "#pdf-form" ).submit(function( event ) {
if ($(".form-control").hasClass("has-error").length > 0){
event.preventDefault();
}
$(".form-control").hasClass("has-error").each(function() {
$(this).parent().addClass('has-error');
}
});
I have this form that has a lot of validation in place.
What i'm struggling with is, when all fields have been filled out correctly I want the values of the fields to be displayed in an alert box.
Here is my code
<form method="post" name="form" id="form" class="form" action="">
<div class="info align-right"><span class="error">*</span> Required</div>
<fieldset>
<div class="group">
<label for="name">Name</label>
<input id="name" name="name" type="text" required />
</div>
<div class="group">
<label for="UserEmail">Email <span class="req">*</span></label>
<input type="text" name="UserEmail" id="UserEmail" value="" size="32" />
</div>
<div class="group">
<label>Password: <span class="req">*</span></label>
<input type="password" name="password" id="password" value="" size="32" />
</div>
<div class="group">
<label>Confirm Password: <span class="req">*</span></label>
<input type="password" name="password-check" id="password-check" value="" size="32" />
</div>
</fieldset>
<fieldset class="clearfix">
<div class="group options">
<legend>Country</legend>
<div class="group--left">
<input id="usa" name="country" type="radio">
<label for="usa">United States</label>
<input id="argentina" name="country" type="radio">
<label for="argentina">Argentina</label>
</div>
</div>
<div class="group">
<label>Phone Number</label>
<div class="group--left">
<input id="phone" name="phone" class="phone" type="tel" />
<em>Example: <span id="example">123-456-7890</span></em>
</div>
</div>
</fieldset>
<div class="group--right">
<input type="submit" value="Submit" id="submit" class="right" />
<input type="reset" value="Clear" id="clear" class="left" />
</div>
</form>
My HTML is
<form method="post" name="form" id="form" class="form" action="">
<div class="info align-right"><span class="error">*</span> Required</div>
<fieldset>
<div class="group">
<label for="name">Name</label>
<input id="name" name="name" type="text" required />
</div>
<div class="group">
<label for="UserEmail">Email <span class="req">*</span></label>
<input type="text" name="UserEmail" id="UserEmail" value="" size="32" />
</div>
<div class="group">
<label>Password: <span class="req">*</span></label>
<input type="password" name="password" id="password" value="" size="32" />
</div>
<div class="group">
<label>Confirm Password: <span class="req">*</span></label>
<input type="password" name="password-check" id="password-check" value="" size="32" />
</div>
</fieldset>
<fieldset class="clearfix">
<div class="group options">
<legend>Country</legend>
<div class="group--left">
<input id="usa" name="country" type="radio">
<label for="usa">United States</label>
<input id="argentina" name="country" type="radio">
<label for="argentina">Argentina</label>
</div>
</div>
<div class="group">
<label>Phone Number</label>
<div class="group--left">
<input id="phone" name="phone" class="phone" type="tel" />
<em>Example: <span id="example">123-456-7890</span></em>
</div>
</div>
</fieldset>
<div class="group--right">
<input type="submit" value="Submit" id="submit" class="right" />
<input type="reset" value="Clear" id="clear" class="left" />
</div>
</form>
I have also provided a Fiddle - http://jsfiddle.net/barrycorrigan/vzdp64m4/
Any help is greatly appreciated
try something like this,
$("#form").submit(function(){
var x = $(this).serializeArray();
$.each(x, function(i, field){
alert(field.name + " : " + field.value);
});
});
demo in FIDDLE
I have two form login and registration, by default show login form. There has a link "Don't have account?" I want to create when click on link then registration form will show and login form will hide.
HTML Code:
<div class="login_form">
<div id="form">
<h2>Login Here </h2>
<form method="post" action="login.php" >
<div class="form_elements">
<label for="username">username</label>
<input type="text" name="login_username" id="login_username" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<label for="username">Password</label>
<input type="password" name="login_password" id="login_password" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<input type="submit" name="login" id="login" class="btn btn-success" />
</div><!--end form_elements-->
<br />
Don't have a account?
</form>
</div>
</div>
<div class="clear_both"></div>
<div class="register_form">
<div id="form">
<h2>Register Here </h2>
<form method="post" action="login.php" name="">
<div class="form_elements">
<label for="username">username</label>
<input type="text" name="username" id="usename" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<label for="username">Email</label>
<input type="text" name="email" id="email" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<label for="username">Password</label>
<input type="password" name="password" id="password" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<label for="username">RePassword</label>
<input type="password" name="repassword" id="repassword" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<input type="submit" name="register" id="register" class="btn btn-success" />
</div><!--end form_elements-->
</form>
</div><!-- div form-->
jQuery Code:
$(function(){
('#show_register').click(function(){
$('.login_form').hide();
$('.register_form').show();
return false;
});
});
Please guide me to solve this difficulty.
Use as , $ is missing in show_register
$(function(){
$('#show_register').click(function(){
$('.login_form').hide();
$('.register_form').show();
return false;
});
});