Trying to Hide Javascript form - javascript

Ok I'm trying to auto login a guest account and it requires:
In header
<script language="JavaScript" type="text/JavaScript">
function guestLogin() {
document.form_login.username.value = 'guest';
document.form_login.password.value = 'guest';
document.form_login.submit();
}
</script>
And
<form action="https://www.redcheetah.com/WebPrefex/" method="post" name="form_login">
<input name="username" type="text" value="" />
<input name="password" type="password" value="" />
<input name="form_action" type="submit" value="Login" />
</form>
javascript:guestLogin();
How would I get the javascript:guestLogin(); to work without having the Login form on the page.
Any Tips?
Thanks


If you need the form to be on the page - if you can't create it on demand for whatever reason - then if you want guestLogin to work without the user seeing the form, you'll have to hide the form using CSS. It'll still be submittable, it just won't be visible:
function guestLogin() {
document.form_login.username.value = 'guest';
document.form_login.password.value = 'guest';
console.log('submitting');
document.form_login.submit();
}
document.querySelector('div').onclick = guestLogin;
form {
display: none;
}
<form action="https://www.redcheetah.com/WebPrefex/" method="post" name="form_login">
<input name="username" type="text" value="" />
<input name="password" type="password" value="" />
<input name="form_action" type="submit" value="Login" />
</form>
<div>click to submit</div>

Related

Intercept form submission, check submitted value and show easter egg

jQuery(document).ready(function() {
jQuery(".search-form").submit(function(e) {
// if submitted value = "easter egg"
// e.preventDefault();
// show easter egg
// else do nothing (let the form be submitted as usual)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="https://galina.xyz/" method="get" id="adminbarsearch">
<input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" />
<label for="adminbar-search" class="screen-reader-text">Search</label>
<input type="submit" class="adminbar-button" value="Search" />
</form>
Could you help me organize this? I failed to find out the submitted value in 'e'.

Can't find it because your class selector is looking for search-form, but it is not set, so add it
e.g. <form class="search-form"..
Then use Event.preventDefault() in the listener to prevent the submission
e.g. e.preventDefault();
jQuery(document).ready(function() {
jQuery(".search-form").submit(function(e) {
const searchVal = $(this).find('input[type=text]').val();
if (searchVal == 'easter egg') {
e.preventDefault();
console.log('surprise');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="search-form" action="https://galina.xyz/" method="get" id="adminbarsearch">
<input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" />
<label for="adminbar-search" class="screen-reader-text">Search</label>
<input type="submit" class="adminbar-button" value="Search" />
</form>

In jQuery you're creating a submit function for .search-form, but in your HTML, there is no element with that class. You should create submit function for your form which has id="adminbarsearch":
jQuery(document).ready(function() {
jQuery("#adminbarsearch").submit(function(e) {
if ($("#adminbar-search").val() === "easter egg")
{
// show easter egg
console.log("Easter Egg");
e.preventDefault();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="https://galina.xyz/" method="get" id="adminbarsearch">
<label for="adminbar-search" class="screen-reader-text">Search</label>
<input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" />
<input type="submit" class="adminbar-button" value="Search" />
</form>

Password in confirm box Javascript

I have a Delete button in my PHP page which deletes a record.
But when I delete that button I do a confirm box with:
<form action="log.php" method="post" onsubmit="return confirm('Are you sure?');">
Can I make it so when they confirm they have to fill in a password?
So what I mean is something like this
<form action="log.php" method="post" onsubmit="return confirm('password :');">
And then they have to fill in a password
Thanks in advance.

Hi You Need some thing like this, Modify according to your requirements
<script>
function do_check()
{
var return_value=prompt("Password:");
if(return_value==="your_password")
return true;
else
return false;
}
</script>
<form action="log.php" method="post" onsubmit="return do_check();">

Try using input type="password" , required attribute` ; disable submit until password set
document.forms["form"].querySelector("input[type=button]").onclick = function(e) {
e.preventDefault();
this.nextElementSibling.disabled = false;
this.nextElementSibling.nextElementSibling.disabled = false;
}
<form name="form">
<input type="button" value="Are you sure?" />
<input type="password" minlength="3" maxlength="7" required disabled />
<input type="submit" disabled />
</form>

document.forms["form"].querySelector("input[type=button]").onclick = function(e) {
e.preventDefault();
this.nextElementSibling.disabled = false;
this.nextElementSibling.nextElementSibling.disabled = false;
}
<form name="form">
<input type="button" value="Are you sure?" />
<input type="password" minlength="3" maxlength="7" required disabled />
<input type="submit" disabled />
</form>

"Data entered successfully" message to appear on same page of insert form?

I have an insert form where I can submit data into my database.
Here's my code:
<form action="insert_backend.php" method="POST" enctype="multipart/form-data">
<!-- Method can be set as POST for hiding values in URL-->
<h2>Form</h2>
<label for="uploadedimage">Small image to upload: </label>
<input type="file" name="uploadedimage" id="uploadedimage"/><br />
<label>Date:</label>
<input class="input" name="date" type="text" value=""><br />
<label>Retrace:</label>
<input class="input" name="retrace" type="text" value=""><br />
<label>Start of Swing Trade:</label>
<input class="input" name="start_of_swing_trade" type="text" value=""><br />
<label>End of Swing Trade:</label>
<input class="input" name="end_of_swing_trade" type="text" value=""><br />
<label>Bull flag:</label>
<input class="input" name="bull_flag" type="text" value=""><br />
<label>Bear flag:</label>
<input class="input" name="bear_flag" type="text" value=""><br />
<label>EMA Crossover:</label>
<input class="input" name="ema_crossover" type="text" value=""><br />
<label>Trading Instrument:</label>
<input class="input" name="trading_instrument" type="text" value=""><br />
<input class="submit" name="submit" type="submit" value="Insert">
</form>
Here's a snippet of the "Success" message on the php that is used to process the data submitted to the database:
$stmt->bind_param('sssssssss',$target_path, $date, $retrace, $start_of_swing_trade, $end_of_swing_trade, $bull_flag, $bear_flag, $ema_crossover, $trading_instrument);
if(!$stmt){ exit("bind failed");}
//will return 0 if fail
if($stmt->execute() != 0){
echo "New record created successfully";
}else{ echo "Failed to insert new record";}
Whenever I Insert data, I get the "New record created successfully" message on the insert_backend.php page, which is the php file used to process and submit the data, but not on the actual form page used to insert data. Usually when you use a form to send a message to someone or to send data into a database, the form resets itself and you get a "success" message that shows at the bottom of the form without getting redirected to another page. But the code I have redirects me to the page that is used to process the data. how do I get it to show the "success" message on the same page as the form itself?
My FULL insert form code (with the php redirect check solution in it):
<!DOCTYPE html>
<html>
<head>
<title>Chart Submission Form</title>
<link href="insert.css" rel="stylesheet">
</head>
<body>
<div class="maindiv">
<!--HTML Form -->
<div class="form_div">
<div class="title">
<h2>Insert Data In Database Using PHP.</h2>
</div>
<form action="insert_backend.php" method="POST" enctype="multipart/form-data">
<!-- Method can be set as POST for hiding values in URL-->
<h2>Form</h2>
<label for="uploadedimage">Small image to upload: </label>
<input type="file" name="uploadedimage" id="uploadedimage"/><br />
<label>Date:</label>
<input class="input" name="date" type="text" value=""><br />
<label>Retrace:</label>
<input class="input" name="retrace" type="text" value=""><br />
<label>Start of Swing Trade:</label>
<input class="input" name="start_of_swing_trade" type="text" value=""><br />
<label>End of Swing Trade:</label>
<input class="input" name="end_of_swing_trade" type="text" value=""><br />
<label>Bull flag:</label>
<input class="input" name="bull_flag" type="text" value=""><br />
<label>Bear flag:</label>
<input class="input" name="bear_flag" type="text" value=""><br />
<label>EMA Crossover:</label>
<input class="input" name="ema_crossover" type="text" value=""><br />
<label>Trading Instrument:</label>
<input class="input" name="trading_instrument" type="text" value=""><br />
<input class="submit" name="submit" type="submit" value="Insert">
</form>
<?php
if (isset($_GET['success']) && $_GET['success']) {
echo "New record created successfully";
} else if (isset($_GET['success']) && !$_GET['success']) {
echo "Failed to insert new record";
}
?>
</div>
</div>
</body>
</html>
Updated my PHP code to include the header location:
$sql = "INSERT into charts (charts_URL, charts_date, charts_retrace, charts_start_of_swing_trade, charts_end_of_swing_trade, charts_bullflag, charts_bearflag, charts_ema_crossover, charts_trading_instrument) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)";
// s = string, i = integer, d = double, b = blob
//preparing statement
$stmt = $conn->prepare($sql);
if(!$stmt){ exit("prepare failed");}
//binding param
$stmt->bind_param('sssssssss',$target_path, $date, $retrace, $start_of_swing_trade, $end_of_swing_trade, $bull_flag, $bear_flag, $ema_crossover, $trading_instrument);
if(!$stmt){ exit("bind failed");}
//will return 0 if fail
if($stmt->execute() != 0){
$success = true;
}else{
$success = false;
}
header('location:insertchart.php?success='.$success);
exit;
}
}
}
?>
The FINAL code (actually a snippet) that made everything work:
if($stmt->execute() != 0){
$success = true;
header('Location:http://mlsinc.net/chart-submission/insertchart.php?success='.$success);
}else{
$success = false;
header('Location:http://mlsinc.net/chart-submission/insertchart.php?success='.$success);
}
}
//close connection
$conn->close();

Try with -
$stmt->bind_param('sssssssss',$target_path, $date, $retrace, $start_of_swing_trade, $end_of_swing_trade, $bull_flag, $bear_flag, $ema_crossover, $trading_instrument);
if(!$stmt){ exit("bind failed");}
//will return 0 if fail
if($stmt->execute() != 0){
$success = true;
}else{
$success = false;
}
header('location:yourform.php?success='.$success);
exit;
On you form page add a check for it -
if (isset($_GET['success']) && $_GET['success']) {
echo "New record created successfully";
} else if (isset($_GET['success']) && !$_GET['success']) {
echo "Failed to insert new record";
}

To show the message on form page
Store the message in session after inserting the row(since you are redirecting page)

I think the soultion suggested by sgt BOSE will work for you. But instead of passing a "success" GET parameter back to your page containing form, you should use a session variable because the $_GET['success'] will re-print the message if user reloads the window.
Once you print the result stored in session variable make sure to unset it.

Ok I see your problem here, it's actually pretty simple.
the way it works is that the message would be declared inside of the script tag
so you should do something like this so it will call the message.
<html>
<head>
<script type="text/javascript">
//Put the javascript function you want the button to do Here
function show_alert()
{
alert("Form Succesfully Submited");
}
</script>
</head>
<body>
<form action="insert_backend.php" method="POST" enctype="multipart/form-data">
<!-- Method can be set as POST for hiding values in URL-->
<h2>Form</h2>
<label for="uploadedimage">Small image to upload:</label>
<input type="file" name="uploadedimage" id="uploadedimage" />
<br />
<label>Date:</label>
<input class="input" name="date" type="text" value="">
<br />
<label>Retrace:</label>
<input class="input" name="retrace" type="text" value="">
<br />
<label>Start of Swing Trade:</label>
<input class="input" name="start_of_swing_trade" type="text" value="">
<br />
<label>End of Swing Trade:</label>
<input class="input" name="end_of_swing_trade" type="text" value="">
<br />
<label>Bull flag:</label>
<input class="input" name="bull_flag" type="text" value="">
<br />
<label>Bear flag:</label>
<input class="input" name="bear_flag" type="text" value="">
<br />
<label>EMA Crossover:</label>
<input class="input" name="ema_crossover" type="text" value="">
<br />
<label>Trading Instrument:</label>
<input class="input" name="trading_instrument" type="text" value="">
<br />
<!--This is where you tell the script where to load the (ID) for example im using a simple message for you what you need to do is make the id im sure you know how to create a simple (ID) inside of a java ,heck im thirteen im about an expert on it if i can do im sure you can! :) :)
anyway inside the div tag make it look like this: <div id=("PUT ID IN HERE") >
then put you function in the script for wha you want it to do hope this helped you have a nice day!-->
<div>
<input class="button" name="submit" type="submit" onclick="show_alert()" value="Submit">
</div>
</form>
</body>
</html>
Hope that this helps if not dont hate lol.

Have to remove submit button to get js to work

I'm trying to validate login details from an html form. The problem is that the submit button doesn't work with the code. So for example if I leave the username and password blank it won't come up with an alert for "Invalid Username or Password". If I remove type="submit" it works but the button becomes an input text box with an onclick function which does not look good. I was provided with this code as it is a more secure way of passing login details than I had written so I have to confess my ignorance on JS and JSON so apologies if I haven't provided enough info but any guidance would be much appreciated on how to get the button working with the js. This is running on Chrome only. Cheers.
HTML code
<form name="login" id="login-form">
Username<input name="username" id="username" data-bind="value: username" type="text" value="" />
Password<input name="password" id="password" data-bind="value: password" type="password" value="" />
<input name="submit" type="submit" onclick="myApp.getLogin()" value="Login" />
</form>
JS
myApp.getLogin = function(){
var url = "http://localhost:8084/Alumni_JV1/services/login.json?username=" + myApp.vm.username()
+ "&password=" + myApp.vm.password();
console.log(url);
$.getJSON( url, function( data ) {
if(data.response==='success'){
window.location.href="profile.jsp";
}else{
alert("Invalid Username or Password");
}
});
};

A submit button is used to send form data to a server. E.G. <form action='formHandler.php'>. It would submit the form to the current URL if the action attribute isn't defined.
You can get a button without any action with <input type='button' />.
So changing <input type='submit' ... to <input type='button' ... should do the trick :)
Then the code would be:
<form name="login" id="login-form">
Username<input name="username" id="username" data-bind="value: username" type="text" value="" />
Password<input name="password" id="password" data-bind="value: password" type="password" value="" />
<input name="submit" type="button" onclick="myApp.getLogin()" value="Login" />
</form>

Change input type=submit field with button tag.

Make logon screen visible/invisible javascript

I'm trying to make my logon screen appear and dissappear when a certain button is being pressed but my code doesn't seem to work and always gives a problem
document.getElementById('logon').style.visibility='hidden';
function showlogon(){
document.getElementById('logon').style.visibility="visible";
}
this is my javascript code it must be standard be hidden
<div id="logon">
<form name="login" method="post">
Username:<input name="username" type="text" size="14"/><br>
Password:<input name="password" type="password" size="14"/><br>
<input type="submit" value="Login"/>
</form>
</div>
this is the form that must be hidden by default

This works for me:
<div id="logon" style="display: none;">
<form name="login" method="post">
Username:<input name="username" type="text" size="14"/><br>
Password:<input name="password" type="password" size="14"/><br>
<input type="submit" value="Login"/>
</form>
</div>
<div id="button"><button onClick="show()">Show Screen</button></div>
<script>
function show() {
document.getElementById('logon').style.display = 'block'; // Show the #logon div
document.getElementById('button').innerHTML = '<button onClick="hide()">Hide Screen</button>';
}
function hide() {
document.getElementById('logon').style.display = 'none'; // Hide the #logon div
document.getElementById('button').innerHTML = '<button onClick="show()">Show Screen</button>';
}
</script>

Here is a small simple utility method for what you want to do:
JSFiddle: http://jsfiddle.net/W8XPR/
function get(id) {
return document.getElementById(id);
};
function toggle(id) {
el = get(id);
el.style.display='none'==el.style.display?'':"none";
};

Categories