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/
Related
How do I add a string in the beginning of this textbox and have it as read only and then allow users to enter text ahead of it?
Here is my code:
<textarea style="width: 387px; height: 17px;" rows="3" class="do_input" name="job_title" cols="40"></textarea>
Currently it's a plain textbox you can type anything inside. What I want is like this: I WILL: demo text
so I Will: Will be read only and greyed and user input text will be in front of it.
This is pretty easy to do with a little bit of JavaScript.
Add an id, such asid="myTextArea", to the HTML for your textarea like this:
<textarea style="width: 387px; height: 17px;" rows="3" class="do_input" name="job_title" cols="40" id="myTextArea"></textarea>
Then, add the following JavaScript somewhere in your page or in the head section:
readOnlyString = "I WILL: "
myTextArea = document.getElementById("myTextArea");
myTextArea.value = readOnlyString;
preservedText = readOnlyString;
// Check the value only when the textarea is focused and after the user presses a key
myTextArea.onfocus = function () {
document.onkeyup = function (e) {
updatedText = myTextArea.value;
if (updatedText.indexOf(readOnlyString) == -1)
{
myTextArea.value = preservedText;
}
preservedText = myTextArea.value;
};
};
You can check out the JSFiddle here if you want to play around with it.
I think what you're looking for is the placeholder attribute
http://www.w3schools.com/tags/att_input_placeholder.asp
and I think you're also looking for the readonly attribute
http://www.w3schools.com/tags/att_input_readonly.asp
I am trying to allow users to edit their biography and on the page I want the editable text from the DB to appear in the text box. How do I do this? Currently I have the text as a placeholder, but I want to make that editable.
Also for other, shorter fields like a users company name, when I insert the value as the placeholder (I don't want it to be editable like the bio so it doesn't resubmit every time), it can't display more than one word. How can I fix this.
Note: I wrote a function that only displays a value from SQL if there is one, else it displays a generic text, i.e. "bio" or "email"
Here is my function where $content is something like $_POST["bio"] and
<?php
function echo_content($content,$name)
{
if(!empty($content)){
echo($content);
}
else{
echo($name);
}
}
?>
Below is my html/php where $content is a value from SQL.
<div class="form-group">
<legend>Bio: </legend><textarea rows="4" cols="50" class="form-control" name="bio"
placeholder=<?php echo_content($content[0]["bio"],"Bio");?> type="text"/></textarea>
</div>
You're dumping a string into an html attribute, WITHOUT quotes, so basically you're producing:
<textarea ... placeholder=Four Score and Seven Years ago type="text">
so your placeholder is Four, and then there's a bunch of unknown/illegal attributes, Score, and, Seven etc...
Try
<textarea ... placeholder="<?php echo htmlspecialchars($var) ?>" ...>
instead. note the " and use of htmlspecialchars() to quote out html metachars.
In other words, you're basically suffering from a self-inflicted HTML injection wound.
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
I have several questions regarding forms and PHP but if I should put them into different posts then I will.
Here is my form code:
<form id="t-form" name="tForm" action="translate.php" method="POST">
<div id="t-bar">
<div class="t-select">
<select name="start-lang" id="choice-button">
<option value="english">English</option>
</select>
<label>into</label>
<select name="end-lang" id="choice-button" onChange="document.forms['tForm'].submit();">
<option value="caps"<?php if ($resLang == 'caps') echo ' selected="selected"'; ?>>CAPS</option>
<option value="lowercase"<?php if ($resLang == 'lowercase') echo ' selected="selected"'; ?>>lowercase</option>
</select>
<input type="submit" id="t-submit" value="Translate">
</div>
</div>
<div id="t-main">
<textarea id="txt-source" name="t-src" autofocus="autofocus" placeholder="Type in what you would like to convert…" onChange="document.forms['tForm'].submit();"><?php echo $source; ?></textarea>
<input type="button" id="t-clear" onclick="this.form.elements['t-src'].value=''">
<textarea id="txt-result" name="txt-result" readonly disabled="disabled" placeholder="result..."><?php echo $result; ?></textarea>
<input type="button" id="t-copy" name="t-copy">
</div>
</form>
Question 1: I currently have onclick="this.form.elements['t-src'].value=''" which clears one textbox when the button is pressed. Is it possible to have the same attribute clear both textareas in my form? I can't seem to find an answer anywhere for clearing 2 elements with 1 button. I do not want to clear the form as I would like to keep the selected dropdown values so that is why I'm doing it this way.
Question 2: How would I go about implementing a live refresh of the results textarea so they user can simply type and see the result? I've look at the ajax and jquery required and am confused as most don't show how to output to a form element and only to a div. (Similar to google's translate)
Question 3: I realized that if a user does a new line in the textarea, when they submit for translate, it gives them a php header error. Any ideas how I can avoid this? This is my header for the translate.php file used in the form:
header("location: /?txt-result=$result&t-src=$textSource&end-lang=$outputLang");
I am merely trying to do this as a learning excersise and would really appreciate any guidance or answers to the three questions. Many thanks for your help!
question 1
you should have:
onclick="clearTextboxes();"
and in javascript something like:
//if you want to delete all the inputs that are of type text
function clearTextboxes(){
var inputs = document.getElementById('t-form').getElementsByTagName('input');
for (var control in inputs){
if(inputs[control].getAttribute('type') == 'text'){
inputs[control].value = '';
}
}
}
question 2
it is far too broad to put here as an answer, you should really look at jQuery's $.ajax, and create a different question with specific doubts.
question 3
use the PHP urlencode() function
Answer 1: Have your onclick event call a function which clears those values for you:
<script type="text/JavaScript">
function clearTextareas()
{
this.form.elements["t-src"].value = "";
this.form.elements["txt-result"].value = "";
}
</script>
<input type="button" id="t-clear" onclick="clearTextareas()">
Answer 2: Add an onkeydown event in the source textarea that peforms the translation (or whatever it needs to do) and then puts the result in the result textarea:
<script type="text/JavaScript">
function translateText()
{
var text = this.form.elements["t-src"].value;
// do something
this.form.elements["txt-result"].value = text;
}
</script>
<textarea id="txt-source" name="t-src" autofocus="autofocus" placeholder="Type in what you would like to convert…" onkeydown="translateText()"><?php echo $source; ?></textarea>
Answer 3: Perhaps an onsubmit event in the form element that will sanitize the input from the text area. Have a look at JavaScript's encodeURIComponent. Perhaps this will work for you:
<script type="text/JavaScript">
function sanitize()
{
this.form.elements["t-src"].value = encodeURIComponent(this.form.elements["t-src"].value);
}
</script>
I know a bit of PHP and so also HTML/CSS, and I have made a simple quiz program allowing users to create and do quizzes that are stored in a MySQL database. Now what I am trying to do is improve the usability and efficiency of the program.
On the createQuestions form, there are eight textboxes, users can fill in between 2 or 8 of these boxes with answers. Although I think this looks messy with all eight, and what I would like is to have 2 textboxes, and when there is text in the second one, the third one appears and so on.. up to eight
I spent a few hours learning a bit of basic JS, and managed to get it, so that there was a button that changed the visibility propities of the input box, label and radio button of each row. Although I wrote it really inefficiently lots of lines of code to do not much :p - giving each object a separate ID, and it still didn't work that well.
Below is an example of how my HTML is laid out, I have eight of these, though I could replace this with one, and a PHP for loop with a limit of 8.
<div id="c">
<p class="subFont" id="cT" style="display:none;">Answer 3</p>
<input type="text" name="optionC" class="textbox" style="display:none;" id="cI">
<input type="radio" name="correctAns" value="c" id="cR" style="display:none;">
<input type ="button" name="add" value="d" style="background-color:green;" onclick="addBox('d', 'inline')" id="cB" style="display:none;">
</div>
Any suggestions on how to write the script descried above? Please could you comment or briefly explain your workings, so I can learn from it :)
Thank you loads in advance, I'm so grateful to all you guys on stackoverflow ;)
ps, any suggestions for learning js resources?
Pure Javascript
to hide/show object id="cR"
// hide
document.getElementById('cR').style.display = 'none';
// show
document.getElementById('cR').style.display = 'block';
to append textarea to
document.getElementById('c').innerHTML += '<textarea name=".." id=".."></textarea>';
events:
<input type="text" id="xxx" onchange="your action here" />
jQuery
to hide/show object id="cR"
// hide
$('#cR').hide();
$('#cR').fadeIn(); // with fade in effect
// show
$('#cR').show();
$('#cR').fadeOut(); // width fade out effect
to append textarea to
$('#c').append('<textarea name=".." id=".."></textarea>');
events:
$('#xxx').change(function() {
your action here
});
another way to add element dynamically in page..
<html>
<head>
<script>
function addElement(obj) {
text_limit = 5; // limit text then add text after that.
var text_lenght = obj.value.length;
if(text_lenght >= text_limit){
var mainElement = document.getElementById('myDiv');
var counter= mainElement.getElementsByTagName('textarea').length;
var newTextArea = document.createElement('textarea');
var textareaname = 'txt_area'+counter;
newTextArea.setAttribute('id',textareaname );
newTextArea.onkeydown= function() {
addElement(this);
}
mainElement.appendChild(newTextArea);
}
}
</script>
</head>
<body>
<div id="myDiv">
<textarea id="txt_area2" onkeyup="addElement(this);"></textarea></div>
</body>
</html>