clearing textarea from outside php file doesn't work - javascript

I've looked around trying to find a solution to clear a textarea from an outside php file.
Basically this is my form:
<iframe name="post_target" style="display:none;"></iframe>
<form action="post_status.php" method="post" target="post_target">
<div class="status_update">
<div id="update_type"></div>
<?php load_picture($_SESSION['profile_picture']); ?>
<textarea class="scrollabletextbox" placeholder="Share your thoughts" onkeyup="textAreaAdjust(this)" name="status_update" id="status_update"></textarea>
</div>
<div id="update_options">
<button id="post" name="post" onclick="javascript:postUpdate()">Post</button>
</div>
</form>
And it calls post_status.php who's structure is basically:
<?php
function post_status($conn, $status){
// function
}
$status = $_POST['status_update'];
post_status($conn, $status);
?>
<script type="text/javascript">
// clear textarea
document.getElementById('status_update').value = "";
alert("passed clear");
</script>
What happens is the following : the php function executes properly, but the JS part doesn't. If I leave out ' .value = "" ' it works fine, if I don't then the alert never shows.
Does anyone have any idea concerning this issue ?

You use status_update on class attribute (div) and id attribute (textarea)
you need to make a choice.

Related

Run a JavaScript function from a php if statement

I would like to create a php IF statement so If it receives the key "test" by POST, <h2> hello </ h2> should be output, otherwise <span> error </ span>
How can I make that?
<div id="rre">
<h2 class="desktop">Hamburg,a major port city in northern Germany.</h2>
<h2 class="mobil">Berlin,is the capital and the largest city of Germany.</h2>
</div>
<form action="viereck.html" method="POST">
<input type="text" name="check"?>
<input type="button" value="Klick" onclick="klick();" />
</form>
<script type="text/javascript">
function klick() {
jQuery('#rre').html('<h1>Hallo</h1>');
}
</script>
The response that you return needs to be inside script tags like:
echo '<script type="text/javascript">alert();</script>';
Why you don't do that with jquery: Try smth like this
<script type="text/javascript">
function klick() {
if($("#text").val() == 'test'){
jQuery('#rre').html("<h1>Hello there!</h1>");
}else{
jQuery('#rre').html("Error");
}
}
</script>
Html
<div id="rre">
<h2 class="desktop">Hamburg,a major port city in northern Germany.</h2>
<h2 class="mobil">Berlin,is the capital and the largest city of Germany.</h2>
</div>
<form action="viereck.html" method="POST">
<input type="text" name="check"? id="text">
<input type="button" value="Klick" onclick="klick();" />
</form>
JSFIDDLE
If the page you're posting to is viereck.html, you're going to be unable to use PHP on it.
If you can change the file to viereck.php, you can POST to it like you're doing, with action="viereck.php" method="POST" Then, at the top of your page, check for POST values in PHP like:
<?php
if(isset($_POST['check'])){
$check = '<span>error</span>';
if($_POST['check'] == 'test'){
$check = '<h1>Hallo</h1>';
}
}
?>
And if your jQuery is on the same page, you can insert the PHP like:
<script type="text/javascript">
function klick() {
jQuery('#rre').html(<?= $check; ?>);
}
</script>
Doing it this way though can lead to some serious headaches as your project grows, I wouldn't recommend it. Why not look into using AJAX? You can submit a form and return a message indicating success or failure, as well as why. You can then create your HTML in jQuery instead of a PHP string like:
// On form submit
$.ajax({
url: "viereck.php",
type: 'POST',
success: function(result){
var msg = $('<h1>').text('Hallo');
$('#rre').html(msg);
},
error: function(result){
var msg = $('<span>').text('Error');
$('#rre').html(msg);
}
});

checking isset at bottom of page not working

I have a dilemma (which I am yet to find a way around). For some reason, PHP doesn't want to check if $_POST["login"] at the bottom of the <body> tag within my document.
It will work if it is put at the very top of the document, or even the top of the <body> tag. However, if I put it at the top of the document / <body> tag, the output JavaScript will not execute!
For example, this is the document (where the PHP will not execute):
<form>
<span id="example-element">Displaying.</span>
<input type="text" name="example">
<button type="submit" name="login">Login</button>
</form>
<?php
if(isset($_POST["login"])){
echo "
<script>
document.getElementById('example-element').style.display = 'block';
</script>"
}
?>
If I am to do something like this, however (the PHP will execute):
<?php
if(isset($_POST["login"])){
echo "
<script>
document.getElementById('example-element').style.display = 'block';
</script>"
}
?>
<form>
<span id="example-element">Displaying.</span>
<input type="text" name="example">
<button type="submit" name="login">Login</button>
</form>
But due to how JavaScript compiles, it will throw an error saying how it cannot set a style on a null element.
I have no idea how to get around this dilemma, so all help is appreciated!
Cheers.
<form>
<span id="example-element">Displaying.</span>
<input type="text" name="example">
<button type="submit" name="login">Login</button>
</form>
<?php
if(isset($_GET["login"])){
echo "<script>
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('example-element').style.display = 'block';
}, false);
</script>";
}
?>
Check if this works..... I've added the display code inside the DOMContentLoaded event and change the $_POST variable to $_GET. Works fine in my local system.
You can do it as follows
<style>
.someClass {
display: block;
}
</style>
<?php
if(isset($_POST["login"])){
$hasClass = true;
}
?>
<form method="post">
<span id="example-element" class=<?php if(isset($hasClass)==true) echo "someClass"; ?> >Displaying.</span>
<input type="text" name="example">
<button type="submit" name="login">Login</button>
</form>
The other problem with your code is that you are not setting method of your form and by default it is GET where as in php you were looking for POST request.
You could solve it either by using $_REQUEST in php when you are not sure about the method.
Actally php executes before javascript.
Change like this
<script>
var isSubmit = "<?php isset($_POST['login'])?true:false; ?>";
if(isSubmit){
document.getElementById('example-element').style.display = 'block';
}
</script>"

jQuery.get to read a file and use the data into a form

I want the script to do the following:
On page load, read a text file with a number (just one line)
Increment the number by 1
Insert the number in an <input> box of the form
Once <form> is submitted, write the number to the text file
When the form gets loaded again, it will rerun the code and the number will increment by 1. This is basically to pre-populate a field with a unique and progressive number prior to form submission.
I am currently using jQuery, PHP and of course HTML:
HTML:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
$.get("http://www.domain.com/tools/formdata.txt");
function test(){
$.get('http://www.domain.com/tools/formdata.txt', function(data){
x = data++;
});
}
</script>
</head>
<body onload="test()"/>
<form action="save_json.php" method="post">
Contract: <input type="number" name="contract" id="contract" value="x" /><br />
<input type="submit" id="submit" value="Invia" />
</form>
</body>
</html>
PHP
<?php
if(isset($_POST['contract'])) {
// if form fields are empty, outputs message, else, gets their data
if(empty($_POST['contract'])) {
echo 'All fields are required';
}
else {
// adds form data into an array
$formdata = $_POST['contract'];
if(file_put_contents('/var/www/domain/tools/formdata.txt', $formdata)) echo 'Data successfully saved';
else echo 'Unable to save data, try again or contact IT';
}
}
else echo 'Form fields not submitted';
?>
First: I recommend that instead of javascript, you do this with PHP file_get_contents('formdata.txt') at the start of your file, and then you echo it in. That way, the value will be there on load, rather than having to wait for the HTML to render and the javascript to run. Also, it is a much better practice and will let you do a lot more things if you choose to expand the page.
However, here's the solution to the issue presented:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
var x;
function test(){
$.get('file.txt', function(data){
console.log('data',data);
var x = ++data;
console.log('x',x);
$('#contract').val(x);
});
}
</script>
</head>
<body onload="test()"/>
<form action="aoeu.php" method="post">
Contract: <input type="number" name="contract" id="contract" /><br />
<input type="submit" id="submit" value="Invia" />
</form>
</body>
</html>
The things to note:
Close off your <script> tag including the jquery library, then open another one after it.
No need to do the first $.get() you have - save it for the function.
var x = data++; - this increments data AFTER its value has been assigned to x. So, it will never increase. Do ++data instead, and it increments before.
You need to place it somewhere afterwards. How you had the input (value='x') is just trying to put the character "x" into the input. Use javascript to edit the functions value, as in my example.
Your PHP works fine.

passing javascript throught textarea inside a form

I would like to ask a question.
Is there a way to pass jquery script over textarea and being accepted by php with $_POST function?
just like w3schools did, I've tried but the jquery script are missing and I don't know why..
Please somebody help me. Thank you!
<form action="showHTML.php" method="post" >
<textarea name="html" id="hello">
<script src="lib/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("body").css({backgroundColor:"red"});
});
</script>
</textarea>
<form>
And this is my php file that i used to grab the content from the $_POST
<?php
if(isset($_POST['html']) and !empty($_POST['html'])){
$data = htmlentities($_POST['html']);
}else{
echo '<p>Edit the HTML to the right.</p>';
}
echo html_entity_decode($data);
?>
<script src="lib/jquery.min.js"></script>
<form action="showHTML.php" method="post" >
<textarea name="html" id="hello">
$(document).ready(function(){
$("body").css({backgroundColor:"red"});
});
</textarea>
<form>
Now get the script as text from showHTML.php and process it from there. I guess you can't put script tag inside text area like what you have done.
your code should look like this: close your form tag and add a button to submit.
<script>
$(document).ready(function(){
$("body").css({backgroundColor:"red"});
});
</script>
<form action="showHTML.php" method="post" >
<textarea name="html" id="hello">
</textarea>
<input type="submit" value="submit"/>
</form>
----^
php:
<?php
if(isset($_POST['html']) and !empty($_POST['html'])){
$data = htmlentities($_POST['html']);
}else{
echo '<p>Edit the HTML to the right.</p>';
}
echo html_entity_decode($data);
?>

form fields not passing through when submit is done via javascript

I can't seem to figure out why this is happening. Any help would be appreciated. I have an html form with two fields. When I run the page and submit the form with a submit button, the field values pass through ok. But if I run the same page and submit with javascript as I show here, the receiving file shows null values for both x and y.
Source File:
<html>
<head>
<script>
document.invoice.x.value = "1";
document.invoice.y.value = "2";
</script>
</head>
<body>
<form method="post" name="invoice" id="invoice" action="process_payment.php">
X: <input type="text" name="x"> Y: <input type="text" name="y">
<script>document.forms["invoice"].submit();</script>
</form>
</body>
</html>
Target File (process_payment.php):
<?php
session_start();
print "<pre>"; print_r($_POST); print("</pre>");
?>
Output I am getting:
Array
(
[x] =>
[y] =>
)
you can set your value in javascript like this:
document.getElementsByName("x").value="1";
document.getElementsByName("y").value="2";
and to submit the form use:
document.forms["invoice"].submit();
Please check this
Use below BEFORE body Close tag check This
<script>
document.invoice.x.value = "1";
document.invoice.y.value = "2";
</script>
OR use jQuery
<script>
$("[name='x']").val("1");
$("[name='y']").val("2");
</script>

Categories

Resources