I am trying to create a utility that will check if our site is down. The only way to do that is to login and if nothing is returned then the site is down. I've gotten it to the point where it will auto login, but not sure how to get it to check if the login was successful. Anyone got an idea?
<HTML>
<HEAD>
<TITLE>test Login</TITLE>
<script>
function loginForm() {
document.myform.action = "http://example.com";
document.myform.submit();
}
</script>
</HEAD>
<BODY onLoad="loginForm()">
<form action="http://example.com" class="uni-form" method="post" name="_58_fm">
<input name="_58_redirect" type="hidden" value="">
<input id="_58_rememberMe" name="_58_rememberMe" type="hidden" value="false">
<fieldset class="block-labels"> <div class="ctrl-holder">
<label for="_58_login">Email Address</label>
<input name="_58_login" type="text" value="emailaccount#email.com">
</div><div class="ctrl-holder"> <label for="_58_password">Password</label>
<input id="_58_password" name="_58_password" type="password" value="UberSecretPassword">
<span id="_58_passwordCapsLockSpan" style="display: none;">Caps Lock is on.</span>
</div><div class="button-holder">
<input id="submit" type="submit" value="Sign In">
</div></fieldset>
</FORM>
<script>
window.onload = function () {
document.getElementById('submit').click();
}
function checker(){
if(<-- what to put here --> =" You are signed in as "){
// Not sure what to put here
}
}
</script>
</BODY>
</HTML>
Related
I am trying to do something where you can search for flights within a database based on the departure/arrival airport and departure/return flight. There are two radio buttons where you can click whether it's round-trip or one-way. What I am having trouble with is, I want to hide the return flight thing whenever the one-way radio button has been clicked but it won't budge. Everything remains on screen no matter what button is pushed. Here is my code, any help would be appreciated!
<!DOCTYPE html>
<html>
<head>
<script>
function tripCheck(){
if (document.getElementById('round').checked){
document.getElementById('toggle').style.display = 'none';
} else {
document.getElementById('toggle').style.display = 'block';
}
</script>
</head>
<body>
<form action="/post" method="POST">
<!-- Radio Buttons -->
<input type="radio" onclick="javascript:tripCheck();" name="oneround" id="round" checked>Round Trip
<input type="radio" onclick="javascript:tripCheck();" name="oneround" id="oneway">One Way<br>
<!-- Source and Destination Locations -->
<input type="text" name = "source" placeholder="Enter an origin" required/>
<input type="text" name = "dest" placeholder="Enter a Destination" required/><br>
<!-- Departure and Return Dates -->
Departure Date:
<input type="date" id="departure" name="ddate"
value="mm/dd/yyyy" min="2000-01-01" max="2050-01-01" required>
<div id="toggle">Return Date:
<input type="date" id="return" name="rdate"
value="mm/dd/yyyy" min="2000-01-01" max="2050-01-01">
</div>
<!-- Submit Button -->
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
What it looks like
What I want it to look like
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="/post" method="POST">
<!-- Radio Buttons -->
<input type="radio" onchange="tripCheck()" name="oneround" id="round" checked>Round Trip
<input type="radio" onchange="tripCheck()" name="oneround" id="oneway">One Way<br>
<!-- Source and Destination Locations -->
<input type="text" name="source" placeholder="Enter an origin" required/>
<input type="text" name="dest" placeholder="Enter a Destination" required/><br>
<!-- Departure and Return Dates -->
Departure Date:
<input type="date" id="departure" name="ddate" value="mm/dd/yyyy" min="2000-01-01" max="2050-01-01" required>
<div id="toggle">Return Date:
<input type="date" id="return" name="rdate" value="mm/dd/yyyy" min="2000-01-01" max="2050-01-01">
</div>
<!-- Submit Button -->
<br>
<input type="submit" value="Submit">
</form>
<script>
function tripCheck() {
if (!document.getElementById('round').checked) {
document.getElementById('toggle').style.display = 'none';
} else {
document.getElementById('toggle').style.display = 'block';
}
}
</script>
</body>
</html>
You have one error on the above code.
Your function doesn't have the closing bracket. If you want to view javascript error you can right click and go to inspect or simply press f12 and go to console menu.
Try entering this, a function Travel_Control
<script>
function Travel_Control() {
if (!document.getElementById('round').checked) {
document.getElementById('toggle').style.display = 'none';
} else {
document.getElementById('toggle').style.display = 'block';
} }
</script>
In your code one closing bracket is missing in function tripCheck(). and you need to revert the condition in if(!condition) statement. you can replace below function in your code and it will work as expected.
function tripCheck()
{
if (!document.getElementById('round').checked)
{
document.getElementById('toggle').style.display = 'none';
} else
{
document.getElementById('toggle').style.display = 'block';
}
}
I've written a validator for my HTML although I'm not sure where I'm going wrong.
What I'm trying to do below is determine if there is any text in the "First Name" box altogether. There is underlying css to the code but I believe my issue is surrounding my onsubmit and validate function as nothing in the javascript seems to be running once I click the submit button.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NewPatientForm</title>
<link rel="stylesheet" type="text/css" href="NewPatient.css">
<script>
function validate() {
var invalid = false;
if(!document.Firstname.value.length) {
invalid = true;
}
if(invalid) {
document.getElementById("form-error").style.display = "inline-block";
return false; //to make the text appear
}
return true;
}
</script>
</head>
<body>
<form id="NewPatientForm" method="post" action="#" onsubmit="return validate();">
<div class="form-element">
<p id="form-error">All fields are required</p>
</div>
<div>
<label for="Firstname">First Name
<input type="text" name="Firstname" placeholder="First Name" id="Firstname">
</label>
</div>
<div>
<input type="submit" name="submit-button" value="Submit">
</div>
</form>
</body>
</html>
Looks like the culprit was your attempt to access Firstname on the document object.
I replaced it with the more standard document.getElementById() method and its working.
Some reading on this: Do DOM tree elements with ids become global variables?
function validate() {
var invalid = false;
if(!document.getElementById('Firstname').value.length) {
invalid = true;
}
if(invalid) {
document.getElementById("form-error").style.display = "inline-block";
return false;
}
return true;
}
#form-error {
display: none;
}
<form id="NewPatientForm" method="post" action="#" onsubmit="return validate()">
<div class="form-element">
<p id="form-error">All fields are required</p>
</div>
<div>
<label for="Firstname">First Name
<input type="text" name="Firstname" placeholder="First Name" id="Firstname">
</label>
</div>
<div>
<input type="submit" name="submit-button" value="Submit">
</div>
</form>
There are a couple of typos, and I'll suggest something else as well. First, a fix or three in the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NewPatientForm</title>
<script>
function validate() {
const invalid = document.getElementById("Firstname").value.length == 0;
if(invalid) {
document.getElementById("form-error").style.display = "inline-block";
return false; //to make the text appear
}
return true;
}
</script>
</head>
<body>
<form id="NewPatientForm" method="post" action="#" onsubmit="return validate();">
<div class="form-element">
<p id="form-error">All fields are required</p>
</div>
<div>
<label for="Firstname">First Name
<input type="text" name="Firstname" placeholder="First Name" id="Firstname">
</label>
</div>
<div>
<input type="submit" name="submit-button" value="Submit">
</div>
</form>
</body>
</html>
My suggestion is that you also look into built-in HTML form validation attributes. I'm thinking you're reinventing the wheel for things like requiring a non-empty Firstname. Why not this instead of JavaScript?
<input type="text" name="Firstname" id="Firstname" placeholder="First Name" required />
And many others, like minlength="", min="", step="", etc.
Plus there's still a JavaScript hook into the validation system with .checkValidity() so you can let the built-in validation do the heavy lifting, and then throw in more of your own custom aspects too.
Going through some exercise which including JQuery + PHP combined together .The part I am not completely understand is in the Jquery code when the if statement starts ,can someone please explain from this point on what's going on?
HTML code:
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
<label for="name">Name:</label><br>
<input type="text" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="text" name="email" id="email" autocomplete="off"><br><br>
<label for="password">Password:</label><br>
<input type="text" name="password"><br><br>
<input type ="submit" name="submit" value="Sign up">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
PHP code:
<?php
if(! empty($_GET['email'])){
$email=filter_var($_GET['email'],FILTER_VALIDATE_EMAIL);
if($email){
$con="mysql:host=localhost;dbname=eshop;charset=utf8";
$db= new PDO($con,'root','');
$query=$db->prepare("SELECT email FROM users WHERE email = ?");
$query->execute([$email]);
$email=$query->fetch(PDO::FETCH_ASSOC);
if($email){
echo true;
}
}
}
JQuery code:
$('#email').on('keyup', function(){
var userEmail= $(this).val().trim();
$('#result').remove();
var emailRegex= /^[_a-z0-9-]+(.[_a-z0-9-]+)*#[a-z0-9-]+(.[a-z0-9-]+)*(\.[a-z]{2,3})$/i;
if(emailRegex.test(userEmail)){
$.get('check_email.php',{email:userEmail},function(res){
if(res ==1){
$('#email').after('<span id="result">*Email is taken</span>');
}
});
}
});
I need to show a div after receiving info from a form. I got a good code to show the div after submitting the code, but for this code work, I need to use return false so the page doesn't reload.
Here is the code:
function showHide() {
document.getElementById("hidden").style.display = "block";
}
#hidden {
display: none;
}
<html>
<body>
<form action="" method="post" class="generator-form" onsubmit="showHide(); return false">
<label for="name">
<input type="text" name="nome" placeholder="Insira seu nome" required>
</label>
<input type="submit" value="go">
<div id="hidden">hello</div>
</body>
</html>
PS: I don't know why the js is not working in here, in codepen it's.
So, here's the thing:
I can't use return: false because I do need to return these values; and
I don't want to use onclick() because when the user clicks on the
button it'll show a blank box.
To explain better, I'll get the infos I got in the form and show them in the previously hidden div. It's a signature generator for email.
There's someway I can do this with javascript or php?
Try this:
<?php
$show ="none";
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$show = "block";
}
?>
<html>
<body>
<form action="" method="post" class="generator-form" onsubmit="showHide(); return false">
<label for="name">
<input type="text" name="nome" placeholder="Insira seu nome" required>
</label>
<input type="submit" value="go">
<div style="display:<?php echo $show;?>">hello</div>
</body>
</html>
basically i have a form which inside that form i have a textbox and a submit button, now what i want is to output text box value into console when a user type something, i found this link https://codepen.io/jnnkm/pen/WxWqwX?editors=1111 which works just perfect but when i copied the html and script code and putted it my editor and ran it trough my browser, it doesn't works at all,
here is how i tried it out:
<!DOCTYPE HTML>
<html>
<head>
<script src="JquerySock.js"></script>
<script>
function postUsernameToServer() {
console.log('executed function')
var username = $("#Registeration_Username_box").val();
console.log(username);
}
$('#Registeration_Username_box').on('input', function() {
console.log('excuted input');
postUsernameToServer();
});
</script>
</head>
<body>
<div id="Registeration_Div" class="Registeration_Div">
<form class="Registration_Form" id="Registration_Form" action="../postr" method="POST">
<div id="Registeration_Username_DIV" class="Registeration_Username_DIV">
<input type="text" id="Registeration_Username_box" class="Registeration_Username_box" placeholder="" name="UserName" maxlength="30" />
</div>
<div class="Registration_Submit_Div">
<input type="submit" value="Submit" id="SumbitForm_btn" class="SumbitForm_btn" name="Submit_btn" />
</div>
</form>
</div>
</body>
</html>
you can try it yourself too, but it didn't worked for me.
okay i found what the problem was, first i had to specify
$(document).ready(function() {
and then input my ajax code, i mean fully it was suppose to be this way
<!DOCTYPE HTML>
<html>
<head>
<script src="JquerySock.js"></script>
<script>
function postUsernameToServer() {
console.log('executed function')
var username = $("#Registeration_Username_box").val();
console.log(username);
}
$(document).ready(function() {
$('#Registeration_Username_box').on('input', function() {
console.log('excuted input');
postUsernameToServer();
});
});
</script>
</head>
<body>
<div id="Registeration_Div" class="Registeration_Div">
<form class="Registration_Form" id="Registration_Form" action="../postr" method="POST">
<div id="Registeration_Username_DIV" class="Registeration_Username_DIV">
<input type="text" id="Registeration_Username_box" class="Registeration_Username_box" placeholder="" name="UserName" maxlength="30" />
</div>
<div class="Registration_Submit_Div">
<input type="submit" value="Submit" id="SumbitForm_btn" class="SumbitForm_btn" name="Submit_btn" />
</div>
</form>
</div>
</body>
</html>
now it works perfect!