I want to create console.
I have textarea:
<textarea style="width: 100%; height: 300px; resize: none;" id="console_output" readonly></textarea>
And using this code to insert more text:
else echo "<script>$('#console_output').append('Some text.\n');</script>";
But nothing happened, textarea is empty.
Your code should work as you can check JsFiddle
$('#console_output').append('Some text.\n');
Will not work if
you are not into your else statement
textarea is not there yet if dynamically created
you have no jquery included
You can try with pure js:
echo '<script>document.getElementById("console_output").value += "Some text.\n";</script>';
Related
I am able to write paragraphs and store it in the MySQL database and it can be outputted on a page with all the appropriate line breaks but how do i make it so my text-area for editing the blog post shows the line breaks instead of showing BR tags and requiring me to write BR tags to create a new paragraph.
Here is my text-area:
<textarea style="width: 100%; padding-left: 10px; outline: none;" type="text" name="para" rows="5"><?php echo $row['Para']; ?></textarea>
Thank you for any help I have been stuck on this for months
Use something like preg_replace
$str = 'bring me to live br from this world br to stackoverflow';
$pattern = '/\bbr\b/i';
echo preg_replace($pattern, '<br>', $str);
Output: bring me to live
from this world
to stackoverflow
so your code should look like this
<textarea style="width: 100%; padding-left: 10px; outline: none;" type="text" name="para" rows="5"><?php echo preg_replace('/\bbr\b/i','<br>',$row['Para']); ?></textarea>
Highly recommend you to read about Pattern Syntax also.
I have a WordPress site with WooCommerce. In a specific product page, there's a custom field to capture additional text from the buyer. The field is a textbox, which needs to be a textarea for paragraph input.
I have edited the CSS and PHP files to change the 'text' attribute to 'textarea'. However the input box does not change to textarea.
.ubp_extra_field {
width: 100%;
overflow: hidden;
margin-bottom: 15px;
}
.ubp_extra_field label {
width: 100%;
display: block;
}
.ubp_extra_field input[type="textarea"] {
width: 94%;
}
do_action('wc_ubp_box_product_after_price',$product->get_id()); if(get_post_meta($product->get_id(),'ubp_enable_box_gift_message',true)=='yes'){ $label=get_post_meta($product->get_id(),'ubp_box_message_field_label',true); $label=!empty($label) ? $label
: esc_html__('Message', 'wc-ubp'); $html='
<div class="ubp_extra_field">'; $html.='
<label for="ubp_box_message_field">'.esc_html($label).'</label>'; $html.='
<span class="ubp_field"><input type="textarea" name="ubp_box_message_field" id="ubp_box_message_field" value=""></span>'; $html.='
</div>'; echo $html; }
I expect the field to be a textarea for paragraph text input. Instead the field remains a single line textbox.
Here's the page where the field is available just above the 'Add to Cart' button:
https://www.sockaboo.com/product/sockaboo-6-pack-gift-pack/
What am I missing here?
Your textarea declaration is wrong it should be like: 'textarea'.
Please refer following modified version your code:
do_action('wc_ubp_box_product_after_price',$product->get_id());
if(get_post_meta($product->get_id(),'ubp_enable_box_gift_message',true)=='yes'){
$label=get_post_meta($product->get_id(),'ubp_box_message_field_label',true);
$label=!empty($label) ? $label : esc_html__('Message', 'wc-ubp');
$html='<div class="ubp_extra_field">';
$html.='<label for="ubp_box_message_field">'.esc_html($label).'</label>';
$html.='<span class="ubp_field"><textarea rows="4" cols="50" name="ubp_box_message_field" id="ubp_box_message_field">This is a textarea.</textarea></span>';
$html.='</div>';
echo $html;
}
You can use :
<textarea rows="4" cols="50">
Here you can write some text to display in the textarea as the default text
</textarea>
Read more : https://www.w3schools.com/tags/tag_textarea.asp
I'm currently developing a simple web page that enables the user to: upload an image and a corresponding caption to a DB, let the user view the images and delete them.
I have already accomplished the first two with the following code:
<?php
#include_once("connection.php");
$db = new mysqli("192.168.2.2", "root", "", "proyectoti");
if ($db->connect_errno) {
echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}
echo "Información de servidor: ";
echo $db->host_info . "\n";
// Initialize message variable
$msg = "";
// If upload button is clicked ...
if (isset($_POST['upload'])) {
// Get image name
$image = addslashes(file_get_contents($_FILES['image']['tmp_name'])); #$_FILES['image']['name'];
// Get text
$image_text = mysqli_real_escape_string($db, $_POST['image_text']);
$sql = "INSERT INTO images (image, image_text) VALUES ('{$image}', '{$image_text}')";
// execute query
mysqli_query($db, $sql);
}
$result = mysqli_query($db, "SELECT * FROM images");
?>
<!DOCTYPE html>
<html>
<head>
<title>Proyecto TI | Sube imágenes</title>
<style type="text/css">
#content{
width: 50%;
margin: 20px auto;
border: 1px solid #cbcbcb;
}
form{
width: 50%;
margin: 20px auto;
}
form div{
margin-top: 5px;
}
#img_div{
width: 80%;
padding: 5px;
margin: 15px auto;
border: 1px solid #cbcbcb;
}
#img_div:after{
content: "";
display: block;
clear: both;
}
img{
float: left;
margin: 5px;
width: 300px;
height: 140px;
}
</style>
</head>
<body>
<h1>Proyecto TI | <a> Interfaz </a></h1>
<div id="content">
<?php
while ($row = mysqli_fetch_array($result)) {
echo "<div id='img_div'>";
#echo "<img src='images/".$row['image']."' >";
echo '<img src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/>';
echo "<p>".$row['image_text']."</p>";
echo "</div>";
}
?>
<form method="POST" action="index.php" enctype="multipart/form-data">
<input type="hidden" name="size" value="1000000">
<div>
<input type="file" name="image">
</div>
<div>
<textarea
id="text"
cols="40"
rows="4"
name="image_text"
placeholder="Di algo de esta imagen ^^"></textarea>
</div>
<div>
<button type="submit" name="upload">Publicar</button>
</div>
</form>
</div>
</body>
</html>
It looks like this:
Now, the only part I'm missing is being able to delete an image (basically I only echo each image), how would you suggest for me to accomplish this, to make each item clickable and let's say, pop up a dialog or button to perform an action (delete from DB).
I really don't know much about PHP or CSS/HTML, any help would be much appreciated, Thank you!
Within this loop:
<?php
while ($row = mysqli_fetch_array($result)) {
echo "<div id='img_div'>";
#echo "<img src='images/".$row['image']."' >";
echo '<img src="data:image/jpeg;base64,'.base64_encode( $row['image'] ).'"/>';
echo "<p>".$row['image_text']."</p>";
echo "</div>";
}
?>
Personally I would add an element to click on - like an 'x' or whatever - with a unique data attribute:
https://www.abeautifulsite.net/working-with-html5-data-attributes
You have to add the unique id of the image obviously, so you can let SQL know which row to delete... Like this:
echo "<div class='delete-image' data-id='" . $row['id'] . "'>x</div>';
Then I would link this class to an AJAX call to make an asynchronous request to the server and delete the image without reloading the page. It's not very hard.
An easier solution would be to create a new form in the loop, so you create multiple forms per image, add a hidden field with the image id in the form and make a submit button with the valeu 'delete' or simply 'x'.
The same way you created the check:
if (isset($_POST['upload'])) { ... }
You can create something like this:
if (isset($_POST['delete-image'])) { ... }
You will be carrying the image id value like a normal form input. And you can do whatever you want with it.
I would HIGHLY suggest you to look into how to work with jquery and ajax calls though.
Opening a dialogue and ask the user before he deletes an item will require that you either go another page for deletion or use javascript for this.
In both cases, you should somehow set an identifier for your image in your html-code.
I would suggest you give every image an id
'<img ... id="'.$yourImageId.'">'
or a data-attribute
'<img ... data-identifier="'.$yourImageId.'" >'
with that identifier.
First variant:
...
echo '<a href="/path/to/delete/view/page.php?image=yourImageId">'
echo '<img ... id="'.$yourImageId.'"/>'
echo '</a>'
...
and on this delete-view-page, you just have a form that triggers your delete-code
<form action="/path/to/delete/view/page.php" method="POST">
<input type="hidden" name="id" value="<?php echo $yourImageId ?>">
</form>
<!-- after this, react with $_POST['id'] --> to the id sent to the server side and delete the image in your database -->
The other way is not server side rendered.
You should give your Elements some class like "my-clickable-image".After that, you have a script on your page, that looks something like the following
<script>
/* get your images with querySelectorAll, the . stands for class and after that your name */
var clickables = document.querySelectorAll(".my-clickable-image");
clickables.foreach(function(image){
// say that for each image, when clicked the generated function is called image.addEventListener('click',generateShowDialogueFunc(image.getAttr("id")));
});
// generate a function(!) that reacts to an image being clicked
function generateShowDialogueFunc(imageIdentifier){
// return a function that adds a Pop Up to the page
// the Pop Up has approximately the code of the first options second page
// except that now, it must create and remove elements in javascript
return function createPopUp(){
removePopUp();
var popup = document.createElement("div");
popup.setAttribute("id","deletePopUp");
var deleteForm = document.createElement("form");
deleteForm.setAttr("action","/path/to/file/that/deletes/given/query.php?id="+imageIdentifier);
var deleteContents = '<p> Do you want to delete this image? </p>'
+ '<button type="submit"> yes </button>'
+ '<button onclick="removePopUp()"> no </button>'
deleteForm.innerHTML = deleteContents;
document.body.appendChild()
}
}
// remove the Pop Up that can be used to delete an image from the page
function removePopUp(){
var existingPopUp = document.getElementById("deletePopUp");
if(existingPopUp) document.body.removeChild(existingPopUp);
}
</script>
<!-- just add some styling to make the popup show on top of the page -->
<style>
#deletePopUp{
width: 50vw;
height: 50vh;
position: absolute;
z-index: 1;
padding: 1em;
}
</style>
In this case, you just call the server to delete the image, not to show the delete form.
I would suggest the second one but stack overflow is not made for opinion based answers.
Regarding simple security:
It looks like your users could give titles or texts to images.
try what happens if a user gives a title like <bold>some title</title>
and guess what would happen if the title is <script>window.location.href="google.com"</script>
(XSS * hint hint *)
Regarding code structure:
If you want to do something like web development more often, think about separating your database accessing code, and your logic code from your php page template code, this is called 3 tier architecture and standard for bigger projects but i guess this is really just a first, short prototype or test.
Beginner to PHP, so I am pretty sure this is a stupid question...but, was hoping someone can help me out.
I have a html/php form, which basically dynamically pulls in values from a DB for a dropdown.
//HTML/PHP (original page)
<div style="position: relative; float: left; width:236px; margin-right: 20px;">
<div id="variablebox" style="position: relative; float: left; width:215px; border: solid #0096D6; border-width: 1px; padding: 10px;">
<H2>Step 2: Select Variable Type</H2>
<form id="var" enctype="multipart/form-data">
<span style="float: left; margin-top:8px;">
<label class="fieldlabel"><span>Variable Type:</span></label></br>
<select id="variabletype" name="variabletype" class="selectfieldshadow">
<option value="">Select</option>
<?php
$list=mysqli_query($con, 'SELECT * FROM valuelist');
while($row_list=mysqli_fetch_array($list)){
?>
<option value="<?php echo $row_list['valuelistid']; ?>">
<?php echo $row_list['valuename']; ?>
</option>
<?php
}
?>
</select>
</span>
When this form is submitted, it basically submits to PHP file via AJAX and then return the same form to the screen within the same DIV.
//PHP Page
echo "<H2>Step 2: Select Variable Type</H2>";
echo "<form id='var' enctype='multipart/form-data'>";
echo "<span style='float: left; margin-top:8px;'>";
echo "<label class='fieldlabel'><span>Variable Type:</span></label></br>";
echo "<select id='variabletype' name='variabletype' class='selectfieldshadow'>";
echo "<option value=''>Select</option>";
echo "<?php";
echo "$list=mysqli_query($con, 'SELECT * FROM valuelist');";
echo "while($row_list=mysqli_fetch_array($list)){";
echo "?>";
echo "<option value="<?php echo $row_list['valuelistid']; ?>">";
echo "<?php echo $row_list['valuename']; ?>";
echo "</select>";
echo "</span>";
echo "<span style='position: relative; float: left; display: inline-block; margin-top: 7px; font: 12px Lucida Grande,Helvetica,Arial,Verdana,sans-serif; padding-right: 60px;'>";
echo "<p>Add Value Control Screenshot:</p>";
echo "<input id='controlimage' type='file' name='controlimage'>";
echo "</span>";
I keep getting errors with my output...T_Variable this and Exception that...my question is, am I going about doing this correctly? I mean, looking at my PHP file that will return content back to the original page, do I have to echo php tags so they work on the original page when returned? ie. echo "<?php" etc..
Any assistance would be much appreciated!
echo is used to output content. As it's currently written, you're just trying to display the PHP code. To execute it, you'll have to restructure your code as follows:
<!-- some HTML code -->
<?php
// display stuff
?>
<!-- continue with HTML -->
Well first of all, PHP is all rendered server-side. So that means returning PHP in an AJAX response doesn't make sense. It won't render on the client side.
Second of all, those echos look crazy too. There are several different ways to output large text like that. Personally, I like to just close the PHP tag and write it. So your second file could look like this instead:
// end all PHP for now
?>
<H2>Step 2: Select Variable Type</H2>
<form id='var' enctype='multipart/form-data'>
<span style='float: left; margin-top:8px;'>
...
<input id='controlimage' type='file' name='controlimage'>
</span>
<?php
// continue writing PHP here
Send PHP is a nonsens cause PHP is a Server side language (run on server and not on the client, the browser).
Why don't you run your PHP code in this script and return the result. (Just display it)
But, please, make us proud of our favorite language and its beginners:
Use mysqli_fetch_assoc() instead of mysqli_fetch_array()
Use only one echo to do a multiline display, PHP natively supports it.
Indent your code, you will really like how it's more readable.
Use jQuery, its AJAX methods and autocomplete widget. Somebody did the job for you. ;-)
In this below code i have text box and submit button .when i enter or refresh that page the div tag displays but my expected result is when i enter a value in textbox and click submit button then div tag should appear.The problem is div tag displays always. Please any one help me.
<form action="<?php echo site_url('search1_site/search_keyword');?>" method = "post">
<input type="text" name = "keyword" />
<input type="submit" id="opn" value = "Search" />
</form>
<div id='hideme'>
<strong>Warning:</strong>These are new products<a href='#' class='close_notification' title='Click to Close'>
<img src="images/close_icon.gif" width="6" height="6" alt="Close" onClick="hide('hideme')"/>
</a>
<div style="background:#669900; width: 500px; height: 500px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px" id="modal" >
<table>
<tr>
<th>course_code</th>
<th>course name</th>
</tr>
<?php foreach($results as $row):?>
<tr>
<center>
<td>
<?php echo $row->course_code?>
</td>
</center>
<center>
<td>
<?php echo $row->course_name?>
</td>
</center>
</tr>
<?php endforeach;?>
</table></div></div>
</div>
<script>
$('a.modal').bind('click', function(event) {
event.preventDefault();
$('#modal').fadeIn(10);
});
function hide(obj) {
var el = document.getElementById(obj);
el.style.display = 'none';
}
</script>
First I'd like to say that mixing JQuery with traditional javascript is not very efficient.. Instead of using getElementById you can use $('#' + obj).val()...
In your problem I guess the most efficient solution would be to use JQuery's .hide() and .show() methods to hide and unhide divs....
You can try this :
function hide(obj) {
var el = $('#' + obj).val();
e1.hide();
}
Also if you want any div to be hidden as soon as the page is loaded, you can use the hide method in $(document).ready(){}... To show it anytime you can use e1.show() method...
First you need to hide your div through css usign display:none;. You haven't set this that is why your div is showing on page load.
Your div should looks like
<div style="background:#669900; width: 500px; height: 500px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px;display:none;" id="modal" >
Call a function on form submit. Your <form> tag should looks like
<form onSubmit="return showDiv();" action="<?php echo site_url('search1_site/search_keyword');?>" method = "post">
And your javascript function will looks like
function showDiv() {
$('#modal').fadeIn(10);
return false; //not to refresh page
}
First add display:none; to the div whom you want to be hidden,
add attribute
onsubmit="return validate()"
function validate()
{
//validate the form as you want
document.getElementById('modal').style.display="block";
return false ; // if you dont want to submit the form
}
all you need is an css style <style>#hideme{display:none}</style>