developing a light weight CMS system where users are able to change text and add an image. Was hoping to use form.textarea, unfortunately textarea doesn't allow HTML tags, at least not image tag. So I've changed the form input to div from textarea. My question is how can I easily pass the div contents to a PHP script as a POST variable, similar to how the textarea would work.
Here are some code snippets:
In the HTML head, using this JQuery to append the image code when to the div content when an image icon (imgBtn) is clicked.
<script language="javascript" type="text/javascript">
$("#imgBtn").live("click",function(){
var path = "path/to/file.jpg";
var imgcode = '<img src="' + path + '" alt="User Image">';
$('.textarea').append(imgcode);
});
</script>
Then later in the HTML body, using this PHP to generate the initial DIV or write the new data to a text file via the filewrite() class.
<?php
if ($submit==true){ //$_POST['submit']
$string = $text; //$_POST['text'] this is where I need the POST text
$flag=HTML;
$scrubstring = sanitize($string,$flag,2,1200); //cleans input
$scrubstring = trim($scrubstring);
if ($scrubstring){
//scrubber returns true, write text to the file.
$filewrite = new filewrite();
//path (from root dir),string to write
$filewrite->writer("aboutus/".$file,$scrubstring);
}
echo '<div contenteditable="true" class="textarea">';
echo $scrubstring.'</div>';
}else{
$fread = new filewrite(); //instantiate the class
$output=explode(",",$fread->readlastline($file));
echo '<div contenteditable="true" class="textarea">';
echo $output[1].'</div>';
}
?>
So in short, I need the div "textarea" to behave like a textarea.
As always, thank you in advance
<script type="text/javascript">
$(function() {
$('#form').submit(function(){
$('#txa').val($('#content').html());
});
});
</script>
<?php
echo $_POST['txa'];
?>
<div id="content">
<h1>abcde</h1>
</div>
<form method="post" action="?" id="form">
<input type="hidden" name="txa" id="txa" value="123" />
<input type="submit" />
</form>
Related
http://alpha.ripfy.com/
As seen in the following demo, I have a YouTube video that I want to be able to play while adding items to the array in PHP. Sadly, this isn't possible from what I've tried because the page refreshes every time I add an item to the array.
Would there be any way of achieving this without the page refreshing (forcing the video to restart?)
Code:
<?php
if (isset($_POST['playlist'])) {
$playlist = $_POST['playlist'];
} else { // Else set my default list
$playlist = array("Be more.mp3", "Drift Away.mp3", "Panda Sneeze.mp3");
}
if (isset($_POST['name1'])) {
$playlist[] = $_POST['name1'];
}
?>
<form method="post">
<?php
foreach($playlist as $song) {
?>
<input type="hidden" name="playlist[]" value="<?php echo $song?>">
<?php
}
?>
<input type="text" name="name1"/>
<input type="submit" name="submit1"/>
</form>
<iframe width="560" height="315" src="https://www.youtube.com/embed/pzB6CxChIQk" frameborder="0" allowfullscreen></iframe>
<?php
foreach ($playlist as $value) {
echo $value."<br>";
}
?>
Thanks for helping me out!
if you need that these information be storaged in database or anything on server sider don't use the convencional form post, use AJAX with JQuery.
First create a div(container)to render the list content where you need the information apears:
<div id="list_musics"></div>
Then create a page(i.e. page.ajax.php) that will treat your request. If you need you can put the information in a database or anything you want by this page. This page must return the content you want to render.
HTML:
<input type="button" id="ajaxcaller">
JQUERY:
$('#ajaxcaller').on('click', function(){
//AJAX CALL WITH POST METHOD
var text = $('input[name=name1]').val();
$.post(page.ajax.php,text,function(data){
//Render your content in the container created on HTML
$("#list_musics").html(data);
});
});
If you just need to show what you wrote on text input instead of storage or treat the information, you may just use JQUERY to render the information in the container you created.
$('#ajaxcaller').on('click', function(){
//AJAX CALL WITH POST METHOD
var text = $('input[name=name1]').val();
// PUT THE TEXT RIGHT AFTER THE CONTENT THAT ALREADY EXISTS IN THE CONTAINER
$("#list_musics").append(text);
});
Take a look here to see the sencond option:
https://jsfiddle.net/wqLf65ox/
Here's my answer. That fully works. In this script, the server checks the presence of a name1 request (post or get). If exists, it returns the string posted (only) and if doesn't, it returns what already was there. And the post() method posts (gets) the data and appends to the container using innerHTML+= data + "<br>";
evaluate the code, it should be self explanatory.
<?php
if (isset($_REQUEST['playlist'])) {
$playlist = $_REQUEST['playlist'];
} else { // Else set my default list
$playlist = array("Be more.mp3", "Drift Away.mp3", "Panda Sneeze.mp3");
}
if (isset($_REQUEST['name1'])) {
// if exists, return plain text responce. NOT HTML
$playlist[] = $_REQUEST['name1'];
echo $_REQUEST['name1'];
}
else{
?>
<html>
<head>
<title>Demo</title>
<script src="jquery.js"></script>
</head>
<body>
<script>
text= ""
function onUpdate(){
text = document.getElementById("name1").value;
}
function handler(data){
document.getElementById('container').innerHTML += data+"<br>";
}
function post(){
onUpdate();
$.get("index.php", name1="+text, handler);
}
</script>
<input type="text" name="name1" id="name1"/>
<input type="submit" name="submit1" onclick="post()"/>
<iframe width="560" height="315" src="https://www.youtube.com/embed/pzB6CxChIQk" frameborder="0" allowfullscreen></iframe>
<br>
<div id="container">
<?php
foreach ($playlist as $value) {
echo $value."<br>";
}
?>
</div>
</body>
<?php };?>
Although, it works as intended, i don't see the point of using it. just plain js should work
You have to send your form using Ajax, eg. via jQuery.post() method.
After that you have to reload your container with list or add new item there with JavaScript.
Try using the $.post and $.get JQuery methods. One method might be to $.post back to a .php page that renders a container of html, then use $.get to retrieve just that html container and insert into the DOM.
I believed it is possible for me to simplify me previous project Click here!
to build an upload previewer so the editor can use it to see what he puts before upload to the server. (just a simple previewer without loading or saving to the databse with php script).
I use the same short Ajax and html form scripts and revise the jquery selector a little bit.
Now it is fine for me to see the text input. Everytime I insert new word the text area will show exactly what I do. However, something seemes to go astray with the image part. I try to use image selector (attr"src") to get the path and hope it could get the photo and show in the tag I build. However I could only get the values as path root such as (C:/images/img1.png) insead the whole picture. The following are scripts with mentioned issues:
<script language="JavaScript">
$(document).ready(function() {
$("form").keyup( function() {
var qtyVal = $('.qty').val();
var contentVal = $('.content').val();
var imageVal = $('input:file').val();
// get
$.ajax({
type: 'POST',
url: 'result1.php',
data: { qty : qtyVal,
content : contentVal,
image : imageVal,
},
success: function(data) {
// get XML value
$('#result').html($(data).find('total').text());
$('#result1').html($(data).find('content').text());
//I bleieved something goes wrong with the following script!
$('#test').attr("src").html($(data).find('upload').text());
}
});
return false;
});
});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#news").hide();
$("#flip").click(function(){
$("#news").slideToggle("slow");
});
});
</script>
</head>
<body>
<div id="flip">previewer</div>
<div id="news" class="news">
<form method="post" enctype="multipart/form-data">
<table cellspacing="4" cellpadding="2">
<tr><th>title</th><th>content</th></tr>
<tr>
<td>
<div id="result2" class="box" style="width:300px; height:350px;">
//image block where I want to show the image by creating an imge tag>
<img src="#" class="test" /></div></td>
<td><div id="result" class="box" style="height:100px;"></div>
<div id="result1" class="box" style="height:250px; overflow:hidden;"></div>
</td></tr>
</div>
<td bgcolor="#CCCCCC"><input type="text" class="qty" name="qty" ></td>
<td bgcolor="#CCCCCC"><textarea type="text" class="content" name="content" ></textarea></td>
<td><input type="file" class="image" name="image"/></td>
<td bgcolor="#CCCCCC"><input type="submit" name="btnUpdate" value="update" />
<input type="submit" name="btnDelete" value="delete" />
</td>
</tr><br />
<tr><td colspan="5" align="center">div></td></tr>
</form>
</table>
I also include my short php script as the XML file for above Ajax:
<?php
// XML
header("Content-Type:text/html; charset=utf-8");
// GET the text and image values
$qty = (isset($_POST["qty"]) ) ? $_POST["qty"] : $_GET["qty"];
$content = (isset($_POST["content"]) ) ? $_POST["content"] : $_GET["content"];
$image = (isset($_POST["image"]) ) ? $_POST["image"] : $_GET["image"];
echo "<?xml version=\"1.0\" ?>";
echo "<caculation>";
echo "<total>" . "$qty" . "</total>";
// right now I can get the path back to the html page.
echo "<upload>"."$image"."</upload>";
echo "<content>"."$content"."</content>";
echo "</caculation>";
?>
I understand experts on SO had built powerful and professional Ajax previewer with multiple function. However, as an beginner and learner I am quite satisfied with my rookie and backward script. Hope someone can help with the bugs. Any possible advice or suggestion is welcome!
If you are using attr('src') then it will return the path only. If you want the whole image then set the response as image in the server for the get request or use an base64 string image and use data uri scheme to show the image
i have set the form action to a text retrieved from the database which has an id.my problem is when the form action executed it always shows the first id even if i clicked on the text holding id=2.I have checked the page source and it's showing the correct id for all the text.
here is my view code
<?php foreach ($content as $cont):?>
<form id="offer" method="post" action="<?php echo base_url() . 'index.php/pages/detail'?>">
<input type='hidden' name='cont_id'id='cont_id' value='<?php echo $cont->id?>'>
<a onclick="document.getElementById('offer').submit();"><?php echo $cont->title?></a>
</br>
</form>
<?php endforeach;?>
</div>
<script>
function submitForm() {
document.getElementById("offer").submit();}
</script>
here is my controller :
echo $this->input->post('cont_id');
You can use .submit()
Submit
If you have JAVASCRIPT knowledge you can use the
document.getElementById("myForm").submit();
method to submit the form..
create a Javascript Function
<script>
function submitForm()
{
document.getElementById("myForm").submit();
}
</script>
use this code for the text you want to hyperlink the button to
<h1 onclick="submitForm()">Click on this text</h1>
Im trying to modify the following code so it can save for multiple edited text while at the moment this code only saving one (first) edited text ... could anybody please modify this code for me say for example: you modify it to save 3 or 4 edited text, and based on that I can add any number of text field I need.
and onother thing to menstion when if you write in text fild, saved it and then refresh the page your written contents will still there same as if you try with the following code with one text field, I want this featear also applied when adding multiple text fields.
<html>
<head>
<title>Allowing Users to Edit Multiple Text field and save the contents</title>
<script type="text/javascript">
function saveEdits() {
//get the editable element
var editElem = document.getElementById("edit");
//get the edited element content
var userVersion = editElem.innerHTML;
//save the content to local storage
localStorage.userEdits = userVersion;
//write a confirmation to the user
document.getElementById("update").innerHTML="Edits saved!";
}
function checkEdits() {
//find out if the user has previously saved edits
if(localStorage.userEdits!=null)
document.getElementById("edit").innerHTML=localStorage.userEdits;
}
</script>
</head>
<body onload="checkEdits()">
<div id="edit" contenteditable="true">
Here is the element's original content
</div>
<input type="button" value="save my edits" onclick="saveEdits()"/>
<div id="update"> Edit the text and click to save for next time</div>
</body>
</html>
Thanks in Advance.
this is what i've tried.
<html>
<head>
<title>Allowing Users to Edit Multiple Text field and save the contents</title>
<script type="text/javascript">
function saveEdits() {
//get the editable element
var editElem = document.getElementById("edit");
//get the edited element content
var userVersion = editElem.innerHTML;
//save the content to local storage
localStorage.userEdits = userVersion;
// for new text field
localStorage.userEdit1 = userVersion;
//write a confirmation to the user
document.getElementById("update").innerHTML="Edits saved!";
}
function checkEdits() {
//find out if the user has previously saved edits
if(localStorage.userEdits!=null)
document.getElementById("edit").innerHTML=localStorage.userEdits;
}
</script>
</head>
<body onload="checkEdits()">
<div id="edit" contenteditable="true">
Here is the element's original content
</div>
<!--New text field -->
<div id="edit" contenteditable="true">
This is another text field.
</div>
<input type="button" value="save my edits" onclick="saveEdits()"/>
<div id="update"> Edit the text and click to save for next time</div>
</body>
</html>
Dirty copy paste job. At least it demonstrates how to add more editable divs.
To make it dynamic, you may cnosider to construct the function a bit differently, or start adding jQuery in it to make the element selection easier..
<html>
<head>
<title>Allowing Users to Edit Multiple Text field and save the contents</title>
<script type="text/javascript">
function saveEdits() {
//get the editable element
var editElem1 = document.getElementById("edit1");
var editElem2 = document.getElementById("edit2");
var editElem3 = document.getElementById("edit3");
var editElem4 = document.getElementById("edit4");
//get the edited element content
var userVersion1 = editElem1.innerHTML;
var userVersion2 = editElem2.innerHTML;
var userVersion3 = editElem3.innerHTML;
var userVersion4 = editElem4.innerHTML;
//save the content to local storage
localStorage.userEdits1 = userVersion1;
localStorage.userEdits2 = userVersion2;
localStorage.userEdits3 = userVersion3;
localStorage.userEdits4 = userVersion4;
//write a confirmation to the user
document.getElementById("update").innerHTML="Edits saved!";
}
function checkEdits() {
//find out if the user has previously saved edits
if(localStorage.userEdits1!=null)
document.getElementById("edit1").innerHTML=localStorage.userEdits1;
if(localStorage.userEdits2!=null)
document.getElementById("edit2").innerHTML=localStorage.userEdits2;
if(localStorage.userEdits3!=null)
document.getElementById("edit3").innerHTML=localStorage.userEdits3;
if(localStorage.userEdits4!=null)
document.getElementById("edit4").innerHTML=localStorage.userEdits4;
}
</script>
</head>
<body onload="checkEdits()">
<div id="edit1" contenteditable="true">
Here is the element's original content
</div>
<div id="edit2" contenteditable="true">
Here is the element's original content
</div>
<div id="edit3" contenteditable="true">
Here is the element's original content
</div>
<div id="edit4" contenteditable="true">
Here is the element's original content
</div>
<input type="button" value="save my edits" onclick="saveEdits()"/>
<div id="update"> Edit the text and click to save for next time</div>
</body>
</html>
Amateur novice here, so many thanks in advance for any help. I'm going crazy here.
I'm trying to develop a jquery script to search mysql via php for images stored in my database. User would type a word in an input field. Each character entered in that word returns a separate piece of artwork (e.g, type f-l-o-w-e-r and get six corresponding images). With some help, I got the php script working ok with a regular html form. But now that I've tried adding the jquery part, everything connects OK and seems to run the wayI want, but instead of images, I only get empty boxes with the 'broken image' icon.
I'm attaching the basic scripting of the find.php page below. After that, is the index.php page with the jquery. Any thoughts deeply appreciated...
$lettertype = str_split($lettertype);
$lettertype = "'" . implode("','", $lettertype) . "'";
$query = "SELECT * FROM Photos WHERE letter IN ($lettertype)";
$result = mysqli_query($cxn, $query)
or die ("No good");
$alpharray = array();
while($row = mysqli_fetch_assoc($result))
{
$alpharray[$row['search_term']][] = $row; //
}
foreach(str_split($_POST['search_term']) as $alpha)
{
echo "<a href='link.com'>
<img src='../delete/images/{$alpharray[$alpha][0]['imagePath']}' width='100' height='140'/></a>";
}
And then the index.php...
<script type='text/javascript'>
$(document).ready(function(){
$("#search_results").slideUp();
$("#search_button").click(function(e){
e.preventDefault();
ajax_search();
});
$("#search_term").keyup(function(e){
e.preventDefault();
ajax_search();
});
});
function ajax_search(){
$("#search_results").show();
var search_val=$("#search_term").val();
$.post("./find.php", {search_term : search_val}, function(data){
if (data.length>0){
$("#search_results").html(data);
}
})
}
</script>
<title>Welcome!</title>
</head>
<body>
<h1>Search here</h1>
<form id="searchform" method="post">
<div>
<label for="search_term">Search</label>
<input type="text" name="search_term" id="search_term" />
<input type="submit" value="search" id="search_button" />
</div>
</form>
<div id="search_results"></div>
</body>
</html>
The src attribute of <img> is always relative to the URL of the actual page the webbrowser sees.
Example:
www.example.com/test/index.php contains an <img> with src=../image.jpg means the webbrowser tries to load www.example.com/image.jpg
So if your index.php lies in / (e.g. www.example.com/index.php), it is likely that referring to an image in ../delete won't work as the server doesn't allow accessing thing outside its webroot.
In any case however, if you want to access the parent directory, you need to put in a ../ (not only ..)
For your script this would mean:
foreach(str_split($_POST['search_term']) as $alpha)
{
echo "<a href='link.com'>
<img src='../delete/images/{$alpharray[$alpha][0]['imagePath']}' width='100' height='140'/></a>";
}