JavaScript/HTML passing info from one form to another

Question

ghosh22 0 Junior Poster in Training

13 Years Ago

Hi..I am a newbie in JavaScript.I have two forms (in two different webpages) all with radio buttons. A user cannot select more than one option from each form. My plan is to pass the user input from both the forms to a perl script which would then query a MySQL db for the output and display it.
Now my question is, is it possible to pass the data from first form to second using GET/POST method in Radio form? Will it be possible to pass both data from first and second form to the Perl code?
My first form page named as index.html page and the second one is named as party_names.html.
The form code I used in the first index.html page is:

<form action="party_names.html" method=post name="Candidate_name" ENCTYPE= text/plain onsubmit="return form_validation(this)">

I have a JavaScript function to validate form data so that it can check whether a radio button is selected after clicking next button to go to next html form page. Please suggest.
Many thanks in advance..

html-css javascript

3 Contributors
17 Replies
211 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by ghosh22

urtrivedi 276 Nearly a Posting Virtuoso

13 Years Ago

Usually I follow like
html1-> submit-> perl(save/fetch database) -> html2 -> submit -> perl (save/fetch)

what you want is
html1-> html2 (store html1 posted values in hidden variable using js) -> submit -> perl(save/fetch database)

In short you need to preserve html1 values in html2's form, using javascript in hidden element, so when you submit html2, it will submit values of both forms to perl script. Make sure you do not use same name of html elements in both forms.

Edited 13 Years Ago by urtrivedi because: n/a

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Why not do both stages on one page?

Initialise with only those form fields showing that are initially relevant.

Make the first submission "faux"; hide/show form fields and controls as required. If necessary perform some ajax at this point to get further data / perform checks etc. server-side.

Make the second submission "real"; submit the entire form.

This would be easier and more efficient than serving a separate php page.

Airshow

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Firstly, stop thinking of it as two forms. You need just one form.

Secondly, to validate, invoke different validation functions at first stage and second stage.

I will try to put a demo together for you but no time right now. Maybe later today.

Airshow

Edited 13 Years Ago by Airshow because: n/a

urtrivedi 276 Nearly a Posting Virtuoso

13 Years Ago

POST will send values separetly and GET method will send values in URL (visible in address bar).
Both method will send data to your perl script.
in php we use $_POST for POST method
and $_GET for GET method

I m not sure about PERL

Edited 13 Years Ago by urtrivedi because: n/a

Airshow 416 WiFi Lounge Lizard

13 Years Ago

ghosh,

urtrivedi will, look after you. I will look in again later today and see what's left to do (if anything).

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ghosh22 0 Junior Poster in Training · Answer 1 · 2011-07-18T10:37:31+00:00

hi Thanks for your reply. But was it a perl code ? Yes you're rite..I want to pass the selection from the user from both forms (which are in two different html pages) to pass in one Perl script to query the db.
One of my friends, told me that method=Post should be given in both forms and it'll works. But he wasn't sure.
Could you please show your method using JavaScript/HTML?
Thanks..

ghosh22 0 Junior Poster in Training · Answer 2 · 2011-07-18T14:52:41+00:00

alrite..I'll try this..I have form validation also..so must not keep anything blank in the two forms..how to acheive this in one page? I had made a JavaScript form_Validation() to do it. But I am not sure how to do this with both forms in one page..any suggestion?

ghosh22 0 Junior Poster in Training · Answer 3 · 2011-07-18T15:11:07+00:00

thanks mate..I'll definitely try rhis out..but still I'd like to ask you, do you think POST method will also serve the purpose of sending the form variables to one perl script?

ghosh22 0 Junior Poster in Training · Answer 4 · 2011-07-18T15:25:28+00:00

ghosh22 0 Junior Poster in Training

13 Years Ago

thanks a lot to both of you!!

ghosh22 0 Junior Poster in Training · Answer 5 · 2011-07-19T01:40:29+00:00

Hi friends..
I tried by keeping both the forms in one page and kept the Radio buttons under the same FORM tag. But the problem here is, the JavaScript functions only validate the first parts of the HTML, not the second part. Here's what I am doing:

<HTML>
<TITLE>Vote</TITLE>
<HEAD>
<script LANGUAGE="JavaScript">
function form_validation(form)
 {
   
ErrorText= "";
  if ((form.name[0].checked==false)  && (form.name[1].checked==false)  && (form.name[2].checked==false)  && (form.name[3].checked==false) && (form.name[4].checked==false) && (form.name[5].checked==false) && (form.name[6].checked==false))
    {
      alert ("Please select from the form");
      return false;
    }
    
    if ((form.name[0].checked==true)  || (form.name[1].checked==true)  || (form.name[2].checked==true)  || (form.name[3].checked==true) || (form.name[4].checked==true) || (form.name[5].checked==true) || (form.name[6].checked==true))
         {
         
          return true;
         }
    
 } 
function formVaild() {


   if ((form.meta[7].checked==false)  && (form.meta[8].checked==false)  && (form.meta[9].checked==false))
  {
   alert ("Please select from the form");
      return false;
    }
  

if ((form.meta[7].checked==true)  || (form.meta[8].checked==true)  || (form.meta[9].checked==true))
  {
   return true;
  }
 }    
</script>
<BODY>




<p style="color:blue">Please fill in the form below to select the desired  name and Submit:</p>

<form action="meta1.html" name="Candidates_name" method=POST onsubmit="return form_validation(this)  ">
<B>Candidates Name</B>:<br>
Men:<br>
<INPUT TYPE="radio"  name="name" value="0" /><i>Mark</i><br/>
<INPUT TYPE="radio"  name="name" value="1" /><i>Joe</i><br/>
<INPUT TYPE="radio"  name="name" value="2" /><i>Gilbert</i><br/>
Women:<br>
<INPUT TYPE="radio"  name="name" value="3" /><i>Laura</i><br/>
<INPUT TYPE="radio"  name="name" value="4" /><i>Edith</i><br/>
<INPUT TYPE="radio"  name="name" value="5" /><i>June</i><br/>
<INPUT TYPE="radio"  name="name" value="6" /><i>Laxmi</i><br/></br>

Parties:<br>
<INPUT TYPE="radio"  name="meta" value="7" /><i>Chief party</i><br/>
<INPUT TYPE="radio"  name="meta" value="7" /><i>Main party</i><br/>

<input type="Submit" value="Submit" >
<input type="reset" value="Reset">

</FORM>
</BODY>
</HTML>

Would you please tell me where am I doing wrong?
Thanks

urtrivedi 276 Nearly a Posting Virtuoso · Answer 6 · 2011-07-19T10:06:13+00:00

You made 2 mistakes
1) you are not calling formvalid function, so I have kept its code in first validate function (no need of 2 functions)
2)you are trying to access meta7, meta8, meta9, actually you have only meta0 and meta1. checkbox value is different and checkbox index is different thing.

check following code

<HTML>
<TITLE>Vote</TITLE>
<HEAD>
<script LANGUAGE="JavaScript">
function form_validation(form)
 {
   
ErrorText= "";
  if ((form.name[0].checked==false)  && (form.name[1].checked==false)  && (form.name[2].checked==false)  && (form.name[3].checked==false) && (form.name

[4].checked==false) && (form.name[5].checked==false) && (form.name[6].checked==false))
    {
      alert ("Please select candidate");
      return false;
    }

if ((form.meta[0].checked==false)  && (form.meta[1].checked==false) )
  {
   alert ("Please select party");
      return false;
    }
  
  
 
 return true;
    
 }
</script>
<BODY>




<p style="color:blue">Please fill in the form below to select the desired  name and Submit:</p>

<form name="Candidates_name" method=POST id='Candidates_name' onSubmit="return form_validation(this);">
<B>Candidates Name</B>:<br>
Men:<br>
<INPUT TYPE="radio"  name="name" value="0" /><i>Mark</i><br/>
<INPUT TYPE="radio"  name="name" value="1" /><i>Joe</i><br/>
<INPUT TYPE="radio"  name="name" value="2" /><i>Gilbert</i><br/>
Women:<br>
<INPUT TYPE="radio"  name="name" value="3" /><i>Laura</i><br/>
<INPUT TYPE="radio"  name="name" value="4" /><i>Edith</i><br/>
<INPUT TYPE="radio"  name="name" value="5" /><i>June</i><br/>
<INPUT TYPE="radio"  name="name" value="6" /><i>Laxmi</i><br/></br>

Parties:<br>
<INPUT TYPE="radio"  name="meta" value="7" /><i>Chief party</i><br/>
<INPUT TYPE="radio"  name="meta" value="8" /><i>Main party</i><br/>

<input type="submit" value="Submit"  >
<input type="reset" value="Reset">

</FORM>
</BODY>
</HTML>

ghosh22 0 Junior Poster in Training · Answer 7 · 2011-07-19T10:26:18+00:00

ghosh22 0 Junior Poster in Training

13 Years Ago

thanks it worked...

ghosh22 0 Junior Poster in Training · Answer 8 · 2011-07-19T10:28:30+00:00

HI I am a newbie..so Would you please tell me what does 'this' mean here?

<form name="Candidates_name" method=POST id='Candidates_name' onSubmit="return form_validation(this);">

How does it differ from (this.form)?

urtrivedi 276 Nearly a Posting Virtuoso · Answer 9 · 2011-07-19T10:49:43+00:00

1) id, name IS JUST for identifaction of form.
2) method may be post or get
3) onsubmit is event it will call js fucntion when form is submitted.
your form_validation function must return value (true/false). if it returns false the form will not submitted.

You may refer to w3schools.com pages, the explain it in very nice manner

ghosh22 0 Junior Poster in Training · Answer 10 · 2011-07-19T10:53:56+00:00

But why does not it work if I put return form_validation(form) instead of return form_validation(this)?
Thanks

urtrivedi 276 Nearly a Posting Virtuoso · Answer 11 · 2011-07-19T10:59:16+00:00

<form name="Candidates_name" method=POST id='Candidates_name' onSubmit="return form_validation(this);">

in above line you pass self element as parameter using this keyword, which you can access in you js function.

<input type=text name=txt1 id=txt1 onblur='myformattext(this)'>

here it will pass txt1 element to function myformattext, when user leaves textbox txt1

this is keyword, and form is not,

ghosh22 0 Junior Poster in Training · Answer 12 · 2011-07-19T11:01:53+00:00

ghosh22 0 Junior Poster in Training

13 Years Ago

ok thanks a lot..