Develop Reference

Textarea value remain the same after submitting a form

My previous problem has been fixed, now I need to ask how to keep a textarea from resetting its input after a form is submitted. Here is the jsFiddle: http://jsfiddle.net/rz4pnumy/
Should I change the form in the HTML?
<form id="form1" method="GET">
(the form does not go into a php file or anything else, i'm using it to submit the textarea input and use the variables I made using jQuery to make a paragraph on the same page)
or something in the JS?
$(document).ready( function () {
$('#form1').on('submit', function (event) {
// If the form validation returns false, block the form from submitting by
// preventing the event's default behaviour from executing.
if (!validate()) {
event.preventDefault();
}
if(validate()) {
var adjective1 = $('#adjective1').val();
var adjective2 = $('#adjective2').val();
var pluralnoun = $('#plural-noun').val();
var verb1 = $('#verb1').val();
var edibleobject = $('#edible-object').val();
var monster1 = $('#monster1').val();
var adjective3 = $('#adjective3').val();
var monster2 = $('#monster2').val();
var verb2 = $('#verb2').val();
$('body').append(
'<div id="para">' +
'<p>Rain was still lashing the windows, which were now ' + adjective1 +', but inside all looked bright and cheerful. ' +
'The firelight glowed over the countless ' + adjective2 + '' + pluralnoun + ' where people sat ' + verb1 + ', talking, ' +
'doing homework or, in the case of Fred and George Weasley, trying to find out what would happen if you fed a ' + edibleobject +' to a ' + monster1 + '.' +
'Fred had "rescued" the ' + adjective3 + ', fire-dwelling ' + monster2 + ' from a Care of Magical Creatures class and it was now ' + verb2 + ' gently ' +
'on a table surrounded by a knot of curious people. </p>' +
'</div>'
);
}
});
function validate() {
var success = true;
$('.input').each(function(i, item) {
if ($(item).val() === "")
{
console.log("Missing textarea input");
success = false;
$(item).attr("style","border:1px solid red;");
//note it will overwrite your element style in all Input class
}
else
{
$(item).removeAttr('style')
// to remove border
}
});
return success;
}
});
The contents get emptied after pressing submit and I only see the completed paragraph for a split second.

You need to prevent the default event handler from executing whether validate passes or not, so you need to remove the if statement around the event.preventDefault() call. The preventDefault is the function that is keeping the from from submitting and re-loading your page.
Also, your Fiddle was not set to jQuery (it was set to no-library) so that may have also been causing you issues during your testing.
Edited for example of what I'm talking about:
$('#form1').on('submit', function (event) {
// block the form from submitting by
// preventing the event's default behaviour from executing.
event.preventDefault();
if(validate()) {
var adjective1 = $('#adjective1').val();
var adjective2 = $('#adjective2').val();
var pluralnoun = $('#plural-noun').val();
... etc ...

I would use php and set a variable to the GET value of the textarea and set the value of the textarea to that variable

jQuery: Trimming not working for checking empty inputs

I'm using $.trim to check if the inputs are empty, if so, nothing should happen. If they're not empty then the form should be submitted.
This is the variable where the condition is located:
var save = $("<input type='button' value='Save' />").on('click',function() {
if(!$.trim(name)==''||!$.trim(degree)==''||!$.trim(dateFrom)==''||!$.trim(dateTo)=='') {
$("#list").append("<li>Name: "+$('#elem1').val()+
"<br>Degree: "+$('#elem2').val()+
"<br>Date From: "+$('#elem3').val()+
"<br>Date To: "+$('#elem4').val()+
"</li>");
cancel.click();
} else {}
});
Please take a look to the code on jsFiddle here: http://jsfiddle.net/vrpWu/
Click on "Add another"
Note that it works without the if condition, why is this happening? I've readed everywhere but looks like my code is not wrong.

First, you have to get the values when you actually click the save button, not before, as then the values will always be empty strings
var save = $("<input type='submit' value='Save' />").on('click', function () {
var name = $("#elem1").val();
var degree = $("#elem2").val();
var dateFrom = $("#elem3").val();
var dateTo = $("#elem4").val();
if (!($.trim(name) == '' || $.trim(degree) == '' || $.trim(dateFrom) == '' || $.trim(dateTo) == '')) {
console.log('test')
$("#list").append("<li>Name1: " + $('#elem1').val() +
"<br>Name2: " + $('#elem2').val() +
"<br>Name3: " + $('#elem3').val() +
"<br>Name4: " + $('#elem4').val() +
"</li>");
cancel.click();
} else {
console.log('no')
}
});
then you should note that things work a little differently when you negate the variables and use OR
You can either negate the whole thing at once
if (! ($.trim(name)==''||$.trim(degree)==''||$.trim(dateFrom)==''||$.trim(dateTo)=='')) {
or use AND instead
if (!$.trim(name)=='' && !$.trim(degree)=='' && !$.trim(dateFrom)=='' ... etc
FIDDLE

Javascript Issue with the document.form

I am trying to run the code but i do not know what is causing the issue. It was working before, now when i try like this:
function makeUnderline(formName,editor) {
var txt = window.prompt("Enter the text you wish to be underlined.", "Enter Text Here");
if (txt != null) {
document.formName.editor.value += "<u>" + txt + "</u>";
}
document.formName.editor.focus();
}
<input type="button" name="bUnderline" value=" underline " onClick="makeUnderline('formFaqs','answer');" alt="Use this button to create text that is underlined." title="Use
this button to create text that is underlined.">
I am getting Error:
TypeError: document.formName is undefined
document.formName.editor.value += "<u>" + txt + "</u>";

You are passing in the form name as a variable, you need to use bracket notation.
document.forms[formName].elements[editor].value += "<u>" + txt + "</u>";

How to get the value of id of innerHTML?

I have created a html like this:
<body onload = callAlert();loaded()>
<ul id="thelist">
<div id = "lst"></div>
</ul>
</div>
</body>
The callAlert() is here:
function callAlert()
{
listRows = prompt("how many list row you want??");
var listText = "List Number";
for(var i = 0;i < listRows; i++)
{
if(i%2==0)
{
listText = listText +i+'<p style="background-color:#EEEEEE" id = "listNum' + i + '" onclick = itemclicked(id)>';
}
else
{
listText = listText + i+ '<p id = "listNum' + i + '" onclick = itemclicked(id)>';
}
listText = listText + i;
//document.getElementById("lst").innerHTML = listText+i+'5';
}
document.getElementById("lst").innerHTML = listText+i;
}
Inside callAlert(), I have created id runtime inside the <p> tag and at last of for loop, I have set the paragraph like this. document.getElementById("lst").innerHTML = listText+i;
Now I am confuse when listItem is clicked then how to access the value of the selected item.
I am using this:
function itemclicked(id)
{
alert("clicked at :"+id);
var pElement = document.getElementById(id).value;
alert("value of this is: "+pElement);
}
But getting value as undefined.
Any help would be grateful.

try onclick = itemclicked(this.id) instead of onclick = 'itemclicked(id)'

Dude, you should really work on you CodingStyle. Also, write simple, clean code.
First, the html-code should simply look like this:
<body onload="callAlert();loaded();">
<ul id="thelist"></ul>
</body>
No div or anything like this. ul and ol shall be used in combination with li only.
Also, you should always close the html-tags in the right order. Otherwise, like in your examle, you have different nubers of opening and closing-tags. (the closing div in the 5th line of your html-example doesn't refer to a opening div-tag)...
And here comes the fixed code:
<script type="text/javascript">
function callAlert() {
var rows = prompt('Please type in the number of required rows');
var listCode = '';
for (var i = 0; i < rows; i++) {
var listID = 'list_' + i.toString();
if (i % 2 === 0) {
listCode += '<li style="background-color:#EEEEEE" id="' + listID + '" onclick="itemClicked(this.id);">listItem# ' + i + '</li>';
}
else {
listCode += '<li id="' + listID + '" onclick="itemClicked(this.id);">listItem# ' + i + '</li>';
}
}
document.getElementById('thelist').innerHTML = listCode;
}
function itemClicked(id) {
var pElement = document.getElementById(id).innerHTML;
alert("Clicked: " + id + '\nValue: ' + pElement);
}
</script>
You can watch a working sample in this fiddle.
The problems were:
You have to commit the id of the clicked item using this.id like #Varada already mentioned.
Before that, you have to build a working id, parsing numbers to strings using .toString()
You really did write kind of messy code. What was supposed to result wasn't a list, it was various div-containers wrapped inside a ul-tag. Oh my.
BTW: Never ever check if sth. is 0 using the ==-operator. Better always use the ===-operator. Read about the problem here
BTW++: I don't know what value you wanted to read in your itemClicked()-function. I didn't test if it would read the innerHTML but generally, you can only read information from where information was written to before. In this sample, value should be empty i guess..
Hope i didn't forget about anything. The Code works right now as you can see. If you've got any further questions, just ask.
Cheers!

You can pass only the var i and search the id after like this:
Your p constructor dymanic with passing only i
<p id = "listNum' + i + '" onclick = itemclicked(' + i + ')>
function
function itemclicked(id)
{
id='listNum'+i;
alert("clicked at :"+id);
var pElement = document.getElementById(id).value;
alert("value of this is: "+pElement);
}
is what you want?

I am not sure but shouldn't the onclick function be wrapped with double quotes like so:
You have this
onclick = itemclicked(id)>'
And it should be this
onclick = "itemclicked(id)">'
You have to modify your itemclicked function to retrieve the "value" of your p element.
function itemclicked( id ) {
alert( "clicked at :" + id );
var el = document.getElementById( id );
// depending on the browser one of these will work
var pElement = el.contentText || el.innerText;
alert( "value of this is: " + pElement );
}
demo here

Adding new element to a div removes the current values

So I have a js function :
function addNewUpload()
{
if(formNumber == 1){
displayRemove();
}
if(formNumber != 10){
var html = " <div id='u_"+(formNumber+1)+"' > ";
//html += " description : <input type='text' name='desc[]' /> <br> ";
html += " photo : <input type='file' name='file[]' /> ";
html += " </div> ";
document.getElementById('uploadHolder').innerHTML += html;
formNumber = formNumber + 1;
} else {
alert("You can only upload 10 photos.");
}
}
it works fine except that it removes the values from the fields that were already added using this function. How can I stop it from doing so?

You should be using DOM methods like appendChild and createNewElement etc.
Try something along these lines:
http://jsfiddle.net/9YHs8/ (in this example, "file" for type was changed to text for demo purposes).
function addNewUpload()
{
if(formNumber == 1){
displayRemove();
}
if(formNumber != 10){
var d = document.createElement("div");
d.id = "u_" + formNumber;
var i = document.createElement("input");
i.type = "file";
i.name = "file[]";
d.appendChild(document.createTextNode(" photo : "));
d.appendChild(i);
document.getElementById('uploadHolder').appendChild(d);
formNumber++;
} else {
alert("You can only upload 10 photos.");
}
}

It's normal
You say "take the innerhtml of my block add some content to it and then reinitialize the inner html of my block with this string"
The form's value are not in the innerhtml !
Look at this thread : Inserting HTML elements with JavaScript