PHP echo HTML input variable outside heredoc - javascript

I include my HTML in PHP using heredoc, and I want to get the user input variable that is inside heredoc, and echo it out. I tried using $_GET["input"], but I got error undefined index:input
May I know how to get the input variable?
<?php
$htmlfile= <<<html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Seller Evaluation System</title>
<style type="text/css">
body {background-image:url("images.jpg");}
</style>
</head>
<body>
<h1><center><font color="darkblue">Seller Evaluation System</font><center></h1>
<p><center>
<script>
function searchSite(){
var input=document.getElementById("searchinput").value;
var searchForm=document.getElementById("searchForm");
searchForm.action="http://www.mudah.my/Malaysia/Electronics-3000/"+input+"-for-sale?lst=0&fs=1&q="+input+"y&cg=3000&w=3&so=1&st=s";
searchForm.submit();
}
</script>
<form method="get" action="ttt.php" id="searchForm">
<input type="text" id="searchinput" size="33" placeholder="Search Electronic Gadgets..." autofocus>
<button onclick="searchSite()">Search</button>
</form>
<p><label>Mudah<input type="checkbox" name="searchFrom" value="Mudah" checked/></label>
<label><font color="grey">Lazada</font><input type="checkbox" name="searchFrom" value="Lazada" disabled="disabled"/></label>
<label><font color="grey">Lelong</font><input type="checkbox" name="searchFrom" value="Lelong" disabled="disabled"/></label>
<label><font color="grey">Ebay</font><input type="checkbox" name="searchFrom" value="Ebay" disabled="disabled"/></label></p>
</center></p></br>
</body>
</html>
html;
echo $htmlfile;
$userInput=$_GET["input"];
echo $userInput;
?>

You have to call the input name "searchinput". But it could not be available if you not send the form, and you have to call it by "name" tag, noy by "id".
You can show it after send using Javascript, no PHP.
This works, but the form have to be processed by the same file, so "action" have to be empty. If not, you can get the GET parameters in the file process your form, in your example ttt.php
<?php
$htmlfile= <<<html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Seller Evaluation System</title>
<style type="text/css">
body {background-image:url("images.jpg");}
</style>
</head>
<body>
<h1><center><font color="darkblue">Seller Evaluation System</font><center></h1>
<p><center>
<form method="get" id="searchForm">
<input type="text" name="searchinput" size="33" placeholder="Search Electronic Gadgets..." autofocus>
<button type="submit">Search</button>
</form>
</center></p></br>
</body>
</html>
html;
echo $htmlfile;
$userInput=$_GET["searchinput"];
echo $userInput;
?>

$_GET[..] takes the name of a form element. So in your HTML you need to include that:
<input type="text" name="input" id="searchinput" size="33" placeholder="Search Electronic Gadgets..." autofocus>
Also note you only want to get the item when you submitted the form, you need to first check the GET exist:
// If we submitted our form with a element named "input", then echo
if(isset($_GET["input"]) {
$userInput=$_GET["input"];
echo $userInput;
}
That way the code only will run if the form was submitted.

Related

ReferenceError: Can't find variable X when calling JS function (or variable) from HTML file

I am trying to call a function in an external JavaScript file from an HTML-file. The goal is to work with the content of a form there.
I tried so many things and always got the Error "ReferenceError: Can't find variable: X"
The positioning of the jquery javascript file loading
The positioning of the <script src="XXX"> call
Calling the function from the button "onclick" or the form "onsubmit"
Trying to call the javascript file from an embedded script in the HTML
This is what my JavaScript file and my HTML looks like right now:
function submit(e) {
answerText = document.getElementById("text").value;
// Do something with it.
}
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/scripts/debug_alerts.js" type="text/javascript"></script>
</head>
<body>
<form id="validation-form" onsubmit="return submit(e)">
<input type="text" class="form-control" name="text" id="text" placeholder="Text" required>
<button type="button" class="btn btn-primary" onclick="submit(e)">Send</button>
</form>
</body>
I also tried
function doSomething() {
// Do something
}
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/scripts/debug_alerts.js" type="text/javascript"></script>
</head>
<body>
<form id="validation-form" onsubmit="return submit(e)">
<input type="text" class="form-control" name="text" id="text" placeholder="Text" required>
<button type="button" class="btn btn-primary" onclick="submit(e)">Send</button>
</form>
<script>
function submit(e) {
doSomething();
}
</script>
</body>
In both cases, it returned the same error over and over again: "ReferenceError: Can't find variable: X". In the first example, X being "submit" and in the second "doSomething".
All help is very welcome. I know there are similar headlines here, but non of the solutions did anything for me.
Hey so when I ran the code without the e as a parameter for the submit function in the html it didn't give me the error. I think it may be because the e is the place holder for the text of the submit function in this case. Hope this helps.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/scripts/debug_alerts.js" type="text/javascript"></script>
</head>
<body>
<form id="validation-form" onsubmit="return submit(e)">
<input type="text" class="form-control" name="text" id="text" placeholder="Text" required>
<button type="button" class="btn btn-primary" onclick="submit()">Send</button>
</form>
<script type="text/javascript">
function submit(e) {
answerText = document.getElementById("text").value;
// Do something with it.
}
</script>
</body>
</html>

How to pass an input file to an input file multiple?

I have a file input where the client adds an image and an img element is created through DOM, the problem is that I only have one file input and then with the submit button I want to send all the images that have been selected one by one to a file. php and upload them to the server, is there any way to go putting those files in a multiple input file and so just send the multiple input? or what would be the most optimal way?
Maybe you can try with input array like:
<form method="post" enctype="multipart/form-data" action="index.php">
<input name="file[]" type="file" />
<input name="file[]" type="file" />
...
<input type="submit" name="add" value="Add" />
</form>
Pro Tip: Read about multiple on MDN
I'm not sure if this is exactly what you're looking for, but this solved my needs to upload/save multiple images.
Save this code in a file called upload.html:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>*Upload Test*</title>
</head>
<body>
<form action="up.php" method="post" multipart="" enctype="multipart/form-data">
<input type="file" name="img[]" multiple accept=".jpg,.jpeg,.png" onchange="submit()">
<input type="submit">
</form>
</body>
</html>
Save this code in a file called up.php:
<?php
$img=$_FILES['img'];
if(!empty($img)) {
$img_desc=reArrayFiles($img); $cnt=0;
foreach($img_desc as $val) {
$newname=$val['name'];
echo $newname.' ('.$val['type'].') : ';
if(file_exists('./uploads/'.$newname)){
echo '<b>Image already exists</b><br>';
}else{
move_uploaded_file($val['tmp_name'],'./uploads/'.$newname);
if($val['error']==0){
$cnt++;
echo 'Uploaded!<br>';
}else{
echo '<b>Error</b><br>';
}
}
}
echo '<hr>Uploaded '.$cnt.' images.';
}
function reArrayFiles($file) {
$file_ary=array();
$file_count=count($file['name']);
$file_key=array_keys($file);
for($i=0;$i<$file_count;$i++) {
foreach($file_key as $val) {
$file_ary[$i][$val]=$file[$val][$i];
}
}
return $file_ary;
}
?>
This code was adapted from an example here.

Javascript alert not displaying correctly

Does anyone know how can I resolve the following: I want the form input by the user, to be alerted in a different HTML file.
This is what I wrote so far. It works for the id called 'name', but I dont know why it does not for the 'position'.
"index.html" file:
<script>
function myFunction() {
name = document.getElementById("name").value;
position = document.getElementById("position").value;
window.location.replace("signature.html");
return false;
}
</script>
<form class="formulario" onsubmit="return myFunction()">
Name: <input type="text" name="name" id="name"><br>
Position: <input type="text" name="position" id="position"><br>
<br>
<input type="submit" value="Generate Signature">
</form>
"signature.html" file - notice the alert(name) and the alert(position) => the alert(name) works, but not the alert(position). I want to understand how to fix that please.
<html>
<head>
</head>
<body>
<div class="signature_general">
<div class = "signature_middle">
<div id = "signature_details">
<font size="2px">Regards,</font><br>
<b><font color="#808080" size="3px" id="nameInput">Francisco Jurado</font></b><br>
<font size="2px" id="posInput">Accounting Systems Team Leader</font>
</div>
</div>
</div>
<script>
alert(name);
alert(position);
</script>
</body>
</html>
Thanks very much
Edit: I have noticed that I am getting an error, in which "position" is "undefined". Does anyone knows?
You can change your html file as:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form class="formulario" action="signature.html" method="get">
Name: <input type="text" name="name" id="name"><br>
Position: <input type="text" name="position" id="position"><br>
<br>
<input type="submit" value="Generate Signature">
</form>
</body>
</html>
And your signature.html file as :
<html>
<head>
</head>
<body>
<div class="signature_general">
<div class = "signature_middle">
<div id = "signature_details">
<font size="2px">Regards,</font><br>
<b><font color="#808080" size="3px" id="nameInput">Francisco Jurado</font></b><br>
<font size="2px" id="posInput">Accounting Systems Team Leader</font>
</div>
</div>
</div>
<script>
var values = window.location.search.substring(1).split('&')
var name = values[0].split('=')[1]
var position = values[1].split('=')[1]
alert(name)
alert(position)
</script>
</body>
</html>
That name you are setting in index.html is not the same name you are printing in the alert of signature.html.
You can see this by renaming name to name2 in both places.
If you want to pass those variables from one page to another, I suggest using query strings how to exchange variables between two HTML pages?

Why does getting my form with document.getElementByID stop alert() from firing?

I'm trying to alert the values of the form elements but this isn't functioning even at its simplest: getting the elements of the form then alerting a string.
The alert fires when it's by itself, but not when I put the form's data in the variable. Why?
I'm sure there's probably a very simple mistake in here somewhere, but I'm stumped.
<!DOCTYPE html>
<html>
<head>
<!-- ISTE240 Exercise 5b -->
<meta charset=utf-8 />
<title>Get elements from a form</title>
<script>
function getFormValues() {
// function to send first and last names to an 'alert' message.
alert("test");
var form = document.getElementById(“regForm”).elements;
}
</script>
</head>
<body>
<p>JavaScript Exercise 5b </p>
<form id="regForm" onsubmit="getFormValues()">
First name: <input type="text" name="fname" value="Boo"><br>
Last name: <input type="text" name="lname" value="Radley"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
By default form tag will try to submit form values. You must prevent default behavior, demo below
document.querySelector('#regForm').onsubmit = function(e){
e.preventDefault();
alert('a');
var form = document.getElementById("regForm").elements; //<-- wrong syntax, must be "
console.log(form);
}
<!DOCTYPE html>
<html>
<head>
<!-- ISTE240 Exercise 5b -->
<meta charset=utf-8 />
<title>Get elements from a form</title>
</head>
<body>
<p>JavaScript Exercise 5b</p>
<form id="regForm">
First name:
<input type="text" name="fname" value="Boo">
<br>Last name:
<input type="text" name="lname" value="Radley">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>

merging my register page with fancybox

Im trying to put my "register.php" into fancybox, however I cant make it connect there.
To call up fancybox I use this:
<body>
Open
<div id="test" style="display:none;width:400px; height:600px;"
**Content here**
<!--Javascript for fancybox-->
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
My register form is like this:
<?php
include_once 'includes/register.inc.php';
include_once 'includes/functions.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Secure Login: Registration Form</title>
<script type="text/JavaScript" src="js/sha512.js"></script>
<script type="text/JavaScript" src="js/forms.js"></script>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<!-- Registration form to be output if the POST variables are not
set or if the registration script caused an error. -->
<h1>Register with us</h1>
<?php
if (!empty($error_msg)) {
echo $error_msg;
}
?>
<ul>
<li>Usernames may contain only digits, upper and lower case letters and underscores</li>
<li>Emails must have a valid email format</li>
<li>Passwords must be at least 6 characters long</li>
<li>Passwords must contain
<ul>
<li>At least one upper case letter (A..Z)</li>
<li>At least one lower case letter (a..z)</li>
<li>At least one number (0..9)</li>
</ul>
</li>
<li>Your password and confirmation must match exactly</li>
</ul>
<form method="post" name="registration_form" action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>">
Username: <input type='text' name='username' id='username' /><br>
Email: <input type="text" name="email" id="email" /><br>
Password: <input type="password"
name="password"
id="password"/><br>
Confirm password: <input type="password"
name="confirmpwd"
id="confirmpwd" /><br>
<input type="button"
value="Register"
onclick="return regformhash(this.form,
this.form.username,
this.form.email,
this.form.password,
this.form.confirmpwd);" />
</form>
<p>Return to the login page.</p>
</body>
</html>
Im using the latest version of fancybox and I havent done much with the js files. Any ideas?

Categories