Pop up a form instead of a alert msg

countdrak · May 25, 2006

Here is what I need to do and cant!

I have a form with two form fields. One is a drop down box and the other is text field. Now what I do is , when a user picks a value from the drop down select box , I pop up a msg "Please enter Contact Name , & Phone & address.Hit ok". The user at this point is suppose to enter the information in the text area. But the problem is people forget and the form is submitted.

What I want it to do is - Instead of popping up a message , it should pop up a form. With form fields and only when the form fields are filled the OK button should work. Once the form fields are filled and the user hits ok it should copy those values in my text area below.

IS this very hard to do? I cant really find much information on it.

kaht · May 25, 2006

It sounds like you just need a basic form validation routine instead of popping up the form elements (which they could just close). Instead run a basic validation routine to alert the user if they have neglected to fill out any of the appropriate data (I'd suggest rerunning a similar process on the server as well in case the user has javascript disabled). Here's a simple example:

Code:

<script type="text/javascript">

function validateForm(frm) {
   if (frm.elements["blahName"].value.length == 0) {
      alert("You must supply a name before submitting the form");
      frm.elements["blahName"].focus();
      return false;
   }
   if (frm.elements["blahPhone"].value.length == 0) {
      alert("You must supply a phone number before submitting the form");
      frm.elements["blahPhone"].focus();
      return false;
   }
   if (frm.elements["blahAddress"].value.length == 0) {
      alert("You must supply an address before submitting the form");
      frm.elements["blahAddress"].focus();
      return false;
   }
   //validation has passed, return true
   return true;
}

</script>

<body>
<form id="blahForm" action="" method="post" onsubmit="return validateForm(this)">
   <select name="blahSelect">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
   </select>
   <br />
   <input type="text" name="blahName" /> Name
   <br />
   <input type="text" name="blahPhone" /> Phone
   <br />
   <input type="text" name="blahAddress" /> Address
   <br />
   <input type="submit" value="Submit Form" />
</form>
</body>

-kaht

[small]How spicy would you like your chang sauce? Oh man... I have no idea what's goin' on right now...[/small]
[banghead]

countdrak · May 25, 2006

Thanks for the reply.

Yeah I understand I could have the fields in the form.But I cant. It has to be in the popup like i explained earlier. ITs a user requirment and I cant change it.

Is there a way of doing it?

ggriffit · May 25, 2006

you can open a new window with the form you want and then use the DOM (opener. stuff) to populate your form.

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005

http://www.greggriffiths.org/livelink/

countdrak · May 25, 2006

I can do the pop up and I can do the form validation.

Two problems I am having are.

-- How do I send the form values to the text field in my parent form? I don't know how that works?

-- How do I prevent the user from close the pop-up so they just dont close it by clicking the X on the top right and submit the form?

ggriffit · May 25, 2006

countdrak,
You cause use the OPENER object from the new window to reference the window that opened it, i.e. :

opener.document.myForm.myField.value="Hello World"

would set the value of the field called myField in the form called myForm in the window that opened the current one. See

http://www.google.co.uk/search?q=javascript+opener&start=0&ie=utf-8&oe=utf-8

for more info on this approach.

As for the second part, you would need to build in some validation to ensure that the fields were populated or set a hidden field to true, for example, when they complete the popup form and only allow the submit if that field is true when they submit the form.

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005

http://www.greggriffiths.org/livelink/

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Pop up a form instead of a alert msg

countdrak

Programmer

kaht

Programmer

countdrak

Programmer

ggriffit

Programmer

countdrak

Programmer

ggriffit

Programmer

Similar threads

Part and Inventory Search

Sponsor