A simple JavaScript/HTML question

Question

ghosh22 0 Junior Poster in Training

13 Years Ago

Hi
I am trying to find the answer of the following. Suppose, I am trying to build a web page to conduct a fictious online Poll and people vote their favourite candidate. Now each voter is allowed to vote only one candidate from any one party. I have made the code with JavaScript and HTML. But the problem is that, after voting the Candidate and pressing Submit, the page should open another new page where the voter must select any one name of the party to which the candidate belongs and Submit again. But my problem is that, I am trying to open that new page in the place of the existing page but its only opening in a new window. Putting '_self' doesn't work! (I am using radio buttons. It also needs form vaildation so the voter must vote!) What went wrong?

<HTML>
<TITLE>Votes</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 window_open() {
  
  window.open("party_names.html","_self");
   
 }    
</script>
<BODY>

<H3 style="color:green"><CENTER>Welcome to Voting Page</CENTER></H3>

<p>This is the website for Voting your favourite candidate<br/>
and the respective Party</p>

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

<FORM name="Candidate_name" >
<B>Candidates:</B>:<br>
First set:<br>
<INPUT TYPE="radio"  name="name" value="name" /><i>Bob</i><br/>
<INPUT TYPE="radio"  name="name" value="name" /><i>Mary</i><br/>
<INPUT TYPE="radio"  name="name" value="name" /><i>John</i><br/>
Second set:<br>
<INPUT TYPE="radio"  name="name" value="name" /><i>Joe</i><br/>
<INPUT TYPE="radio"  name="name" value="name" /><i>Gilbert</i><br/>
<INPUT TYPE="radio"  name="name" value="name" /><i>Frank</i><br/>
<INPUT TYPE="radio"  name="name" value="name" /><i>Sudhir</i><br/></br>

<input type="Submit" value="Submit" onClick="return form_validation(this.form) && window_open();">
<input type="reset" value="Reset">

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

Please use any html file of yours as party_names.html. If you omit "_self" from it, then it'll work properly. But that opens a new window for party_names.html. But I want it to open the new page in the same window carrying the data selected from both pages in order to process in the server.
Please help and EXPLAIN my mistake as I am new.
Thanks

html-css javascript

2 Contributors
15 Replies
211 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by ghosh22

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Ghosh, window.open() will always open a new window, pretty well regardless of parameters (providing any variables exist and are within scope).

You probably need one of the following:-

location = url;//replaces the current page with the page specified by url, and make a new entry in the browser's History object.
location.href = url;//exactly the same as location = url
location.replace(url);//same as location = url, but overwrites the current entry in the browser's History object.

Use location.replace(url) if you want the browser's back button NOT to return to the replaced page.

The need to use location.replace(url) is greatly reduced these days due to widespread support of xmlHttpRequest (AJAX).

Airshow

Edited 13 Years Ago by Airshow because: n/a

Airshow 416 WiFi Lounge Lizard

13 Years Ago

What does your new line 23 look like now?

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Doh! I just looked at the HTML properly and can see what you are trying to do.

Line 23 is irrelevant. The whole function can be deleted.

Change lines 36 and 48 to:-

<form name="Candidate_name" onsubmit="return form_validation(this.form);">
...
<input type="Submit" value="Submit">

Airshow

Edited 13 Years Ago by Airshow because: n/a

Airshow 416 WiFi Lounge Lizard

13 Years Ago

ok ....

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-15T10:39:39+00:00

Hi
Thanks for your reply. I tried the above mentioned method. But still it's not working. Any suggestion?

ghosh22 0 Junior Poster in Training · Answer 2 · 2011-07-15T10:48:38+00:00

Hi Thanks for your reply. Line 23 looks like the following:

location.replace(party_names.html);

Tried also:

location=party_names.html;

Not working..

ghosh22 0 Junior Poster in Training · Answer 3 · 2011-07-15T11:00:49+00:00

Sorry..its not working..I deleted the funtion and then modified those lines..still not working..even the alert box is not coming now!! Could you please check it in your browser?
Thanks

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 4 · 2011-07-15T11:22:48+00:00

Try this. I made a couple of changes and added a doctype at the top.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<title>votes</title>
<head>
<script>
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 window_open() {
	window.open("party_names.html","_self");
}    
*/
</script>
<body>

<h3 style="color:green"><center>Welcome to Voting Page</center></h3>

<p>This is the website for Voting your favourite candidate<br/>
and the respective Party</p>

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

<form action="party_names.html" name="Candidate_name" onsubmit="return form_validation(this)">
<b>Candidates:</b>:<br>
First set:<br>
<input type="radio"  name="name" value="name" /><i>Bob</i><br/>
<input type="radio"  name="name" value="name" /><i>Mary</i><br/>
<input type="radio"  name="name" value="name" /><i>John</i><br/>
Second set:<br>
<input type="radio"  name="name" value="name" /><i>Joe</i><br/>
<input type="radio"  name="name" value="name" /><i>Gilbert</i><br/>
<input type="radio"  name="name" value="name" /><i>Frank</i><br/>
<input type="radio"  name="name" value="name" /><i>Sudhir</i><br/></br>

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

</form>
</body>
</html>

ghosh22 0 Junior Poster in Training · Answer 5 · 2011-07-15T11:35:14+00:00

Hi thanks..it works..Would you please tell me where my mistake was? I am new so it'd help me to learn.
Another thing is,what is the meaning of these two lines: DOCTYPE and www.w3.org..?
Why should we use it? Should we use it in every HTML document?
And what is the meaning of /* ?
And lastly and importantly..I would like to use a CGI script with this form and if I put the script in form action section to interact with MySQL db, then will it work ?

<form action="party_names.html" name="Candidate_name" onsubmit="return form_validation(this)">

Many thanks..

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 6 · 2011-07-15T12:01:57+00:00

Every document should have a doctype though browsers make very good assumptions when it is missing. Google w3c doctype for more information.

/*....*/ is just a comment block in javascript. It's a way to suppress code without actually deleting it.

My last changes were to give the form an action (the url to which the form submits) and to change form_validation(this.form) to form_validation(this) .

<form action="party_names.html" name="Candidate_name" onsubmit="return form_validation(this)">

Yes, by changing action="party_names.html" to action="mycgiscript.cgi" the form will be submitted to your CGI script (or php or jsp or whatever you use server-side).

(I'm not too hot on CGI, so maybe post any CGI questions to another forum)

Airshow

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 7 · 2011-07-15T12:04:05+00:00

Airshow 416 WiFi Lounge Lizard

13 Years Ago

I must get packing. I'm on a flight in a few hours.

ghosh22 0 Junior Poster in Training · Answer 8 · 2011-07-15T12:06:14+00:00

Hi AirShow..thanks a lot for your help..have a nice trip..:)

ghosh22 0 Junior Poster in Training · Answer 9 · 2011-07-15T12:13:05+00:00

Sorry AirShow..one more thing..what's the difference between

form_validation(this.form)

and

form_validation(this)

sorry for this silly question..

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 10 · 2011-07-16T02:49:54+00:00

OK, now 2 car rides, one train and one flight away from home, I'll try to answer this:

In event handlers, this refers to the object on which the event fires.

<form> tag: in onxxx="....", this refers to the form node in the DOM.
<input> tag within the form: in onxxx="....", this refers to the input node in the DOM. this.form refers to the form node, in which the input node resides.

Hence after moving your onclick="..." from an input (button) tag to its form tag (and changing it to onsubmit), I needed to change this.form to this in order to maintain the reference to the form node.

Airshow

ghosh22 0 Junior Poster in Training · Answer 11 · 2011-07-16T15:09:49+00:00

ghosh22 0 Junior Poster in Training

13 Years Ago

thanks a lot