Submit One Field of a Form to a New Window

V

vunet.us

Hello,
I have an html form which users fill out and submit. The form contains
one textarea which I want them to preview before submitting. This,
probably, means that there will be a link/button saying "Preview" and
JS will open a new window and submit the form. The new window page
will get value of one field and display it. I believe this is how it
should be done.

Is there a good way someone can recommend me how I can implement this
or suggest a better way, perhaps.

Thank you
 
A

ASM

(e-mail address removed) a écrit :
Hello,
I have an html form which users fill out and submit. The form contains
one textarea which I want them to preview before submitting. This,
probably, means that there will be a link/button saying "Preview" and
JS will open a new window and submit the form. The new window page
will get value of one field and display it. I believe this is how it
should be done.

Is there a good way someone can recommend me how I can implement this
or suggest a better way, perhaps.
Click to expand...

I do not understand why a field value has to be shown in a popup ...

<html>
<style type="text/css">
#agree { display: none; }
</style>
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
function agree() {
if($('agree').style.display!='block') {
alert('please use the button to send the form');
return false;
}
return true;
}
</script>
<form onsubmit="return agree()" action="test.htm" >
<div id="agree">
<textarea> some text to read </textarea><br>
<input type=reset value="disagree"
onclick="$('agree').style.display='none';">
<input type=submit value="I agree"
onclick="agrement.value='ok';">
<input type=hidden name="agrement" value="no">
</div>
<p>nom <input name=nom>
<p>prenom <input name=prenom>

<p><input type=button value="Send"
onclick="$('agree').style.display='block';location='#agree';">
</form>
</html>


If JS is disabled nothing will work ...
 
V

vunet.us

(e-mail address removed) a écrit :



I do not understand why a field value has to be shown in a popup ...

<html>
<style type="text/css">
#agree { display: none; }
</style>
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
function agree() {
if($('agree').style.display!='block') {
alert('please use the button to send the form');
return false;
}
return true;}

</script>
<form onsubmit="return agree()" action="test.htm" >
<div id="agree">
<textarea> some text to read </textarea><br>
<input type=reset value="disagree"
onclick="$('agree').style.display='none';">
<input type=submit value="I agree"
onclick="agrement.value='ok';">
<input type=hidden name="agrement" value="no">
</div>
<p>nom <input name=nom>
<p>prenom <input name=prenom>

<p><input type=button value="Send"
onclick="$('agree').style.display='block';location='#agree';">
</form>
</html>

If JS is disabled nothing will work ...
Click to expand...

Oh, it's very easy: I have a textfield where user writes the
description of the item. It can be a long text value or html. Then I
want them to preview how it will look like on the page before they
submit it. So, I just want a new window to be open with that field
info inside. Your example shows a bit different solution. Thanks for
your time and help.
 
A

ASM

(e-mail address removed) a écrit :
So, I just want a new window to be open with that field
info inside. Your example shows a bit different solution. Thanks for
your time and help.
Click to expand...

<html>
<style type="text/css">
#viewer { position:absolute;top:20px;border:2px solid #888;
width:90%;left:5%;height:300px;overflow:auto;
padding:8px;background:white;display:none;cursor:pointer }
</style>
<script type="text/javascript">

function preview() {
var t = document.forms[0].userText.value;
var v = document.getElementById('viewer');
v.innerHTML = t;
v.style.display = 'block';
}
</script>
<form>
<textarea name="userText" style="width:80%;height:200px"></textarea>
<input value="Preview" onclick="preview();" type=button>
</form>

blah

<div id="viewer" onclick="this.style.display='none';"></div>
</html>
 
V

vunet.us

(e-mail address removed) a écrit :
So, I just want a new window to be open with that field
info inside. Your example shows a bit different solution. Thanks for
your time and help.
Click to expand...

<html>
<style type="text/css">
#viewer { position:absolute;top:20px;border:2px solid #888;
width:90%;left:5%;height:300px;overflow:auto;
padding:8px;background:white;display:none;cursor:pointer }
</style>
<script type="text/javascript">

function preview() {
var t = document.forms[0].userText.value;
var v = document.getElementById('viewer');
v.innerHTML = t;
v.style.display = 'block';}

</script>
<form>
<textarea name="userText" style="width:80%;height:200px"></textarea>
<input value="Preview" onclick="preview();" type=button>
</form>

blah

<div id="viewer" onclick="this.style.display='none';"></div>
</html>
Click to expand...

and that would be a good solution indeed, if not something to
consider:
I cannot control wheather user enters text or html. if html is
entered, then would I really have to check for every possible html
tag, such as <br>, <table>, etc. to preserve plain text line breaks?

For example, If user enters:
-this
-is
-example
then the JS innnerHTML shows "-this -is -example", so I need to
convert line breaks to <br>.
But if user types "-this <br>-is <br>-example", there will be a break
with innerHTML.
What if situation is somehow different than this? Do i need to
consider every case or it would be just more simple to send it to
another popup window and display it the way it would really look no
matter what...?
 
A

ASM

(e-mail address removed) a écrit :
I cannot control wheather user enters text or html. if html is
entered, then would I really have to check for every possible html
tag, such as <br>, <table>, etc. to preserve plain text line breaks?

For example, If user enters:
-this
-is
-example
then the JS innnerHTML shows "-this -is -example", so I need to
convert line breaks to <br>.
But if user types "-this <br>-is <br>-example", there will be a break
with innerHTML.
What if situation is somehow different than this? Do i need to
consider every case or it would be just more simple to send it to
another popup window and display it the way it would really look no
matter what...?
Click to expand...

you'll have same problems in a new window(*) or in a div in main window.

You asked about text entered as html (with tags and so on)
and that works fine in my test.

Now if you want to display in html some "normal" text it is not same song.
You can try :

function preview() {
var t = document.forms[0].userText.value;
if(t.indexOf('<')<0) t = '<pre>'+t+'<\/pre>';
var v = document.getElementById('viewer');
v.innerHTML = t;
v.style.display = 'block';
}

But probably you'll prefer :

function preview() {
var t = document.forms[0].userText.value;
t = t.replace(/>(\n|\r)/g,'>').replace(/\n|\r/g,'<br>');
var v = document.getElementById('viewer');
v.innerHTML = t;
v.style.display = 'block';
}



(*) about the option "opening in a new window", test that :

<html>
<script type="text/javascript">
function preview() {
truc = window.open('','','width=300,height=300');
truc.document.open();
truc.document.write(document.forms[0].userText.value);
truc.document.close();
}
</script>
<form>
<textarea name="userText" style="width:80%;height:200px">
<div style="background:yellow">
<h1>test</h1>
<p>to see
</div>

an now,
with some
return carriages
</textarea>
<input value="Preview" onclick="preview();" type=button>
</form>
</html>
 
V

vunet.us

(e-mail address removed) a écrit :


I cannot control wheather user enters text or html. if html is
entered, then would I really have to check for every possible html
tag, such as <br>, <table>, etc. to preserve plain text line breaks?
Click to expand...
For example, If user enters:
-this
-is
-example
then the JS innnerHTML shows "-this -is -example", so I need to
convert line breaks to <br>.
But if user types "-this <br>-is <br>-example", there will be a break
with innerHTML.
What if situation is somehow different than this? Do i need to
consider every case or it would be just more simple to send it to
another popup window and display it the way it would really look no
matter what...?
Click to expand...

you'll have same problems in a new window(*) or in a div in main window.

You asked about text entered as html (with tags and so on)
and that works fine in my test.

Now if you want to display in html some "normal" text it is not same song.
You can try :

function preview() {
var t = document.forms[0].userText.value;
if(t.indexOf('<')<0) t = '<pre>'+t+'<\/pre>';
var v = document.getElementById('viewer');
v.innerHTML = t;
v.style.display = 'block';

}

But probably you'll prefer :

function preview() {
var t = document.forms[0].userText.value;
t = t.replace(/>(\n|\r)/g,'>').replace(/\n|\r/g,'<br>');
var v = document.getElementById('viewer');
v.innerHTML = t;
v.style.display = 'block';

}

(*) about the option "opening in a new window", test that :

<html>
<script type="text/javascript">
function preview() {
truc = window.open('','','width=300,height=300');
truc.document.open();
truc.document.write(document.forms[0].userText.value);
truc.document.close();}

</script>
<form>
<textarea name="userText" style="width:80%;height:200px">
<div style="background:yellow">
<h1>test</h1>
<p>to see
</div>

an now,
with some
return carriages
</textarea>
<input value="Preview" onclick="preview();" type=button>
</form>
</html>
Click to expand...

thank you, that's really helpful
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to submit form after calling curl post 4
Move a Form action="ThatPage.php" to an <input type="??" > inline 1
Digital Signature field form in PDF generated document from HTML 5
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated 1
How to discover a CSS Selector name? 8
can't submit a form 0
Login form no longer working 2
How to Create a random password generator in a separate window 4

Members online

Total: 34 (members: 1, guests: 33)
Robots: 323

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,011
Latest member
AjaUqq1950

Latest Threads

Top