I have a form where a user is able to comment via a textarea. If the submit button is clicked it returns the value of what is entered in the textarea inside a textarea. How can I change this it so that on submit the value of the textarea is returned as a plain text/paragraph with jquery or php?
The code for textarea and button:
<textarea rows="6" cols="40" scroll="auto" name="reply_for_{$item.id}">
{if isset($item.reply)}
{$item.reply}
{/if}
</textarea>
<br />
<input name="addcomment" value="{lang mkey='submit'}" type="button" onclick="
document.forms['commentsFrm'].id.value={$item.id};
document.forms['commentsFrm'].submit();
"/>
$('input[name="addcomment"]').on('click',function(){
var comment = $('textarea').val();
$('textarea').remove(); // removes the textarea
var actContent = $(this).parent().html(); // get the actual content of the parent dom node.
$(this).parent.html('<p>'+comment+'</p>'+actContent); // you set the new html content for the parent dom node
});
So this would take the textarea content and save it into a paragraph. A bit akward solution but it should do the magic.
Lots of ways to do this, but here's what comes to mind:
$('input[name="addcomment"]').on('click', function() {
var textArea = $('textarea[name="reply_for_{$item.id}"]');
var text = textArea.val();
$('<div id="no-editing-me">').text(text).insertAfter(textArea);
textArea.hide();
});
If you give your elements IDs, you won't have to worry about all that [name="reply_for_{$item.id}"] gunk in the jQuery. It'll be faster, too.
the 2 answers solved partly the problem. However It gave me some new inspiration and I solved it like this
{if $item.reply == ''}
<form name="reply" method="post" action="reply">
<textarea id="txtreply" name="txtreply" cols="50" rows="5"></textarea>
<input type="submit" name="btnAdd" value="{lang mkey='send'}" />
</form>
{else}
{$item.reply}
{/if}
Thanks everybody for your help
Related
In the following example i have a script with a loop that fetches comments from database, and gives every comment a form with a textarea and submit button so that users can interact with every comment separately.
The follow code makes the page looks a big mess and disturbing due to the repetition of the texareas.
What i need is a jQuery code that will hide the textareas and allow me to show a selected textarea individually when a link or div is clicked. I will simplify what i want in the following code.
<?php
$comments = array('comment1','comment2','comment3','comment4','comment5','comment6','comment7','comment8','comment9');
$c_count = count($comments);
for($i=0; $i<$c_count; $i++){
$comment = $comments[$i];
echo $comment;
?>
<hr />
<div style="border:1px solid #999; width:200px;">Click Here to Show Reply Form</div>
<div class="comment_box">
<form action="path/to/insert_reply.php" method="POST">
<textarea name="reply" cols="47" rows="4"></textarea>
<input type="submit" name="submit" value="Post Reply">
</form>
</div>
<?php
}
?>
This can be done quite easily with JQuery. http://api.jquery.com/ will be helpful.
In this example, the client can click on the comment_header div to view or hide the comment box. Note I added an additional identifier to the divs. There are many different ways to select individual div elements - you might consider wrapping both the comment_header and comment_box divs under a container div with a unique id attribute. Here, I choose to use the .data() JQuery capability.
PHP:
<?php
$comments = array('comment1','comment2','comment3','comment4','comment5','comment6','comment7','comment8','comment9');
$c_count = count($comments);
for($i=0; $i<$c_count; $i++){
$comment = $comments[$i];
echo $comment;
?>
<hr />
<div data-index="<?= $i; ?>" style="border:1px solid #999; width:200px;">Click Here to Show Reply Form</div>
<div id="<?= $i; ?>" class="comment_box">
<form action="path/to/insert_reply.php" method="POST">
<textarea name="reply" cols="47" rows="4"></textarea>
<input type="submit" name="submit" value="Post Reply">
</form>
</div>
<?php
}
?>
JS/JQuery:
$(document).ready(function(e) {
$('.comment_box').hide();
$('.comment_header').on('click', function(e) {
$('#' + $(this).data('index')).toggle();
});
});
Hope this is helpful. Here is the JSFiddle: http://jsfiddle.net/EUQG2/
To hide unselected textarea when a particular textarea is focused
$(document).ready(function(){
$('textarea').focus(function(){
$('textarea').not(this).hide();
});
});
You can play around this. I hope it helps
At its simplest, assuming that all you want to do is to hide the textarea elements (in this case by hiding the parent .comment_box element), and to show them by clicking the preceding div element:
$('.comment_box').hide().prev('div').on('click', function(){
$(this).next('.comment_box').toggle();
});
JS Fiddle demo.
If you want only one .content_box/textarea visible at any given point:
$('.comment_box').hide().prev('div').on('click', function(){
var target = $(this).next('.comment_box');
$('.comment_box').not(target).hide();
target.toggle();
});
JS Fiddle demo.
References:
hide().
next().
not().
on().
prev().
toggle().
Is it possible to have a text input field which displays somewhere else (e.g. in a div) what its content is on change?
Example: I type 1, so 1 is outputted somewhere on my screen immediatly, then I type 2 and the previous value is now updated to 12.
html
<input type="text" id="inputField" />
<div id="screen"></div>
script
document.getElementById('inputField').onkeyup = function(){
document.getElementById('screen').innerHTML = this.value;
};
The code is good but I want the screen's inner html value to be format in php. Example: the screen value is stored into $screen and then I'd echo the output where i want into the screen
[I want (echo "$screen";) like in php I will type the number in text box means it echo the value immediately used with php format]
how to store a screen value into variable $screen
You can do this by little javascript code, (assuming that you need to display text entered in a input field on a html div),
So try this in html,
<input type="text" id="inputField" />
<div id="screen"></div>
and bind a onkeyup event to the input field by which you can get the text when someone enters into it. So your javascript will be,
document.getElementById('inputField').onkeyup = function(){
document.getElementById('screen').innerHTML = this.value;
};
Working demo here and you can post the input field value to any php script by including a form element in your html code.
Try this,
HTML
<input type="text" id="addInput" />
<div id="showdata"></div>
SCRIPT
$('input#addInput').on('keyup',function(){
$('div#showdata').html($(this).val());
});
<html >
<head>
<script type="text/javascript">
function KeyHandler() {
var result = document.getElementById('result');
result.innerHTML=document.getElementById('txtInput').value;
}
</script>
</head>
<body >
<div>Type something.........</div><br />
<input type='text' id='txtInput'onkeyup="KeyHandler()" />
<br/>
Result:
<div id="result"></div>
</body>
</html>
The concept of my script is
show a textarea.
when I start giving input to
the textarea, it'll show the second
textarea.
In the same way, when I start to
input sometext in the second
textarea,
it'll show the other one and so on.
html :
<div id="question">
Question 1:<br />
<textarea rows="7" cols="72"></textarea>
</div>
javascript :
var num = 1;
$('#question').keyup(function(){
num++;
$('#question').append('
<br />Question '+num+':
<br /><textarea rows="7" cols="72">
</textarea>');
});
the problem :
when I input some word on textarea1, it shows textarea2.
but, when I input word again on textarea1, it will show a different textarea.
can any one please help me?
I don't get the idea for checking on my javascript.
Thank you
Try this, just a simple demo, http://jsfiddle.net/kCtHn/
Is it possible?
I want a user to post an array full of 1-5 pieces of data.
At first there would be only one text field on show, but on clicking a 'plus' icon next to it, it would create another text field below it for more user input.
I would also want to have a delete icon next to text boxes 2-5, to remove them if necessary.
My JQuery knowledge is limited, and I can work out how to append text boxes to a list, but not to keep track of them/delete them. Ideally I would also want to pass them as an array to php, so I can easily loop through them.
<input type="text" size="15" maxlength="15" name="1"><img src="add.png" onclick="add();">
<!-- Below is hidden by default, and each one shows on click of the add image -->
<input type="text" size="15" maxlength="15" name="2"><img src="delete.png" onclick="delete(2);">
<input type="text" size="15" maxlength="15" name="3"><img src="delete.png" onclick="delete(3);">
<input type="text" size="15" maxlength="15" name="4"><img src="delete.png" onclick="delete(4);">
<input type="text" size="15" maxlength="15" name="5"><img src="delete.png" onclick="delete(5);">
jQuery clone() is very handy for this. A small example how it could be done (working example on jsfiddle)
<ul>
<li><input type="text" name="textbox[]" /></li>
</ul>
<input type="button" id="addTextbox" value="Add textbox" />
<script type="text/javascript">
$(function(){
$('#addTextbox').click(function(){
var li = $('ul li:first').clone().appendTo($('ul'));
// empty the value if something is already filled in the cloned copy
li.children('input').val('');
li.append($('<button />').click(function(){
li.remove();
// don't need to check how many there are, since it will be less than 5.
$('#addTextbox').attr('disabled',false);
}).text('Remove'));
// disable button if its the 5th that was added
if ($('ul').children().length==5){
$(this).attr('disabled',true);
}
});
});
</script>
For the server-side part, you could then do a foreach() loop through the $_POST['textbox']
As long as you give each text box a name like "my_input[]", then when the form is submitted, PHP can get the answer(s) as an array.
$_REQUEST['my_input']; would be an array of the values stored in each text box.
Source: Add and Remove items with jQuery
Add
Remove
<p><input type="text" value="1" /></p>
<script type="text/javascript">
$(function() { // when document has loaded
var i = $('input').size() + 1; // check how many input exists on the document and add 1 for the add command to work
$('a#add').click(function() { // when you click the add link
$('<p><input type="text" value="' + i + '" /></p>').appendTo('body'); // append (add) a new input to the document.
// if you have the input inside a form, change body to form in the appendTo
i++; //after the click i will be i = 3 if you click again i will be i = 4
});
$('a#remove').click(function() { // similar to the previous, when you click remove link
if(i > 1) { // if you have at least 1 input on the form
$('input:last').remove(); //remove the last input
i--; //deduct 1 from i so if i = 3, after i--, i will be i = 2
}
});
$('a.reset').click(function() {
while(i > 2) { // while you have more than 1 input on the page
$('input:last').remove(); // remove inputs
i--;
}
});
});
</script>
You will need to create DOM elements dynamically. See how it is done for example in this question. Notice that
document.createElement
is faster then using jquery's syntax like
$('<div></div>')
Using that technick, you could create inputs like
<input name="id1"/>
<input name="id2"/>
<input name="id3"/>
<input name="id4"/>
<input name="id5"/>
On submitting your form you'll get all them in your query string like
...id1=someval1&id2=someval2&...
Having that, you could process this query as you want on server side.
<form method="POST" id="myform">
<input />
Add textbox
<input type="submit" value="Submit" />
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#add_textbox').click(function(){
var form=$(this).closest('form');
var count=form.find('input').length();
form.append('<div class="removable_textbox"><input />delete</div>');
$('.delete_input').click(function(){
$(this).find('.removable_textbox').remove();
return false;
});
return false;
});
$('#myform').submit(function(){
var i=1;
$(this).find('input').each(function(){
$(this).attr('name','input-'+i);
i++;
})
});
});
</script>
<?php
if(isset($_POST['input-1'])){
$input_array=$_POST;
}
?>
something like this?
I wrote a litte jQuery plugin called textbox. You can find it here: http://jsfiddle.net/mkuklis/pQyYy/2/
You can initialize it on the form element like this:
$('#form').textbox({
maxNum: 5,
values: ["test1"],
name: "textbox",
onSubmit: function(data) {
// do something with form data
}
});
the settings are optional and they indicate:
maxNum - the max number of elements rendered on the screen
values - an array of initial values (you can use this to pass initial values which for example could come from server)
name - the name of the input text field
onSubmit - onSubmit callback executed when save button is clicked. The passed data parameter holds serialized form data.
The plugin is not perfect but it could be a good start.
A simplified version of problem I am experiencing:
Here is my HTML form:
<form enctype="multipart/form-data" method="post" action="/controller/action">
<input type="text" name="title" id="title" value="" class="input-text" />
<input type="hidden" name="hidden_field" value="" id="hidden_field" />
<input type="submit" name="submit_form" id="submit_form" value="Save" class="input-submit" />
</form>
Here is the JavaScript:
$(document).ready(function() {
$('#submit_form').hover(function() {
$('#hidden_field').attr('value') = 'abcd';
});
});
And here is a really short version of the PHP backend:
if (isset($_POST)) {
var_dump($_POST);
}
What I do is I hover the #submit_form button for a few seconds just to make sure that the jQuery code got executed, then I submit the form and:
the $_POST['hidden_field'] is empty!
Why is that? It should contain 'abcd' as I insert it into the hidden field with jQuery on the hover event.
Correct way to set the value:
$('#hidden_field').val('abcd');
Reference: http://docs.jquery.com/Attributes/val
The statement
$('#hidden_field').attr('value') = 'abcd';
is incorrect. You should get an error there as you're assigning an rvalue (the jQuery object) to another rvalue (a string). (The assignment operator needs an lvalue (e.g. a variable) on the left.)
You probably want:
$('#hidden_field').val('abcd');
or:
$('#hidden_field').attr('value', 'abcd');
(The former is more jQuery-ish, but for this case both are equivilent.)
it is:
$('#hidden_field').attr('value','abcd');
Since these are hidden elements be sure to check these with something other that viewing the page source i.e. pressing F12, check with alert(), etc. The source of the original html page will not reflect changes made to it via javascript.