469,579 Members | 1,147 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,579 developers. It's quick & easy.

create form on same page?

Hello,

How do I create a form without using document.write() which opens a
new window?

I imagine it has to do with using a <SPAN ID='idvalue' etc element and
document.getElementById("idvalue").innerHTML but not clear how to do
it...

This is how I have done it at the moment ...

document.write("<form action ='http://website/path/formmail-nms.cgi'
method='post'>");
document.write("<input type ='hidden' name ='slidervalues' value='" +
str_questions + "'>");
document.write("<input type ='hidden' name ='recipient' value
='extraemails'>");
document.write("<input type ='submit' value='send'
onlick-'sendslidervalues'>");
document.write("</form>");

Cheers

Geoff
Sep 10 '05 #1
13 1952

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:kn********************************@4ax.com...
Hello,

How do I create a form without using document.write() which opens a
new window?

I imagine it has to do with using a <SPAN ID='idvalue' etc element and
document.getElementById("idvalue").innerHTML but not clear how to do
it...

This is how I have done it at the moment ...

document.write("<form action ='http://website/path/formmail-nms.cgi'
method='post'>");
document.write("<input type ='hidden' name ='slidervalues' value='" +
str_questions + "'>");
document.write("<input type ='hidden' name ='recipient' value
='extraemails'>");
document.write("<input type ='submit' value='send'
onlick-'sendslidervalues'>");
document.write("</form>");
not sure I follow the question so far. Why do you need to create the form
client side ?

Cheers

Geoff

Sep 10 '05 #2
On Sat, 10 Sep 2005 14:21:41 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:kn********************************@4ax.com.. .
Hello,

How do I create a form without using document.write() which opens a
new window?

I imagine it has to do with using a <SPAN ID='idvalue' etc element and
document.getElementById("idvalue").innerHTML but not clear how to do
it...

This is how I have done it at the moment ...

document.write("<form action ='http://website/path/formmail-nms.cgi'
method='post'>");
document.write("<input type ='hidden' name ='slidervalues' value='" +
str_questions + "'>");
document.write("<input type ='hidden' name ='recipient' value
='extraemails'>");
document.write("<input type ='submit' value='send'
onlick-'sendslidervalues'>");
document.write("</form>");
not sure I follow the question so far. Why do you need to create the form
client side ?


Zoe,

I have a set of slider values in array which I want to pass on to the
formmail-nms.cgi script so my idea is to put them into a form with a
submit button etc... is there a better way?

Cheers

Geoff




Cheers

Geoff


Sep 10 '05 #3
ASM
Geoff Cox wrote:
Hello,

How do I create a form without using document.write() which opens a
new window?


all as to write in a popup you can use same way
that's to say : not that you use

mytext = '<form action="page.htm" method="get">';
mytext += '<h2>some title<\/h2>';
mytext += '<p>Name : <input type=text name="name">';
mytext += '<p>First name : <input type=text name="Fname">';
mytext += '<p>Name : <input type=submit value="Send">';
mytext += '<\/form>';

then at choice :

truc=window.open();
with(truc){open();write(mytext);close();}

or

document.geElementById('here').innerHTML = mytext;

more elegant way is to use nodes of DOM

<script type="text/javascript">
function go() {
var frm = document.createElement('FORM');
frm.setAttribute('id','myForm');
frm.setAttribute('name','myForm');
frm.setAttribute('action','page.htm');

var elem = document.createElement('H2');
elem.innerHTML='some title';
frm.appendChild(elem);

elem = document.createElement('P');
var texto = document.createTextNode('Name : ');
var field = document.createElement('INPUT');
field.setAttribute('name','name');
elem.appendChild(texto);
elem.appendChild(field);
frm.appendChild(elem);

elem = document.createElement('P');
field = document.createElement('INPUT');
field.setAttribute('value','send');
field.type='submit';
elem.appendChild(field);
frm.appendChild(elem);

document.getElementById('here').appendChild(frm);
}
</script>
<button onclick="go()">GO</button>
<div id="here"></div>

--
Stephane Moriaux et son [moins] vieux Mac
Sep 10 '05 #4
ASM
Geoff Cox wrote:

I have a set of slider values in array which I want to pass on to the
formmail-nms.cgi script so my idea is to put them into a form with a
submit button etc... is there a better way?


function sendSlide(whichForm) {
whichForm.action += ?slidervalues='+str_questions +
'&recipient=' + extraemails;
}

<form action="http://website/path/formmail-nms.cgi"
onsubmit="sendSlide(this)">
<input type=submit value="send sliders">
</form>

or :

<a href="#"
onclick="if(str_questions != '')
location.href='http://website/path/formmail-nms.cgi?slidervalues=' +
str_questions + '&recipient=' + extraemails;
else
alert('no answer given to questions');
return false;">send sliders</a>
--
Stephane Moriaux et son [moins] vieux Mac
Sep 10 '05 #5
On Sat, 10 Sep 2005 17:22:39 +0200, ASM
<st*********************@wanadoo.fr.invalid> wrote:
Geoff Cox wrote:
Hello,

How do I create a form without using document.write() which opens a
new window?

Stephane,

I wonder if I made myself clear ? The above sentence is ambiguous - I
meant to say that I wish to create the form in the same window as the
rest of the app, not in a new window.

Cheers

Geoff




all as to write in a popup you can use same way
that's to say : not that you use

mytext = '<form action="page.htm" method="get">';
mytext += '<h2>some title<\/h2>';
mytext += '<p>Name : <input type=text name="name">';
mytext += '<p>First name : <input type=text name="Fname">';
mytext += '<p>Name : <input type=submit value="Send">';
mytext += '<\/form>';

then at choice :

truc=window.open();
with(truc){open();write(mytext);close();}

or

document.geElementById('here').innerHTML = mytext;

more elegant way is to use nodes of DOM

<script type="text/javascript">
function go() {
var frm = document.createElement('FORM');
frm.setAttribute('id','myForm');
frm.setAttribute('name','myForm');
frm.setAttribute('action','page.htm');

var elem = document.createElement('H2');
elem.innerHTML='some title';
frm.appendChild(elem);

elem = document.createElement('P');
var texto = document.createTextNode('Name : ');
var field = document.createElement('INPUT');
field.setAttribute('name','name');
elem.appendChild(texto);
elem.appendChild(field);
frm.appendChild(elem);

elem = document.createElement('P');
field = document.createElement('INPUT');
field.setAttribute('value','send');
field.type='submit';
elem.appendChild(field);
frm.appendChild(elem);

document.getElementById('here').appendChild(frm );
}
</script>
<button onclick="go()">GO</button>
<div id="here"></div>


Sep 10 '05 #6
Lee
Geoff Cox said:

On Sat, 10 Sep 2005 14:21:41 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:kn********************************@4ax.com. ..
Hello,

How do I create a form without using document.write() which opens a
new window?

I imagine it has to do with using a <SPAN ID='idvalue' etc element and
document.getElementById("idvalue").innerHTML but not clear how to do
it...

This is how I have done it at the moment ...

document.write("<form action ='http://website/path/formmail-nms.cgi'
method='post'>");
document.write("<input type ='hidden' name ='slidervalues' value='" +
str_questions + "'>");
document.write("<input type ='hidden' name ='recipient' value
='extraemails'>");
document.write("<input type ='submit' value='send'
onlick-'sendslidervalues'>");
document.write("</form>");


not sure I follow the question so far. Why do you need to create the form
client side ?


Zoe,

I have a set of slider values in array which I want to pass on to the
formmail-nms.cgi script so my idea is to put them into a form with a
submit button etc... is there a better way?


If all you're trying to do is to send the value of the str_questions
variable to the formmail script, you can have the form already written
in normal HTML in the page, and simply use Javascript to set the value
of the slidervalues element. You'll need to give your form a name,
such as "hiddenform" :

document.hiddenform.slidervalues.value=str_questio ns;

Sep 10 '05 #7
ASM
Geoff Cox wrote:
On Sat, 10 Sep 2005 17:22:39 +0200, ASM
<st*********************@wanadoo.fr.invalid> wrote:

Geoff Cox wrote:
Hello,

How do I create a form without using document.write() which opens a
new window?
Stephane,

I wonder if I made myself clear ? The above sentence is ambiguous - I
meant to say that I wish to create the form in the same window as the
rest of the app, not in a new window.


I did understand that and gave 2 issues

one :
document.geElementById('here').innerHTML = mytext;
the second is much infashion but harder

Anyway : I do not understand why you need a form
to call a page with variables attached ... ?
==> see my example with a link given in my other post
mytext = '<form action="page.htm" method="get">';
mytext += '<h2>some title<\/h2>';
mytext += '<p>Name : <input type=text name="name">';
mytext += '<p>First name : <input type=text name="Fname">';
mytext += '<p>Name : <input type=submit value="Send">';
mytext += '<\/form>';

then at choice :

truc=window.open();
with(truc){open();write(mytext);close();}

or

document.geElementById('here').innerHTML = mytext;

more elegant way is to use nodes of DOM


--
Stephane Moriaux et son [moins] vieux Mac
Sep 10 '05 #8
On 10 Sep 2005 09:03:10 -0700, Lee <RE**************@cox.net> wrote:
If all you're trying to do is to send the value of the str_questions
variable to the formmail script, you can have the form already written
in normal HTML in the page, and simply use Javascript to set the value
of the slidervalues element. You'll need to give your form a name,
such as "hiddenform" :

document.hiddenform.slidervalues.value=str_questio ns;


Lee,

except - after the last question has been answered I want the slider
values in the array to be sent without user action to the
formmail-nms.cgi script so that they can be sent to me via email.

I have code which does that using prototype.js etc but am trying to do
the same with a simple form...

The whole code using prototype.js follows - how would you use a form
in place of this?

Geoff

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<HEAD>

<link rel=stylesheet href="slider.css" type="text/css">
<SCRIPT SRC="slider.js"></SCRIPT>
<SCRIPT SRC="prototype-1.3.1.js"></SCRIPT>

<script type="text/javascript">

var mySlider1 = new Slider( "Slider1" );
var count = 0;
var slider_value = new Array(8);

mySlider1.leftValue = -10;
mySlider1.rightValue = 10;
mySlider1.defaultValue = 0;
mySlider1.offsetX = 1;
mySlider1.offsetY = 1;
mySlider1.buttonWidth = 10;
mySlider1.maxSlide = 288;

mySlider1.onchange
="document.getElementById('Slider1ValueText').inne rHTML
=''+this.getValue(0)";
var lhs_questions = new Array(8)
lhs_questions[0]="I would often be in this situation";
lhs_questions[1]="I would often talk to a group of friends";
lhs_questions[2]="I would not worry if I stuttered here";
lhs_questions[3]="If I were to stutter here I would know why";
lhs_questions[4]="I would stutter mildy here";
lhs_questions[5]="If I were to stutter here, my friends would not be
able to tell";
lhs_questions[6]="If I were to stutter here I would feel bad";
lhs_questions[7]="If I were to stutter here, my group of friends would
be understanding";

var rhs_questions = new Array(8)
rhs_questions[0]="I would hardly ever be in this situation";
rhs_questions[1]="I would hardly talk to a group of friends";
rhs_questions[2]="I would worry if I stuttered here";
rhs_questions[3]="If I were to stutter here I would not know why";
rhs_questions[4]="I would stutter severly here";
rhs_questions[5]="If I were to stutter here, my friends would be able
to tell";
rhs_questions[6]="If I were to stutter here I would feel good";
rhs_questions[7]="If I were to stutter here, my group of friends would
not be understanding";

function buildTable()
{

document.write("<center>");
document.write("<table border='0' width='100%'>");

document.write("<tr>");
document.write(" <td ID='lhs_question' width='30%' valign='top'
height='70'>" + this.lhs_questions[count] + "</td>");
document.write(" <td width='40%' align='center' valign='top'
height='70'>" + "<IMG SRC='sliderbg.gif' NAME='Slider1RailImg'
ID='Slider1RailImg'>" + "</td>");
document.write(" <td ID='rhs_question' width='30%' valign='top'
height='70'>" + this.rhs_questions[count] + "</td>");
document.write("</tr>");

document.write("<tr><td colspan='3' align='center' valign='top'
height='100'>");
document.write("<input type='button' value='Next'
onclick='next_question(this)' />");
document.write("<SPAN class='invisible'
ID='Slider1ValueText'></SPAN>");
document.write("<SPAN ID='Status'></SPAN></td></tr>");

document.write("</table>");
document.write("</center>");
}

function next_question(button)
{

slider_value[count] = this.mySlider1.getValue(0);

this.count++;

if (this.count < 8)
{
document.getElementById('lhs_question').innerHTML =
this.lhs_questions[count];
document.getElementById('rhs_question').innerHTML =
this.rhs_questions[count];

mySlider1.setValue( (mySlider1.leftValue + mySlider1.rightValue) / 2
);

} else
{
if (button.parentNode &&
button.parentNode.removeChild) {
button.parentNode.removeChild(button);

}
saveIt();
}
}

function saveIt()
{

var str_questions = "";
for (var i=0; i < slider_value.length; i++)
{
str_questions += slider_value[i] + "\n";
}

document.getElementById("Slider1ValueText").innerH TML =
str_questions;
var recipient = "extraemails";
var realname = "SPA Form";
var situation_value = "Social Group";
var url = 'http://website/path//formmail-nms.cgi';
var pars = 'recipient=' + recipient + '&' + 'realname=' + realname
+ '&' + 'Situation=' + situation_value + '&' + 'Name=' + name + '&' +
'Slider Values=' +
document.getElementById('Slider1ValueText').innerH TML;
var myAjax = new Ajax.Updater('Status', url, {method: 'post',
parameters: pars});
}

</script>

</HEAD>

<BODY onLoad="mySlider1.placeSlider()">

<h2 align="center">Social Group</h2>

<p align="center"><img src="pic3.jpg"></p>

<script language="javascript"
type="text/javascript">buildTable();</script>

<SCRIPT>

mySlider1.writeSlider();

</SCRIPT>

</body>
</html>


Sep 10 '05 #9
On Sat, 10 Sep 2005 18:25:35 +0200, ASM
<st*********************@wanadoo.fr.invalid> wrote:
Anyway : I do not understand why you need a form
to call a page with variables attached ... ?


Stephane,

My intention is to use a form to send the array values to the
formmail-nms.cgi script so that they can be sent to me via email.

The code below does this using prototype.js (see function saveIt()
below) but I am trying to use a simple form instead...Can you see how
I can avoid using prototype.js?

Cheers

Geoff
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<HEAD>

<link rel=stylesheet href="slider.css" type="text/css">
<SCRIPT SRC="slider.js"></SCRIPT>
<SCRIPT SRC="prototype-1.3.1.js"></SCRIPT>

<script type="text/javascript">

var mySlider1 = new Slider( "Slider1" );
var count = 0;
var slider_value = new Array(8);

mySlider1.leftValue = -10;
mySlider1.rightValue = 10;
mySlider1.defaultValue = 0;
mySlider1.offsetX = 1;
mySlider1.offsetY = 1;
mySlider1.buttonWidth = 10;
mySlider1.maxSlide = 288;

mySlider1.onchange
="document.getElementById('Slider1ValueText').inne rHTML
=''+this.getValue(0)";
var lhs_questions = new Array(8)
lhs_questions[0]="I would often be in this situation";
lhs_questions[1]="I would often talk to a group of friends";
lhs_questions[2]="I would not worry if I stuttered here";
lhs_questions[3]="If I were to stutter here I would know why";
lhs_questions[4]="I would stutter mildy here";
lhs_questions[5]="If I were to stutter here, my friends would not be
able to tell";
lhs_questions[6]="If I were to stutter here I would feel bad";
lhs_questions[7]="If I were to stutter here, my group of friends would
be understanding";

var rhs_questions = new Array(8)
rhs_questions[0]="I would hardly ever be in this situation";
rhs_questions[1]="I would hardly talk to a group of friends";
rhs_questions[2]="I would worry if I stuttered here";
rhs_questions[3]="If I were to stutter here I would not know why";
rhs_questions[4]="I would stutter severly here";
rhs_questions[5]="If I were to stutter here, my friends would be able
to tell";
rhs_questions[6]="If I were to stutter here I would feel good";
rhs_questions[7]="If I were to stutter here, my group of friends would
not be understanding";

function buildTable()
{

document.write("<center>");
document.write("<table border='0' width='100%'>");

document.write("<tr>");
document.write(" <td ID='lhs_question' width='30%' valign='top'
height='70'>" + this.lhs_questions[count] + "</td>");
document.write(" <td width='40%' align='center' valign='top'
height='70'>" + "<IMG SRC='sliderbg.gif' NAME='Slider1RailImg'
ID='Slider1RailImg'>" + "</td>");
document.write(" <td ID='rhs_question' width='30%' valign='top'
height='70'>" + this.rhs_questions[count] + "</td>");
document.write("</tr>");

document.write("<tr><td colspan='3' align='center' valign='top'
height='100'>");
document.write("<input type='button' value='Next'
onclick='next_question(this)' />");
document.write("<SPAN class='invisible'
ID='Slider1ValueText'></SPAN>");
document.write("<SPAN ID='Status'></SPAN></td></tr>");

document.write("</table>");
document.write("</center>");
}

function next_question(button)
{

slider_value[count] = this.mySlider1.getValue(0);

this.count++;

if (this.count < 8)
{
document.getElementById('lhs_question').innerHTML =
this.lhs_questions[count];
document.getElementById('rhs_question').innerHTML =
this.rhs_questions[count];

mySlider1.setValue( (mySlider1.leftValue + mySlider1.rightValue) / 2
);

} else
{
if (button.parentNode &&
button.parentNode.removeChild) {
button.parentNode.removeChild(button);

}
saveIt();
}
}

function saveIt()
{

var str_questions = "";
for (var i=0; i < slider_value.length; i++)
{
str_questions += slider_value[i] + "\n";
}

document.getElementById("Slider1ValueText").innerH TML =
str_questions;
var recipient = "extraemails";
var realname = "SPA Form";
var situation_value = "Social Group";
var url = 'http://website/path/formmail-nms.cgi';
var pars = 'recipient=' + recipient + '&' + 'realname=' + realname
+ '&' + 'Situation=' + situation_value + '&' + 'Name=' + name + '&' +
'Slider Values=' +
document.getElementById('Slider1ValueText').innerH TML;
var myAjax = new Ajax.Updater('Status', url, {method: 'post',
parameters: pars});
}

</script>

</HEAD>

<BODY onLoad="mySlider1.placeSlider()">

<h2 align="center">Social Group</h2>

<p align="center"><img src="pic3.jpg"></p>

<script language="javascript"
type="text/javascript">buildTable();</script>

<SCRIPT>

mySlider1.writeSlider();

</SCRIPT>

</body>
</html>
Sep 10 '05 #10
ASM
Geoff Cox wrote:
On Sat, 10 Sep 2005 18:25:35 +0200, ASM
<st*********************@wanadoo.fr.invalid> wrote:

Anyway : I do not understand why you need a form
to call a page with variables attached ... ?
The code below does this using prototype.js (see function saveIt()
below) but I am trying to use a simple form instead...Can you see how
I can avoid using prototype.js?
I'm very brank about protos
I did try your page but it doesn't load because errors
(I haven't the file 'slider.js' ...)

however I notice :

document.write( htmlArray.join() );

in end of function saveit()

what would you expect that does ?

it writes on same page (in place of what it is)
your form with its only visible submit button ...

try :

var resultSender = document.createElement('DIV');
resultSender.setAttribute('id','results');
resultSender.setAttribute('style','margin-top: 100px');
resultSender.innerHTML = htmlArray.join();
document.body.appendChild(resultSender);
document.getElementById('results').getElementsByTa gName('FORM')[0].style.textAlign='center';

if you want to add this form on same page

function saveIt()
{
well .. here function saveit has changed ... pffoooit !
var str_questions = "";
for (var i=0; i < slider_value.length; i++)
{
str_questions += slider_value[i] + "\n";
}

document.getElementById("Slider1ValueText").innerH TML =
str_questions;
var recipient = "extraemails";
var realname = "SPA Form";
var situation_value = "Social Group";
var url = 'http://website/path/formmail-nms.cgi';
var pars = 'recipient=' + recipient + '&' + 'realname=' + realname
+ '&' + 'Situation=' + situation_value + '&' + 'Name=' + name + '&' +
'Slider Values=' +
document.getElementById('Slider1ValueText').innerH TML;
var myAjax = new Ajax.Updater('Status', url, {method: 'post',
parameters: pars});
}

</script>

</HEAD>

<BODY onLoad="mySlider1.placeSlider()">

<h2 align="center">Social Group</h2>

<p align="center"><img src="pic3.jpg"></p>

<script language="javascript"
type="text/javascript">buildTable();</script>

<SCRIPT>

mySlider1.writeSlider();

</SCRIPT>

</body>
</html>

--
Stephane Moriaux et son [moins] vieux Mac
Sep 10 '05 #11

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:0b********************************@4ax.com...
On 10 Sep 2005 09:03:10 -0700, Lee <RE**************@cox.net> wrote:
If all you're trying to do is to send the value of the str_questions
variable to the formmail script, you can have the form already written
in normal HTML in the page, and simply use Javascript to set the value
of the slidervalues element. You'll need to give your form a name,
such as "hiddenform" :

document.hiddenform.slidervalues.value=str_questio ns;


Lee,

except - after the last question has been answered I want the slider
values in the array to be sent without user action to the
formmail-nms.cgi script so that they can be sent to me via email.


make the last question have the submit functionality.

I think this is dangerous thoughm why would you assume that the user will
answer questions in any order.

I still dont understand your problem.

You create a form on a page and you want to sumbit it, what els eis the
issue ?
Sep 10 '05 #12
On Sat, 10 Sep 2005 21:08:27 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
formmail-nms.cgi script so that they can be sent to me via email.


make the last question have the submit functionality.

I think this is dangerous thoughm why would you assume that the user will
answer questions in any order.

I still dont understand your problem.

You create a form on a page and you want to sumbit it, what els eis the
issue ?


Zoe,

Although at the moment of course I do know the slider values when this
is working correctly the users will be remote from me and will answer
the questions and I will receive their answers by email. Sorry - I
didn't make that clear.

They have no option re the order in which they answer the questions -
the next button takes them though the questions in the order I give...

Cheers

Geoff

Sep 10 '05 #13
My thanks to all for your help and patience !!

I'm sure I have learnt quite a bit ....

Cheers

Geoff
Sep 10 '05 #14

This discussion thread is closed

Replies have been disabled for this discussion.

By using this site, you agree to our Privacy Policy and Terms of Use.