We Keep Coding

Sending data and saving in a text field

I have a main page with a popup window.
<textarea class="form-control item"></textarea>
<button type="button" class="btn btn-primary" name="name">Send</button>
There is also a second page. (/conclusion/main)
<textarea id="retro" style="height: 200px; width: 800px"></textarea>
I enter the text in the window and send. The window should close and the text should be sent to the second page and the text should be saved in the field "textarea". Even if they close the page or reload, the text should remain in the second page.
This code allows you to save, but after closing the page, does not save
(function(){
var textarea = document.getElementById('retro');
if (localStorage.retro)
{
textarea.value = localStorage.retro;
}
textarea.onchange = function()
{
localStorage.retro = this.value;
}
})();
Sends from the first page to the second
function getParams(){
var idx = document.URL.indexOf('?');
var params = new Array();
if (idx != -1) {
var pairs = document.URL.substring(idx+1, document.URL.length).split('&');
for (var i=0; i<pairs.length; i++){
nameVal = pairs[i].split('=');
params[nameVal[0]] = nameVal[1];
}
}
return params2;
}
params = getParams();
name = unescape(params["name"]);
document.getElementById('retro').innerHTML = name;

There are some questions around what you are trying to do here. What I have done is broken this down into 2 parts
Passing the local storage between 2 pages and accessing it.
Decoding Parameters in the URL and assigning them
Some assumptions that I made:
I have noticed some of the classes from bootstrap so i assume that you have jQuery on the page and also you may know how to use it.
Using chrome for testing this
PART 1 - Passing localstorage between windows:
First thing to note is you may be better using a cookie library (js-cookie) or creating one yourself that you can access. As localstorage may well be insecure depending on what data you want to store in there.
With that out of the way, you were on the right track, just needed to add your event listener to 'input' as i think then every keystroke the data in local storage is being updated.
Page 1
HTML
<textarea id="retro" class="form-control item"></textarea>
<button type="button" class="btn btn-primary" name="name">Send</button>
JS (I would recommend place this at the bottom of you page for quick testing)
<script type="text/javascript">
var textarea = document.getElementById('retro');
textarea.addEventListener('input',function(){
localStorage.setItem('retro', this.value);
})
</script>
In Chrome developer tools if you watch the variable 'localstorage' then you will see this change as you key in the value.
What I have done here is bound the event listener to the text area so that any 'input' the value changes, furthermore is am setting the item in the localstorage
PAGE 2
HTML
<textarea id="retro" style="height: 200px; width: 800px"></textarea>
JS
<script type="text/javascript">
var textarea = document.getElementById('retro').value = localStorage.getItem('retro');
</script>
Here using the 'getItem' method for localstorage you can then retrieve it from the storage area and output it as the value of the textarea.
Obviously is the cache or localstorage is cleared then this value will disappear.
PART 2 - Decoding Parameters in the URL and assigning them
$.urlParam = function(name){
var results = new RegExp('[\?&]' + name + '=([^]*)').exec(window.location.href);
if (results==null){
return null;
}
else{
return results[1] || 0;
}
}
This function above will get you any parameter you want form the url I found this from here. This is using jQuery.
Here is how you would use it
// example.com?param1=name&param2=&id=6
$.urlParam('param1'); // name
$.urlParam('id'); // 6
$.urlParam('param2'); // null
Well I hope this answers your question on both parts, and helps you further, please add any comments if I have missed anything and I will be happy to update my answer

Add New Line in textarea by getElementById().value not Working

I'm quite new in Javascript. Sorry if I say some absurd. None of the previous answers I found here worked in my case...
The code gets an index from a selected option from a dropdown list generated by an array loop, and uses this index to post description of a product in a textarea. Ideal would be one in each line. But whenever I add '\n'(added only for visualization by the end of the code) or '
&#10'; the dropdown list itself disapears. Trying '< br>' does not work either.
pr[] is a nested array that contains a description of 10 products (ex adidas soccer ball) in its first position and price at the second.
The function buy() is called by a button onclick event, each time it is called it adds one product to the textarea.
Thanks in advance!
textd=" ";
valord=0;
function buy() {
var e = document.getElementsByTagName("select");
var f = e[0].selectedIndex;
textd +=pr[f][0];
valore = valord += pr[f][1];
document.getElementById("compras").value=textd\n;
document.getElementById("valor").value ="R$ "+ valore+",00";
}

You need to add "\n" to the end of the string while adding text to text area, then this "\n" ensures that row will be displayed in a new line instead of same line.
Look at the following code
<!DOCTYPE html>
<html>
<body>
<script>
function appendText()
{
debugger;
var ele = document.getElementById("textArea");
var text = ele.value;
text += "im clicked\n";
text +="clicked again\n";
text +="clicked third time\n";
text +="clicked forth time";
ele.value = text;
}
</script>
<textarea rows="4" cols="50" id="textArea">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>
<button type="button" onclick="appendText()">Click me </button>
</body>
</html>
You may need to change your code to
textd +=pr[f][0] + "\n";
document.getElementById("compras").value=textd;

CEWP Print Button with Code to print SharePoint form?

I currently have a Preview of our form that looks exactly how we want it to look for the list item being viewed but the problem is when I added my Print button as CEWP in FOrm Display it performs the exact same function as using Control P and prints the entire page. See code.
<div style="text-align: center"><input onclick="window.print();return false;" type="button" value=" Print this page "/> </div>"
I want to add onto this to have it only print the form and no other content out side of the current view in the window and actually fill an 8.5 by 11.
Any ideas?

Inspired by this InfoPath print button, one solution would be to grab the contents of your CEWP and create a new window that only contains those.
var patt = /**your CEWP ID here***/g;
var alldivs = document.getElementsByTagName('div');
var printpageHTML = '';
for(var i=0; i<alldivs.length; i++){
if(patt.test(alldivs[i].id)){
printpageHTML = '<HTML><HEAD>\n' +
document.getElementsByTagName('HEAD')[0].innerHTML +
'</HEAD>\n<BODY>\n' +
alldivs[i].innerHTML.replace('inline-block','block') +
'\n</BODY></HTML>';
break;
}
}
var printWindow = window.open('','printWindow');
printWindow.document.open();
printWindow.document.write(printpageHTML);
printWindow.document.close();
printWindow.print();
printWindow.close();
Fixed: removed escaping for HTML characters.

Simple print functionality:
<input id="printpagebutton" type="button" value="Print this page" onclick="printpage()"/>
<script type="text/javascript">
function printpage() {
//Get the print button and put it into a variable
var printButton = document.getElementById("printpagebutton");
//Set the print button visibility to 'hidden'
printButton.style.visibility = 'hidden';
//Print the page content
window.print()
//Set the print button to 'visible' again
//[Delete this line if you want it to stay hidden after printing]
printButton.style.visibility = 'visible';
}
</script>

How to show a popup before submitting the information

I am using Asp.Net/C# , I am having a requirement wherein I want to display a confirm before submission of data , if user clicks OK button , then proceed , or else cancel the submission.I know javascript confirm box does this , but in my case I need to show my own popup , Can anyone suggest me how can I achieve this.I would not want to use any plugin here.
Thanks for any suggestions.

you can create as follow:
function createPopup() {
//Get the data from the form fields
var background = document.custom.back.value;
var title = document.custom.title.value;
var text = document.custom.text.value;
//Now create the HTML code that is required to make the popup
var content = "<html><head><title>"+title+"</title></head>\
<body bgcolor='"+background+"'><h1>"+title+"</h1>"+text+"<br />\
<a href='javascript:window.close()'>Close the popup</a></body></html>";
//Create the popup
var popup = window.open("","window","resizeable,width=400,height=300");
popup.document.write(content); //Write content into it.
pops.document.close();
}
the logic should like as follow: i have not executed and tested just see the logic ignore minore mistakes if any.. also set the layout, border look like the confirmation window.
function popup() {
alert('popup called');
//Now create the HTML code that is required to make the popup
var content = "<html><head><title>ConfirmBox</title></head><body >Do you want to continue ? <br />
<input type='button' value='ok' onclick='return true'/>
<input type='button' value='cancel' onclick='return false'/> <a href='javascript:window.close()'>Close the popup</a></body></html>";
//Create the popup
var popup = window.open("","window","resizeable,width=400,height=300");
popup.document.write(content); //Write content into it.
pops.document.close();
}
refer http://www.openjs.com/tutorials/advanced_tutorial/popup.php

JavaScript href onclick not working with Perl

The below is my code. All my button functions are working perfectly, but if I click the link click the value of server should be remembered and the page should be reloaded again with the parameters view and subsys.
But the value for the server is empty when I getting reloaded.
my $server = $q->param('server') ;
my $unit = $q->param('unit') ;
my $bfile = __FILE__ ;
$bfile = `basename $bfile` ;
chomp $bfile ;
print "<form name=\"form1\" action =\"/cgi-bin/$bfile\" onsubmit=\"javascript:onsubmitform(doc_press)\">";
print "<input type=\"hidden\" name=\"server\" id=\"server\">";
print "<input type=\"hidden\" name=\"unit\" id=\"unit\">";
print "\n\n<input type=submit name=view value=\"View\" onClick=\"doc_press=this.value\">";
print "<input type=submit name=save value=\"Save\" onClick=\"doc_press=this.value\">";
print $var{$a}."<a href=\"/cgi-bin/$bfile?view=5&SUBSYS=$subsys\" onClick=javascript:click_page(\"$_\")>CLICK</a>\n" ;
print <<"END_OF_SCRIPT";
<script type="text/javascript">
function onsubmitform(doc_press) {
if (doc_press == "View"){
document.getElementById('unit').value="$unit";
}
else if (doc_press == "Save") {
END_OF_SCRIPT
var x = "$user=$val";
document.cookie=x;
document.getElementById('unit').value="$unit";
}
if (document.getElementById('HTTP_TYPE').value == "post") {
document.form1.method='post';
}
else if(document.getElementById('HTTP_TYPE').value == "get") {
document.form1.method='get';
}
}
function click_page(server){
document.getElementById('server').value=server;
}
</script>
END

When you click on a link (<a href="..."/>), the browser will make a new GET request for the given link, regardless of any forms you might have. This means that your form is NOT submitted; so any value in the form will be lost. For this reason, your onclick handler as posted here is useless.
Sometimes, if you’re really linking to the same page, modern browsers are smart enough to recognize that, and fill in the values you already had. This is only a commodity to users who get frustrated if their values are not kept, and so this doesn't work for hidden fields.
If you want clicking on the link to submit the form, you should either a) use a button, or b) change your onclick handler to submit the form and return false (so that the link isn’t followed):
function click_page(server){
document.getElementById('server').value=server;
document.forms[0].submit();
return false;
}
To make this work correctly, also change the onclick declaration:
CLICK