Form to edit simple website template not working - javascript

I have only used software like Adobe Muse in the past so I am quite new to coding, but I think I have the basics down.
I am trying to create a form that will alter the content on a template site that will be duplicated.
I created the form:
<form class="pure-form" id="Builder" method="POST" action="scripts\build.php">
<fieldset class="pure-group">
<input type="text" class="pure-input-1" placeholder="Store Name" name="Name">
<textarea class="pure-input-1" placeholder="Description" name="Description"></textarea>
<textarea class="pure-input-1" placeholder="About Paragraph" name="About"></textarea>
<input type="text" class="pure-input-1" placeholder="Store Address" name="Address">
<input type="text" class="pure-input-1" placeholder="Contact Number" name="Number">
<input type="text" class="pure-input-1" placeholder="Email Address" name="Email">
<input type="text" class="pure-input-1" placeholder="Tumblr Username" name="username">
<input type="text" class="pure-input-1" placeholder="Unique ID" name="unique">
<button name="btnbuild" type="submit" class="pure-button pure-input-1 pure-button-primary">Create Website</button>
</fieldset>
The form seems to be functioning alright.
I created a PHP file to get the data from this form:
<?php
$name = $_POST["Name"];
$descrip = $_POST["Description"];
$about = $_POST["About"];
$address = $_POST["Address"];
$number = $_POST["Number"];
$email = $_POST["Email"];
$username = $_POST["Username"];
$unique = $_POST["Unique"];
?>
I am not sure about the code for the images, but the variables should work alright.
In my index.html I used the following method to find and replace the strings that need to be replaced on the page.
<head>
<script>
window.onload = function() {
<?php include 'build.php'; ?>;
document.body.innerHTML = document.body.innerHTML.replace("EHNAME", "<?php echo $name; ?>");
document.body.innerHTML = document.body.innerHTML.replace("EHDESCRIPTION", "<?php echo $descrip; ?>");
document.body.innerHTML = document.body.innerHTML.replace("EHABOUT", "<?php echo $about; ?>");
document.body.innerHTML = document.body.innerHTML.replace("EHADDRESS", "<?php echo $address; ?>");
document.body.innerHTML = document.body.innerHTML.replace("EHNUMBER", "<?php echo $number; ?>");
document.body.innerHTML = document.body.innerHTML.replace("EHEMAIL", "<?php echo $email; ?>");
document.body.innerHTML = document.body.innerHTML.replace("EHUNIQUEID", "<?php echo $unique; ?>");
document.body.innerHTML = document.body.innerHTML.replace("EHUSERNAME", "<?php echo $username; ?>");
document.title = name; }
</script>
</head>
The problem is that it doesn't update the strings at all.
Any help to figure this out would be appreciated.

If I got it right, your initial form post the data to: scripts\build.php and later you are trying to get this data in another page index.html, this seems to be to problem.
Even if you import the build.php in the index.html file, this is another request, so the posted data to the build is already gone. You can solve this problem making the post directly to the index or persisting the data (in the session, for example, or database) and retrieving it in the index.html file.

Related

My interaction between PHP and JavaScript is not working . What can i do to solve this?

I am echoing in the screen the (id,name,city) from MySQL.
But the problem and the challenge is inserting the values from MySQl into some inputs.
I am using the code:
verificar_id($pdo);
function verificar_id($pdo){
if(isset($_POST['verificar']) && isset($_POST['id_cliente'])){
session_start();
$id_cliente = $_POST['id_cliente'];
$sql= $pdo->prepare("SELECT * FROM `clientes` where `id`=?");
$sql->execute(array($id_cliente));
$info = $sql->fetchAll(PDO::FETCH_ASSOC);
echo "<pre>";
print_r($info);
echo "</pre>";
foreach ($info as $key => $value) {
$_SESSION['id'] = $value['id'];
$_SESSION['nome'] = $value['nome'];
$_SESSION['cidade'] = $value['cidade'];
}
}
}
?>
<script type='text/javascript'>
var nome = document.getElementById('id').value = "<?php echo $_SESSION['id'] ?>"
var nome = document.getElementById('nome').value = "<?php echo $_SESSION['nome'];?>"
var nome = document.getElementById('cidade').value = "<?php echo $_SESSION['cidade'];?
>"
</script>
And My HTML:
<body>
<form method="post" id="form">
<input type="number" name="id_cliente">
<input type="submit" name="verificar">
</form>
<input type="text" name="id" id="id">
<input type="text" name="nome" id="nome">
<input type="text" name="sobrenome" id="cidade">
</body>
And this is the result:
How you can see the result is almost exactly what i wanted: The only problem in all this is the browser is not doing what should do. Of some how, the browser is understanding that this a Js code(and inside the code, it is appearing the same result tha the "print_r", but is not running and i don't know how to solve this.
Someone can help me to solve this problem? Or solve this or show another way to me get the result? Pls.
Maybe another way to insert the values into a input.

How to add value="" to input

Is there a possibility to add the value tag to an input with javascript?
e.g. to change a input fild in a form from:
<input type="text" name="mail" id="mail">
to:
<input type="text" name="mail" id="mail" value="<?php echo $_SESSION['email'] ?>
EDIT:
<?php
echo '
<script type="text/javascript">
document.getElementById("mail").setAttribute("value", "<?php echo $_SESSION["email"];?>");
</script>';
?>
Use setAttribute() to fill in the attribute of an element.
document.getElementById("mail").setAttribute("value", "<?php echo $_SESSION['email'];?>");
<input type="text" name="mail" id="mail">
You can't use <?php inside a PHP string. Use concatenation instead.
<?php
echo '
<script type="text/javascript">
document.getElementById("mail").setAttribute("value", "' . $_SESSION["email"] . '");
</script>';
?>
Yes, you can access the value field of an input with javascript
document.getElementById('mail').value = "someemail#email.com";
Not sure what you are trying to achieve but you could save PHP value as a JS variable and go from there. Something like this?
var email = '<?php echo $_SESSION['email'];?>';
document.getElementById('mail').value = email;
Using the method echo, returning the element input.
$youvalue = "This is the value of the input"
echo '<input type="text" name="mail" id="mail" value="'.$yourvalue.'">';
Using the method echo again, returning a script.
$youvalue = "This is the value of the input"
echo '<script>var x = document.createElement("input");x.type = "text";x.name = "mail";x.id = "mail";x.value = "'.$youvalue.'"; document.body.appendChild(x);</script>'

Php javascript conflict in wordpress template file

I have built a contact form for my wordpress site. Four fields are there - name, email, subject, message. For logged in users I want their name and email to be auto-filled in their respective fields in the form and those name, email fields will be disabled for them to edit. And for non-logged in users they will put name, email fields manually. I have put this code in the page template file -
<?php
$current_user = wp_get_current_user();
$user_email = $current_user->user_email;
$user_name = $current_user->user_firstname.' '.$current_user>user_lastname;
if ( 0 != $current_user->ID ) {
echo '<script type="text/javascript">
document.getElementById("curUserName").value = "'.$user_name.'";
document.getElementById("curUserName").disabled = "disabled";
document.getElementById("curUserEmail").value = "'.$user_email.'";
document.getElementById("curUserEmail").disabled = "disabled";
</script>';
}
?>
But this code is disabling name, email fields for both users (logged in and non-logged in). I have controlled the script through if condition. Still the javascript is applying for both users. Please advise where I have gone wrong.
Here is the form html -
<form action="/success.php" method="post">
<label>Name :</label><br>
<input type="text" id="curUserName" name="sender_name" required><br>
<label>Email :</label><br>
<input type="text" id="curUserEmail" name="sender_email" required><br>
<label>Subject :</label><br>
<input type="text" name="sender_sub"><br>
<label>Message</label><br>
<textarea name="sender_msg" rows="4" cols="60" required></textarea><br>
<input type="submit" name="submit" value="Send">
</form>
The source you are going to change has disabled option already.. so just remove it if the user is not logged in :)
<?php
$current_user = wp_get_current_user();
$user_email = $current_user->user_email;
$user_name = $current_user->user_firstname.' '.$current_user>user_lastname;
echo '<script type="text/javascript">';
if ( 0 != $current_user->ID )
{
echo 'document.getElementById("curUserName").value = "'.$user_name.'"
document.getElementById("curUserName").disabled = "disabled"
document.getElementById("curUserEmail").value = "'.$user_email.'"
document.getElementById("curUserEmail").disabled = "disabled"';
}
else
{
echo 'document.getElementById("curUserName").disabled = false;
document.getElementById("curUserEmail").disabled = false;';
}
echo '</script>';
?>
Don't echo javascript with php. It's bad practice.
Try using value tags in your inputs, check if user logged in with a ternary operator, and if so, echo to value tag their credentials.
<?php (is_user_logged_in()) ? $current_user = wp_get_current_user() : $current_user = false; ?>
<label>Name</label>
<input type="text" id="curUserName" name="sender_name" value="<?php ($current_user) ? echo $current_user->user_name : '' ?>" required>
<label>Email</label>
<input type="text" id="curUserEmail" name="sender_email" value="<?php ($current_user) ? echo $current_user->user_email : '' ?>" required>

Displaying a php script result in a div using jquery

I am a beginner on coding. I am working on a WordPress website using beaver builder theme. My challenge is to display a login form (when the user is not logged in) and the user name when he is logged in, to a specific area of the header that has a class "header-text".
Here is my php code located in a file named "file.php"
<?php
if(is_user_logged_in()) {
$user = wp_get_current_user();
$var1 = "<p>Welcome <?php echo $user->display_name; ?></p>
<p><a href='/login/login.php?logout=true'>Click here to log out</a></p>";
$var2 = "<form action='login.php' method='post'>
<input type='text" autocomplete='off' placeholder='Username' name='username'/>
<input type='text' autocomplete='off' placeholder='Password' name='password'/>
<button type='submit' value='Submit'>Submit</button>
</form>";
echo echo json_encode($var1);
} else {
echo echo json_encode($var2);
}
?>
Here is javascript
<script type="text/javascript">
jQuery(document).ready(function($){
function displayAccess() {
$.get("login/file.php");
return false;
}
if(<?php echo json_encode($var1); ?>) {
var variable1 = <?php echo json_encode($var1); ?>;
document.getElementByClassName("header-text").innerHTML = variable1;
}
if(<?php echo json_encode($var2); ?>){
var variable2 = <?php echo json_encode($var2); ?>;
document.getElementByClassName("header-text").innerHTML = variable2;
}
});
</script>
I need help to correct my script. Thanks!
in this case, javascript an jquery is not necessary, because the login status changes on reload, anyway.
all you need is a change in your php code:
<?php
/* put this to your template file (e.g. header.php) */
if(is_user_logged_in()) {
$user = wp_get_current_user();
/* change $var1 to echo it via html block inside php */
?>
<p>Welcome <?php $user->display_name; ?></p>
<p>Click here to log out</p>
<?php
/* cut $var2 because it is not accessible in the else clause */
} else {
/*
paste $var2 here and echo it
btw:
* For tags that are self-closing, the forward slash should have exactly one space preceding it (https://make.wordpress.org/core/handbook/best-practices/coding-standards/html/#self-closing-elements)
* use single or double quotes – make a decision!
*/
?>
<form action="login.php" method="post">
<input type="text" autocomplete="off" placeholder="Username" name="username" />
<input type="text" autocomplete="off" placeholder="Password" name="password" />
<button type="submit" value="Submit">Submit</button>
</form>
<?php
}
?>

Failure to display result of a php script calculation in the textarea box

I believe that my problem may lie in the way that I am trying to initialize the script. The submit button that I am using seems to just clear the form, and not display any results. I also think there may be a problem with the two lines " $message = $_POST['textarea'];" and "echo $result + $message;" I am not sure if that is the correct way to produce a result into a text area box, as well as display the miles driven and total cost in their separate text boxes. I want this one button to do all three tasks. Is there a way to do this efficiently with PHP?
Edit: Corrected version of the code. Thank you #Fred-ii-!
<?php
if(isset($_POST['submit'])) {
$x = $_POST['beginningOdometerReading'];
$y = $_POST['endingOdometerReading'];
$z = $_POST['daysRentedCar'];
$miles = $y - $x;
$result = (15 * $z) + ($miles * 0.12);
$message = $_POST['textarea'];
echo $result + $message; }
?>
<html>
<head>
</script>
</head>
<body>
<div align="center">
<hr><br>
<form action="index4.php" method="post" name id="Main">
<input type="text" id="name" name="customerName" placeholder="Enter your name here" size="30px">
<br><br>
<input type="text" id="address" name="customerAddress" placeholder="Enter your street address here" size="50px">
<br><br>
<input type="text" id="city" name="customerCity" placeholder="What city do you live in?" size="30px">
<br><br>
<input type="number" id="zip" name="customerZip" placeholder="Enter your zip code" size="30px">
<br><br>
<input type="number" id="bOdometer" name="beginningOdometerReading" placeholder="Start odometer reading" size="80px">
<br><br>
<input type="number" id="eOdometer" name="endingOdometerReading" placeholder="End odometer reading" width="80px">
<br><br>
<input type="number" id="daysRented" name="daysRentedCar" placeholder="Days rented" size="50px">
<br><br>
<input type="submit" id="submit" value="Submit"/>
<br><br>
Miles Driven: <input type="number" id='miles' min="1" max"10000" readonly="" />
Total Cost: <input type="number" id='result' min="1" max"10000" readonly="" />
<br><br>
Summary: <textarea cols="30" rows="2" name="thetextarea" id="textarea"> </textarea>
<br><br>
<input type="reset" value="Reset">
</form>
<hr>
</div>
</body>
There are a few things wrong here.
One of the problems being with your conditional statement:
if(isset($_POST['submit'])) {
it is looking for a named element called "submit" which your submit button is not named.
<input type="submit" id="submit" value="Submit"/>
name it:
<input type="submit" name="submit" id="submit" value="Submit"/>
and you might have been relying on "id" for it. In this instance, you can't.
That is why you're getting back a blank page.
Having used an else{ echo "Error"; } would have echo'd "Error".
For example:
<?php
if(isset($_POST['submit'])) {
$x = $_POST['beginningOdometerReading'];
$y = $_POST['endingOdometerReading'];
$z = $_POST['daysRentedCar'];
$miles = $y - $x;
$result = (15 * $z) + ($miles * 0.12);
$message = $_POST['textarea'];
echo $result + $message; }
else { echo "Error"; }
?>
Then you have
$message = $_POST['textarea'];
but your textarea is named name="thetextarea".
Both of those need to match in names.
You are also using the wrong concatenate operator + for
echo $result + $message;
that needs to be a dot. The + sign is a JS/C++ method of concatenation, if one of those variables contains a string.
echo $result . $message;
or
echo $result . " ". $message;
Had it been a mathematical equation from two variables, then yes; that would have been a valid operator, just not in this case, since you are trying to echo from the $message variable, which is for the "textarea", being "text" and not an integer.
Sidenote: To ensure that you are indeed passing an integer to a POST array, add (int) to it. Example: $x = (int)$_POST['beginningOdometerReading'];
Edit: I found a few more errors in your form.
You have 2x instances of max"10000" it's missing an equal sign max="10000"
and you might be missing name attributes for both of these (which I already outlined are missing = signs for max"10000".
Miles Driven: <input type="number" id='miles' min="1" max"10000" readonly="" />
Total Cost: <input type="number" id='result' min="1" max"10000" readonly="" />
If you're relying on JS as you tagged this as, please edit your question and add that code. However, there was no code in your PHP to support this.
You've a syntax error in <form> being name id="Main"
You will need to adjust your actual code accordingly.
Rewrite:
<?php
if(isset($_POST['submit'])) {
$x = $_POST['beginningOdometerReading'];
$y = $_POST['endingOdometerReading'];
$z = $_POST['daysRentedCar'];
$miles = $y - $x;
$result = (15 * $z) + ($miles * 0.12);
$message = $_POST['thetextarea'];
echo $result . " " . $message; }
else { echo "Error"; }
?>
Error reporting would have signaled an undefined index notice for both of those.
Add error reporting to the top of your file(s) which will help find errors.
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
// rest of your code
Sidenote: Error reporting should only be done in staging, and never production.
Try to give name for input type `submit` button like
<input type="submit" name="submit" id="submit" value="Submit"/>
And try to remove from action='' because when you submit it directly takes to the index4.php and
error in form statement also you does not provide name you leave it empty like name id="Main"
<form action="index4.php" method="post" name="Main" id="Main">
And use echo statement like
echo $result,$message; }

Categories