I have forms running on my page which post data to a php file which causes the posted item to appear in a cart:
<form method="post"><fieldset>
<input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" />
<input type="hidden" name="my-item-name" value="is716" />
<input type="hidden" name="my-item-price" value="10" />
<input id="716" type="submit" name="my-add-button" value=" " />is716</input>
</fieldset></form>
I then put a script running at the bottom of my page which essentially toggles controls so that further selections become clear based on previous selections:
if (name == 'is716') {
document.getElementById('716b').style.display = 'none';
document.getElementById('716c').style.display = 'inline';
}else{
document.getElementById('716b').style.display = 'none';
document.getElementById('716c').style.display = 'inline';}
The problem is that the above script's if statement, that name == 'is716' apparently only becomes true for a moment when you click submit. The css will change and flash for just a second, showing that the statement is indeed working and then it will disappear. I can make the changes stay by adding 'return false' but this stops the form from being submitted and the data updated, which completely misses the point. Is there a way to both submit the data but also have the value 'stick'?
How can I make this change last until the statement changes again?
edit:
Here is the page's code:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>jCart - Free Ajax/PHP shopping cart</title>
<link rel="stylesheet" type="text/css" media="screen, projection" href="style.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="screen, projection" href="jcart/css/jcart.css" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'> </script>
<style type="text/css">
input.add {
background-image: url('off.png');
width: 12px;
height: 12px;
border: 0;
cursor: pointer;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<div id="jcart"><?php $jcart->display_cart();?></div>
</div>
<div id="content">
<form method="post"><fieldset>
<input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" />
<input type="hidden" name="my-item-id" value="1" />
<input type="hidden" name="my-item-name" value="is716" />
<input type="hidden" name="my-item-price" value="5000" />
<input type="hidden" name="my-item-partn" value="716" />
<input type="hidden" name="my-item-qty" value="1" size="3" />
<input id="716a" type="submit" name="my-add-button" class="add" value=" " />
<a id="716b" href="addtocart.php?jcartRemove[]=1" /><img src="on.png"></a>   Apples $5<br>
<br></fieldset></form>
<div class="clear"></div>
<?php
//echo '<pre>';
//var_dump($_SESSION['jcart']);
//echo '</pre>';
?>
</div>
<div class="clear"></div>
</div>
<script type='text/javascript'>
$(document).ready(function() {
$('input[name=my-add-button]').change(function(){
$('form').submit();
});
});
</script>
<script type="text/javascript">
$('#720').click(function() {
$('#720click').click();
});
</script>
<script type='text/javascript'>
window.onload = function() {
var myItemName = <?php echo (isset($_POST["my-item-name"])? $_POST["my-item-name"] : ""); ?>;
if (myItemName == "is716") {
document.getElementById('716a').style.display = 'none';
document.getElementById('716b').style.display = 'inline';
}
}
That pushes to another page: jcart.php
Like Suman said your page is getting submitted, therefore the style reloads with the page so any changes made in the page session to your style will be reset.
A solution to your problem would be to set session flags in your form's php target page. You could do this like:
<?php
if (isset($_POST["my-item-name"]) {
session_start();
$_SESSION["my-item-name"] = $_POST["my-item-name"];
}
?>
And then on your cart page you would echo the session variable into a JavaScript that will toggle the styling of your page as necessary:
<?php session_start(); ?>
window.onload = function() {
var myItemName = <?php echo $_SESSION["my-item-name"]; ?>;
if (myItemName == "is716") {
document.getElementById('716b').style.display = 'none';
document.getElementById('716c').style.display = 'inline';
}
}
Hopefully this is what you are looking for.
EDIT: For if your target page is the same page you could simplify this by having your javascript look like this:
window.onload = function() {
var myItemName = "<?php echo (isset($_POST["my-item-name"])? $_POST["my-item-name"] : ""); ?>";
if (myItemName == "is716") {
document.getElementById('716b').style.display = 'none';
document.getElementById('716c').style.display = 'inline';
}
}
Your form is getting posted and hence the page is getting reloaded. Now, when a webpage is reloaded previous states are forgotten by the browser until and unless you use some persistence (like local storage or something) and check saved data and restore previous stage of any element on page reload by yourself.
Use ajax to post your data and to get information back from server. This way your styles and states will be retained.
Do an event.preventDefault() on your form submit button click and then do whatever server post activity you want to do by ajax call. That should do.
Related
I have a radio button with specific values that I want to include in my URL parameters for the following pages (more than one). I have the parameters set up in the JS as var params.
in my, if-statement I have a console.log and location.href set to the next page desired based on the result.
my issue is when I press the button it takes me to the page but not with the desired parameters.
I also have 5 pages for each result following this page. how can I append the parameters to the following pages?
EPP1.HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Create Custom Evaluation Portal</title>
</head>
<body>
<div id="bodyText"></div>
<form id="myForm" action="EPV3.html" method="get">
<div id="pBFContainer">
<div id="bodyFOption1">
<label for="email">Enter email address:<p></label>
<input type='text' id='inputEmail' name='email' size="70"></input></div>
<div id="bodyFTitle2"></div>
<div id="bodyFOption2">
<label for="testType">Choose the test theme for your evaluation:<p></label>
<input id='rb1' class="optionT" type='radio' name='testType' value='voip' checked>VoIP<p>
<input id='rb2' class="optionT" type='radio' name='testType' value='bandwidth'>Bandwidth<br><br>
</div>
<div id="bodyFTitle3"></div>
<div id="bodyFOption3"></div>
</div>
<input type="submit" id="subButton" value="Next..." />
</form>
</body>
<script type="text/javascript" src="EPP1.js"></script>
</html>
EPP1.js:
window.addEventListener("load", () => {
let qs = decodeURIComponent(location.search.substring(1));
let params = new Map();
let parts = qs.split("&");
parts.forEach((part) => {// i got this from a tutorial and liked it
let key = part.split("=")[0];
let val = part.split("=")[1];
params.set(key, val);
});
if (params.get("testType") == "voip") {
console.log("testtype is voip");
window.location.href = "EvalPortalV3.html";
} else if (params.get("testType") == "bandwidth") {
console.log("testtype is bandwidth");
window.location.href = "EvalPortalB3.html";
}
});
I have been stuck on trying to create a submit button that auto enables/disables when the user types into an input box. I have successfully been able to create a submit button that starts out disabled and then enables when a user starts typing, but I want the button to disable if the user enters a number or anything else except a character or a string.
Here is the code I currently have for my script:
$(document).ready(function() {
$('#seed').on('keyup', function(){
var regEx = /^[a-zA-Z\s]*$/;
if($(this).val() != regEx) {
$('#submit').prop('disabled', false);
} else {
$('#submit').prop('disabled', true);
}
});
});
Along with my main index file with my form:
<head>
<title>Story Ideas</title>
<link type="text/css" rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script defer src="js/script.js"></script>
</head>
<div class="form-style">
<form class="form" name="form" method="post" action="?v=ture">
<label for="table">Select Your Story</label> <br />
<select name="table" id="table">
<option value="moons">Moons</option>
<option value="lionbird">Lionbird</option>
<option value="chik">Chik</option>
</select>
<br>
<input type="text" id="seed" name="seed">
<br>
<input id="submit" type="submit" disabled="disabled">
</form>
</div>
<?php
include_once('includes/functions.php');
if (isset($_GET['v']) && $_GET['v'] == true)
{
$t = $_POST['seed'];
$table = $_POST['table'];
echo genPoem($t, $table);
echo "<br>";
echo "<br>";
}
?>
</body>
I tried using var regEx = /^[a-zA-Z\s]*$/; to prevent this. Have I missed something?
You are not using the correct condition to check if your value matches the regex or not, your regex is fine just switch if($(this).val() != regEx) for if(regEx.test($(this).val())).
Reference for test method:
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test
You could try $(this).val().match(regEx) instead of using !=, as documented in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions.
I've created this landing page that is triggered upon connecting to a router using php. It's got a simple form and one of the field is a qr reader. I followed this tutorial to create the image uploader and decoder.
it was working fine when I'm running it on browser, but upon lodging it via landing page popup, on Android the file upload doesn't trigger and on iPhone, the landing page simply closes.
I suspect that this happens because on iPhone you usually can't navigate away from a landing page without closing it first and destroying the connection with the router. Hence, the deadlock.
here's the js file and html part of my code:
HTML:
<html>
<head>
<title>QR Code Input</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700i,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./styles/index.css">
<script type="text/javascript" src='./js/QRReader.js'> </script>
<script src="./js/QRDecoder.js"> </script>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1" />
</head>
<body>
<div id="center">
<img src="./img/logoCBN.png">
<h1>
Hello $name!
<p id="subheader">Please enter your login code</p>
</h1>
<form action="goto.php" method="post">
<input type="hidden" name="form" value="$form"/>
<input type="hidden" name="username" value="$mac"/>
<input type="hidden" name="password" value="$mac"/>
<input type=text size=20 name="qrcode" placeholder="Scan or enter login code" class=qrcode-text />
<label class=qrcode-text-btn>
<input type=file accept="image/*" capture=environment onclick="return showQRIntro();" onchange="openQRCamera(this);" tabindex=-1 />
</label>
<p id="error"> $result </p>
<input id="submit" type="submit" value="Login"/>
<!--Additional data-->
<input type="hidden" name="link-login" value="$link_login" />
<input type="hidden" name="link-orig" value="$desired_url" />
<input type="hidden" name="gateway" value="$gateway" />
<input type="hidden" name="lok" value="$location" />
<input type="hidden" name="dst" value="$desired_url"/>
</form>
</div>
</body>
</html>
JS:
function openQRCamera(node) {
var reader = new FileReader();
reader.onload = function() {
node.value = "";
qrcode.callback = function(res) {
if(res instanceof Error) {
alert("No QR code found. Please make sure the QR code is within the camera's frame and try again.");
} else {
node.parentNode.previousElementSibling.value = res;
}
};
qrcode.decode(reader.result);
};
reader.readAsDataURL(node.files[0]);
}
function showQRIntro() {
return confirm("Use your camera to take a picture of a QR code.");
}
So my question is simple, is what I'm trying to do is even possible given the difference in nature between normal website and landing page in terms of file upload?
What I've tried so far is just to test and see if the JS part was even called and it was so I'm sure that it isn't the problem with the JS, it simply stopped doing anything upon reaching the file reader part and just escaped on Android and closes the page on iPhone.
I have form validation setup and working as you can see (using javascript), the only problem is that when someone successfully logs in, I have it redirect to login.php but if someone directly visits mysite.com/login.php they don't need a password to login. If there is any type of php code I need to add then that's fine, another option would be to change the function for the javascript on a successful login. Any info will help!
I have a password only form; here is my code:
<!doctype html>
<html>
<head>
<meta name="googlebot" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/account.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
<meta charset="utf-8">
<title>The Order of Aztec</title>
</head>
<body>
<div id="page" align="center">
<br /><br /><br />
<div align="center"><img src="images/aztec-logo.png" width="256" height="198" alt="Aztec"/></div>
<br /><br /><br /><br /><br />
<div id="error-division"></div>
<br />
<form id="myForm" align="center">
<div align="center"><input placeholder="Password" name="pword" id="pword" type="password" /></div>
<br />
<div align="center" id="agree-box"><input id="agree-box-input" onClick="login();return false;" type="checkbox">Agree that you are part of the steam group "The order of aztec."</input></div>
<br />
<div align="center"><input id="submit" type="submit" /></div>
</form>
<div id="ack"></div>
</div>
</body>
<script type="text/javascript">
function login()
{
var pass = document.getElementById('pword');
var corpass = "t";
var agree = document.getElementById('agree-box-input');
if(pass.value == corpass && agree.checked == true)
{
window.location = "login.php"
} else {
document.getElementById("error-division").innerHTML = "Wrong password or agreement not checked. Please try again.";
}
}
</script>
</html>
add if statement in your login.php
<?php
if(isset($_POST['your_username']) && isset($_POST['your_password'])){
// do your activities
}else{ ?>
<script type="Javascript">
alert("Your username / password is incorrect");
window.location = "your_validation_page.php";
</script>
<?php } ?>
I've seen all the posts but my problem isn't that it doesn't change the background color but rather that it does and the change it but to the original. Here's the code.
<html>
<head>
<title>Calculator</title>
<link rel="stylesheet" type="text/css" href="color.css"/>
<script type="text/javascript">
function calc(color){
//document.body.bgColor = color;
x=document.myForm
var val1=x.input1.value;
var val2=x.input2.value;
var val3=val1+"+"+val2;
if(eval(val3)<0) return;
else{
alert("The result is "+eval(val3));
var bd = document.getElementById ('body');
bd.className="highlight";
return;
}
}
</script>
</head>
<body id="body" onload="changeBackground(red)">
<form name="myForm" onsubmit="calc(this)">
Enter 2 values to add ;)
<input type="text" name="input1">
<input type="text" name="input2">
<input type="submit" value="Send Input">
</form>
</body>
</html>
CSS:
.hightlight{
background-color: yellow;
}
I understand that the function ends right before the end of the function. So how can I get it to hold the color?
The problem is that you tries to POST page over submit button. In this case page is fully redrawn, without keeping previous state that is set by your script.
Just change code of button:
<input type="button" value="Send Input" onclick="calc(this)">