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);
?>
Related
I tried to refresh content on a div only when a user submits a form. The page is .php, and the action= is on the same page. Here is what I tried:
<?php
session_start();
if($_SERVER['REQUEST_METHOD'] == "POST")
{
if($_POST['user'] === 'mysecret' && $_POST['pass'] === 'page')
$_SESSION['auth'] = true;
}
if(isset($_SESSION['auth']))
{
?>
<html>
<body>
<div id="anothercontainer"> </div>
<div id="container">
<p id="mycontent"> Here is my new content </p> </div>
</body>
</html>
<?php
exit();
}
?>
<html>
<body>
<form id="changing" action="test3.php" method="POST">
User:
<input type="text" name="user" />
Pass:
<input type="password" name="pass" />
<input type="submit" value="Send" />
</form>
<div id="content"> Here is the content to be updated </div>
<script src="scripts/jquery-3.2.0.js"></script>
<script>
$('#changing').on('submit', function(e) {
e.preventDefault();
var $content = $('#content');
var details = $('#changing').serialize();
$.post('test3.php', details, function(data) {
$content.html( $(data).find('#container') );
});
});
</script>
</body>
</html>
It should refresh content on #content div. However, it does nothing. But if I use .filter() instead of .find(), it works fine.
My question is... why this doesn't work? It has something to do with the PHP or something like this?
I read from Jon Duckett's book... he used .find() and it worked. The only difference I saw was it's a .html page instead of .php. The code is like this (ajax request):
success: function(data) { // Show content
$content.html( $(data).find('#container') ).hide().fadeIn(400);
},
(the full .js code is here: http://javascriptbook.com/code/c08/js/jq-ajax.js).
Could somebody help me? Because I'm really confused. Thank you.
I have this simple code that allow users to search for certain content within a webpage. The code works well in Chrome and Opera but it does not in Firefox and Explorer. In this last two browsers mentioned, once the form is posted, the page just refreshes itself instead of redirecting to the result page.
What would I need to add or modify in order to make this work in all major browsers?
Thank's for you attention.
The code:
<?php
if($_POST[search2]){
if(!empty($_POST[text_search])){
echo "<script type='text/javascript'> window.open('search_results.php?q=".$_POST[text_search]."','_parent'); </script>";
}else{
echo "<script type='text/javascript'> alert ('You must enter something'); </script>";
}
}
?>
<html>
<head></head>
<body>
<form method="post" action="" name="formsearch">
<input name="text_search" class="input_search" type="text" placeholder="Enter your search">
<input type="image" src="search.png" id="search2" value="search" name="search2"/>
</form>
</body>
</html>
input type="image" defines an image as a submit button but never carry the value in the post array to server. Alternative to use image as submit, try to use button.
Replace
<input type="image" src="search.png" id="search2" value="search" name="search2"/>
With
<button type="submit" name="search2" value="search"><img src="search.png" alt="search"></button>
Also use quotes for $_POST elements.
if($_POST['search2']){
if(!empty($_POST['text_search'])){
echo "<script type='text/javascript'> window.open('search_results.php?q=".$_POST['text_search']."','_parent'); </script>";
}else{
echo "<script type='text/javascript'> alert ('You must enter something'); </script>";
}
}
<html>
<head>
<?php
if($_POST['search2']){
if(!empty($_POST['text_search'])){
echo "<script type='text/javascript'> window.open('search_results.php?q=".$_POST['text_search']."','_parent'); </script>";
}else{
echo "<script type='text/javascript'> alert ('You must enter something'); </script>";
}
}
?>
</head>
<body>
<form method="post" action="" name="formsearch">
<input name="text_search" class="input_search" type="text" placeholder="Enter your search">
<input type="image" src="search.png" id="search2" value="search" name="search2"/>
</form>
</body>
</html>
You just need to put your php tag that generates the JS between .
and I also put quote in the $_POST index.
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>"
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.
I am trying to submit a form through onclick event on tag. I have tried triggering document.myform.submit(), this.form.submit(), parentNode.submit() etc. but none of this is working! Using a submit button, the code works fine. But I want to use tag in place of that. Need some help.
<form id="myform" name="myform" method="POST" action="process_edit_questionnaire.php?project=<?php echo $project_id; ?>">
<input name="module" type="hidden" value="<?php echo $module_id;?>"/>
<input name="project" type="hidden" value="<?php echo $project_id;?>"/>
<input name="hidden_ques_id" type="hidden" value="<?php echo $data_array_ques[$j]['ques_id'];?>"/>
<div id="question_block">
<div id="serial_block">
<p id="s_original_<?php echo $j+1; ?>"><a href="#" onclick="showSelectBox(<?php echo $j+1; ?>)">Serial :
<?php
if($data_array_ques[$j]['ques_position']==NULL){
echo $j+1;
}
else {
echo $data_array_ques[$j]['ques_position'];
} ?></a></p>
<p id="s_select_box_<?php echo $j+1; ?>" style="display: none;">Serial :
<select name="serial">
<?php for($p=1;$p<=count($data_array_ques);$p++){ ?>
<option value="<?php echo $p; ?>" <?php if($p==$data_array_ques[$j]['ques_position']){ echo "selected=\"selected\"";} ?> ><?php echo $p; ?></option>
<?php } ?>
</select>
</p>
</div>
<div id="question_text">
<p id="q_original_<?php echo $j+1; ?>"><?php echo $data_array_ques[$j]['ques_text']; ?></p>
<p id="q_text_box_<?php echo $j+1; ?>" style="display:none;"><textarea id="ques_text" name="ques_text" rows="3" cols="30"><?php echo $data_array_ques[$j]['ques_text']; ?></textarea></p>
</div>
</div>
<div id="menu_block">
Save Changes |
Delete This Question
</div>
</form>
you can do it like this with raw javascript
<html>
<body>
<form id="my_form" method="post" action="mailto://test#test.com">
submit
</form>
</body>
</html>
For those asking why I have a href element in my anchor tag, its because it's a compulsory part of an anchor tag, it may well work without but it's not to spec. So if you want to guarantee rendering etc you must give the engine a fully formed tag. So the above achieves this. You will see href="#" used sometimes but this is not always wanted as the browser will change the page position.
If jquery is allowed then you can use following code to implement it in the easiest way as :
Login
or
Login
You can use following line in your head tag () to import jquery into your code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Submit your form like this ...
Your HTML code
<form name="myform" action="handle-data.php"> Search: <input type='text' name='query' />
Search
</form>
JavaScript Code
<script type="text/javascript">
function submitform() { document.myform.submit(); }
</script>
Try this:
Suppose HTML like this :
<form id="myform" name="myform" method="POST" action="process_edit_questionnaire.php?project=<?php echo $project_id; ?>">
<div id="question_block">
testing form
</div>
Submit
</form>
JS :
<script type='text/javascript'>
function submit()
{
document.forms["myform"].submit();
}
</script>
you can check it out here : http://jsfiddle.net/Zm426/7/
<form id="myform_id" action="/myMethode" role="form" method="post" >
<a href="javascript:$('#myform_id').submit();" >submit</a>
</form>
Is there any reason for not using a submit button and then styling it with css to match your other a tags?
I think this would reduce your dependency on having javascript enabled and still get the desired result.
Clean and simple:
<form action="/myaction" method="post" target="_blank">
<!-- other elements -->
Submit
</form>
In case of opening form action url in a new tab (target="_blank"):
<form action="/myaction" method="post" target="_blank">
<!-- other elements -->
Submit
</form>
I suggest to use "return false" instead of useing some javascript in the href-tag:
<form id="">
...
</form>
send form
You can use hidden submit button and click it using java script/jquery like this:
<form id="contactForm" method="post" class="contact-form">
<button type="submit" id="submitBtn" style="display:none;" data-validate="contact-form">Hidden Button</button>
Submit
</form>
Using Jquery you can do something like this:
$(document).ready(function() {
$('#btnSubmit').click(function() {
$('#deleteFrm').submit();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" id="deleteFrm" method="POST">
<a id="btnSubmit">Submit</a>
</form>