create form on same page?

G

Geoff Cox

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
 
G

Geoff Cox

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

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
 
A

ASM

Geoff said:
Hello,

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

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>
 
A

ASM

Geoff said:
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?
Click to expand...

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>
 
G

Geoff Cox

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
 
L

Lee

Geoff Cox said:
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?
Click to expand...

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_questions;
 
A

ASM

Geoff said:
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.
Click to expand...

I did understand that and gave 2 issues

one :

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
 
G

Geoff Cox

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_questions;
Click to expand...

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').innerHTML
=''+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 + "\n";
}

document.getElementById("Slider1ValueText").innerHTML =
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').innerHTML;
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>
 
G

Geoff Cox

Anyway : I do not understand why you need a form
to call a page with variables attached ... ?
Click to expand...

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').innerHTML
=''+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 + "\n";
}

document.getElementById("Slider1ValueText").innerHTML =
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').innerHTML;
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>
 
A

ASM

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?
Click to expand...

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').getElementsByTagName('FORM')[0].style.textAlign='center';

if you want to add this form on same page

function saveIt()
{
Click to expand...

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

document.getElementById("Slider1ValueText").innerHTML =
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').innerHTML;
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>
Click to expand...
 
G

Geoff Cox

My thanks to all for your help and patience !!

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

Cheers

Geoff
 

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

form problem? 19
How to treat an input data as variable? 4
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated 1
Should this form work? 4
Registration Form 7
Registration form 13
how get response on same page? 0
action_page.php form 2

Members online

No members online now.
Total: 29 (members: 3, guests: 26)
Robots: 98

Forum statistics

Threads
473,780
Messages
2,569,608
Members
45,250
Latest member
Charlesreero

Latest Threads

Top