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>
Related
I have the problem, that I can't access the value my textareas which are created in a while loop of php. I guess that they are not registered in the DOM. Same is for the button that is attached to it.
So I do know, that I have to access the button via jquery with the special event listener because of this dynamically creation. I get all the IDs that I need, but I am not able to get the value of the textarea, even that I can get its correct ID, as it somehow seems to be just empty.
As I can't post a php fiddle in here, here is an example of how it works.
include"connection.php";
$stuff="here is the query";
for ($n = 1; $n <= 13; $n++) {
$xy=$con->query($stuff);
while($row=mysqli_fetch_assoc($xy))
{
$value = $row['value'];
echo"<div id='$n' class='antworten'>$value<br>
<div id='notizcontainer$n' class='antwortcontainer'>Notizen:</div>
<div class='antwortcontainer' id='notizerstellen$n'>Notiz erstellen:<br>
<textarea id='notizfeld' class='textarea'></textarea><br>
<button id='absenden' class='notizabsenden'>Notiz absenden</button></div>
</div>";
}
}
jQuery:
$(document).on('click', '.notizabsenden', function(){ //do this bc its not registered and .click() is not working, also I need the click event on the button class to know on which button the event is going on
var parentid = $(this).parent().attr('id'); //get parentid of button
var notizid = $('#'+parentid).find('textarea').attr('id'); //find id of textarea of parent
var notiz = $('#'+notizid).val(); //this should give me the text of the textarea... but it returns empty/blank
console.log(notizcontainer); //this turns out correct
console.log(parentid); //this turns out correct
console.log(notiz); //this returns empty/blank as if the textarea has nothing in it... which it does
The issue is because the HTML in your PHP loop is re-using the same id for multiple elements when they have to be unique. To fix that problem, remove the id attributes from all repeated content.
To address the issue of accessing the textarea content, you need to use DOM traversal to find the textarea related to the button which was clicked. To do that you can use a combination of closest() and find(), like this:
$(document).on('click', '.notizabsenden', function(e) {
const $btn = $(e.currentTarget);
const notiz = $btn.closest('.notizerstellen').find('.notizfeld').val();
console.log(notiz);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- generated by your PHP loop... -->
<div class="antworten">$value<br>
<div class="antwortcontainer">Notizen:</div>
<div class="notizerstellen">
Notiz erstellen:<br />
<textarea class="notizfeld textarea">Lorem ipsum</textarea><br />
<button class="notizabsenden">Notiz absenden</button>
</div>
</div>
<div class="antworten">$value<br>
<div class="antwortcontainer">Notizen:</div>
<div class="notizerstellen">
Notiz erstellen:<br />
<textarea class="notizfeld textarea">Dolor sit</textarea><br />
<button class="notizabsenden">Notiz absenden</button>
</div>
</div>
<div class="antworten">$value<br>
<div class="antwortcontainer">Notizen:</div>
<div class="notizerstellen">
Notiz erstellen:<br />
<textarea class="notizfeld textarea">Amet consectetur</textarea><br />
<button class="notizabsenden">Notiz absenden</button>
</div>
</div>
I want to make a booking page for my website. There are divs which the user can click on that will open up a form that asks for their information required to book a date for the lesson, and a time slot. The problem is i do not know how to pass the time that was selected when the user clicks on the booking card( tag inside of a div)
Here is the Code:
HTML:
<div class="book_card" id="Tues1" style="visibility: <?=$TuesV1?>">
<a class="booklnk" href="#" id='<?=$Tues1?>'>
<p1><?=$Tues1?></p1>
<p2><?=$TuesA1?></p2>
</a>
</div>
<div class="book_card" id="Tues2" style="visibility:<?=$TuesV2?>">
<a class="booklnk" href="#" id='<?=$Tues2?>'>
<p1><?=$Tues2?></p1>
<p2><?=$TuesA2?></p2>
</a>
</div>
PHP:
$ARR_BOOK = [];
$ARR_DAYS = ['Tues', 'Fri', 'Sat'];
while($row = mysqli_fetch_array($result)){
$ARR_BOOK[] = $row;
}
foreach ($ARR_DAYS as $DAY) {
${'count'.$DAY} = 0;
${$DAY.'V1'} = "visible";
${$DAY.'A1'} = "Join The Waiting List!";
${$DAY.'1'} = "No Spaces Available";
}
foreach ($ARR_BOOK as $DATA) {
if(in_array($DATA[0], $ARR_DAYS)){
${'count'.$DATA[0]} += 1;
${$DATA[0].${'count'.$DATA[0]}} = $DATA[1];
${$DATA[0].'V'.${'count'.$DATA[0]}} = "visible";
${$DATA[0].'A'.${'count'.$DATA[0]}} = "Available";
}
}
Here as an example, using some simple jQuery and clever construction of the link to populate the data in a form:
$('.booklnk').click(function(e){
//prevent default link click
e.preventDefault();
//get the data from the link that was clicked
var time = $(this).data('time');
//modify the form so when the user submits it the field is sent
//tip, you can change the input from type="text" to type="hidden"
//so the user cannot see it, but for example purpose it's easier to show it.
$('#my_fld').val(time);
return false; //helps prevent double click link access
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="test_form">
<input type="text" name="my_fld" id="my_fld" value="" />
</form>
<div class="book_card" id="Tues1" >
<a class="booklnk" href="#" data-time="2018-08-08 21:9:27" >Click Me</a>
<!-- make you life easier by putting the data in the data attribute of the link -->
<!-- as with any HTML this can be set serverside when building the page such as <a class="booklnk" href="#" data-time=<?php echo $timeslot; ?>" .. -->
</div>
Note - this isn't a full answer as I am still confused about
There are divs which the user can click on that will open up a form
I don't see any forms
the user clicks on the booking card( tag inside of a div)
Which tag In which div
the problem is i do not know how to pass the time
Where is the times (specifically)
I have two file code_generator.html. which takes input as a image url and landing url when i click on submit button it calls code_created.php
<html>
<head>
</head>
<body>
<form action ="code_created.php" method ="post">
Image : <input type ="text" name ="image">
Landing Url : <input type ="text" name="landingurl">
<input type= "submit">
</form>
</body>
</html>
I want to show generated code as below on web page
<div id='banner-img' style='display:none;text-align:center' onclick='landing()'><img style='text-align:center' id='bannerImage'/>
<img id='t'/>
<img id='trackeridImg' style='display:none;width:0px;height:0px'/>
</div>
<script type="text/javascript">
function showAd() {
document.getElementById('banner-img').style.display = 'block';
document.getElementById('bannerImage').setAttribute('src',IMAGE URL SUBMITTED FROM HTML FILE);
</script>
problem is that webpage is not showing that code generated code ,webpage is rendering that code , I want to only show that generated code.
1-how to do it using html and php
2-is my approach is right
You can use tag to show HTML entities You need to encode all
Your HTML entities like < => < like way.
Also you can show a text area in which all those HTML code need to echo, it will not execute your code simply it will print it.
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>
I am using ckeditor in order to edit the text seen in the screen. The information is taken from database and written to the screen in a div element and it is possible to edit the information by double clicking. However, after edited i couldn't get the edited information. Here is my code, i tried to add a form which includes the div element, but it did not work.
<form method="post">
<p>
Double-click any of the following <code><div></code> elements to transform them into
editor instances.</p>
<?php
$makeleSql = 'SELECT * FROM makale';
$makaleRs = $con->func_query($makeleSql);
while ($makaleRow = mysql_fetch_array($makaleRs)) {
?>
<div class = "editable" id = <?php echo "content".$makaleRow['id'];?> style="display:none">
<?php
$contentSql = 'SELECT * FROM content WHERE makale_id ='.$makaleRow['id'];
$contentRs = $con->func_query($contentSql);
while ($contentRow = mysql_fetch_array($contentRs)) {
echo $contentRow['icerik'].$makaleRow['id'];
}
?>
</div>
<?php }
?>
<button type="submit" value="Submit" onclick="getDiv();"/>
</form>
What should i do in order to take the information in the div element? Moreover, i am using this example.
http://nightly.ckeditor.com/7484/_samples/divreplace.html
Thanks.
For save form's data you need store information in input/select/textarea. Div and other not form's element not will be stored.
You have to store your data in hidden fields:
<form method="post">
<p>
Double-click any of the following <code><div></code> elements to transform them into
editor instances.</p>
<?php
$makeleSql = 'SELECT * FROM makale';
$makaleRs = $con->func_query($makeleSql);
while ($makaleRow = mysql_fetch_array($makaleRs)) {
?>
<div class="editable" id="<?php echo "content".$makaleRow['id'];?>">
<?php
$contentSql = 'SELECT * FROM content WHERE makale_id ='.$makaleRow['id'];
$contentRs = $con->func_query($contentSql);
while ($contentRow = mysql_fetch_array($contentRs)) {
echo $contentRow['icerik'].$makaleRow['id'];
// store original text
echo '<input type="hidden" name="'.$makaleRow['id'].'" value="'.htmlspecialchars($contentRow['icerik'].$makaleRow['id']).'">;
}
?>
</div>
<?php }
?>
<button type="submit" value="Submit" onclick="getDiv(this);"/>
</form>
<script>
var getDiv = function(btn) {
for(var el in btn.form.elements) {
var d = document.getElementById(btn.form.elements[el].name);
btn.form.elements[el].value = d.innerHTML;
}
return true;
}
</script>
Generically adds <input type="hidden"> to any <div> with the attribute addToForm, copies content into them (see notes below):
<form method="post" id="f">
<div id="txt" addToForm="1" contenteditable spellcheck="true" style="height:100px;width:300px;font-family:arial,sans serif;border:1px solid black;font-weight:normal;overflow-y:auto;"
</div><br />
<input type="button" value="Go" id="btnGo">
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#btnGo").click(function(){
$("div[addToForm]").each(function(){
var tId=$(this).prop("id");
$(this).after("<input type='hidden' name='"+tId+"' id='hdn"+tId+"'>");
$("#hdn"+tId).val($(this).html());
});
$("#f").submit();
});
});
</script>
Note 1) if you want to strip out the HTML formatting of the content, use <textarea> instead of <input>
Note 2) be sure validation is successfully complete first or you will end up with multiple hidden inputs with the same name