Required forms with a twist

**carlemil** · 08-22-2012 07:53 AM

Hello. This is my first post! Little basic first: I am very new in the web-business, having taken a few courses and being mildly interested in it for the past couple of years - I recently got a job that requires me to do things I don't neccessarily know from before (Dont' we all?). I know basic HTML, CSS and some ASP. Even a little ActionScript!

So now, I have been asked to add some requirement-functions to a pretty simple HTML form. I cannot link you to the site as it's classified, but I can try to explain what I need.

I was told this would be "easy" to do in javascript or jquery, but I am clueless so I came here. Please point me in the right direction

I have a form, and 2 of the sections are as following:

1:

Checkbox 1, Checkbox 2, Checkbox 3, Checkbox 4, Text input

Where the customer picks either one of the checkboxes, or multiple - but if none are selected, the text input box has to be required.

2:

Radio 1 (yes), Radio 2 (no), Text input(if yes, describe)

So Radio 1 or 2 has to be requried, AND if radio 1 (yes) is selected the text input box also has to be required.

**vwphillips** · 08-22-2012 11:17 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Verify(frm){
 for (var mess=[],pass=false,z0=0;z0<frm['four'].length;z0++){
  if (frm['four'][z0].checked){
   pass=true;
  }
 }
 if (!pass&&!frm['fourtext'].value.replace(/\s/g,'')){
  mess.push('check one '+frm['four'][0].title);
  mess.push('or complete '+frm['fourtext'].title);
 }
 for (pass=false,z0=0;z0<frm['five'].length;z0++){
  if (frm['five'][z0].checked){
   pass=true;
   if (frm['five'][z0].value=='yes'&&!frm['fivetext'].value.replace(/\s/g,'')){
    mess.push('complete '+frm['fivetext'].title);
   }
  }
 }
 if (!pass){
  mess.push('check one '+frm['five'][0].title);
 }
 if (mess[0]){
  alert(mess.join('\n'));
  return false;
 }
 return true;
}
/*]]>*/
</script></head>

<body>
<form>
<input title="checkox" type="checkbox" name="four" />
<input type="checkbox" name="four" />
<input type="checkbox" name="four" />
<input type="checkbox" name="four" />
<input title="first Text Box" name="fourtext" />
<br />
<input title="radio" type="radio" name="five" value="yes" />
<input type="radio" name="five" value="no" />
<input  title="second Text Box" name="fivetext" />
<br />
<input type="button" name="" value="Test" onmouseup="Verify(this.form)"/>
</form>

</body>

</html>

**carlemil** · 08-23-2012 02:18 AM

Thanks a lot!

There is one more thing though, you specify the functions to the input name. The input names I already have are all different. So I wonder, can I change then without that screwing up the sending of data at submit? Or is it the input ID that does this.

If it is the name, then would there be a way to edit the script to allow the same function for names four1, four2, four3, four4 and five1, five2?

Hope you understand what I mean, hard to explain when i'm not a pro with the terminology.

**vwphillips** · 08-23-2012 02:38 AM

change the names to your own requirement

**carlemil** · 08-23-2012 02:41 AM

Originally Posted by vwphillips

change the names to your own requirement

Will I not have to define something more/else in the script then? If the checkboxes are suddenly four1, four2, four3 and so on.

**vwphillips** · 08-23-2012 03:53 AM

change the form names in the script as well

**carlemil** · 08-23-2012 04:03 AM

Originally Posted by vwphillips

change the form names in the script as well

Apologies if it's just me being stupid for not understanding,

but when you helped me with the original script, there's only "four" defined for checkboxes and "fourtext" for the text (same goes for five)

Wouldn't there have to be something more in the script when the checkboxes in four have different names/ID's from eachother (as in first checkbox is four1, second checkbox is four2 etc.)

Any chance you can help me with the script as this is hard to understand when I don't know the language

**vwphillips** · 08-24-2012 03:53 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Verify(frm){
 for (var mess=[],pass=false,z0=1;frm['four'+z0];z0++){
  if (frm['four'+z0].checked){
   pass=true;
  }
 }
 if (!pass&&!frm['fourtext'].value.replace(/\s/g,'')){
  mess.push('check one '+frm['four1'].title);
  mess.push('or complete '+frm['fourtext'].title);
 }
 for (pass=false,z0=0;z0<frm['five'].length;z0++){
  if (frm['five'][z0].checked){
   pass=true;
   if (frm['five'][z0].value=='yes'&&!frm['fivetext'].value.replace(/\s/g,'')){
    mess.push('complete '+frm['fivetext'].title);
   }
  }
 }
 if (!pass){
  mess.push('check one '+frm['five'][0].title);
 }
 if (mess[0]){
  alert(mess.join('\n'));
  return false;
 }
 return true;
}
/*]]>*/
</script></head>

<body>
<form>
<input title="checkox" type="checkbox" name="four1" />
<input type="checkbox" name="four2" />
<input type="checkbox" name="four3" />
<input type="checkbox" name="four4" />
<input title="first Text Box" name="fourtext" />
<br />
<input title="radio" type="radio" name="five" value="yes" />
<input type="radio" name="five" value="no" />
<input  title="second Text Box" name="fivetext" />
<br />
<input type="button" name="" value="Test" onmouseup="Verify(this.form)"/>
</form>

</body>

</html>

**carlemil** · 10-17-2012 03:43 AM

Reviving this as I need some more help with this! Thanks a bunch for the previous assistance btw, works great. You'd think I might learn something from it but I barely understand the code to adapt it into what I am going to ask next:

I have to add something to this page/form. It's basicly a yes/no question but the answering has to be done by checkboxes, not radio buttons as I can't get that to work with writing the form data to PDF as radio, only as checkboxes. So to check one has to be required!

So,

Code:

<label>Do you agree to some marketing thing bla bla bla</label>

<input value="yes" type="checkbox" name="marketing_yes" id="marketing_yes" />
<label for="marketing_yes">Yes</label>

<input value="no" type="checkbox" name="marketing_no" id="marketing_no" />
<label for="marketing_no">No</label>

Appreciate the help <3

**carlemil** · 10-29-2012 03:45 AM

Bump, someone please help. I'm desperate!

**ReFreezed** · 10-29-2012 04:26 PM

Here's something very simple that'll make the checkboxes act like radio buttons:

Code:

<label>Do you agree to some marketing thing bla bla bla</label>


<input value="yes" type="checkbox" name="marketing_yes" id="marketing_yes" onclick="updateRadioCheckboxes(this);" />
<label for="marketing_yes">Yes</label>


<input value="no" type="checkbox" name="marketing_no" id="marketing_no" onclick="updateRadioCheckboxes(this);" />
<label for="marketing_no">No</label>

(I just added the onclick attribute.) And the JavaScript:

Code:

function updateRadioCheckboxes(checkbox) {
	var form = checkbox.form;
	if (checkbox == form.marketing_yes) {
		form.marketing_no.checked = false;
	}
	else if (checkbox == form.marketing_no) {
		form.marketing_yes.checked = false;
	}
	checkbox.checked = true
}

Even for a beginner I think this is pretty easy to understand so I won't bother explaining more. ;)

**bundat** · 10-29-2012 04:43 PM

It's basicly a yes/no question but the answering has to be done by checkboxes, not radio buttons as I can't get that to work with writing the form data to PDF as radio, only as checkboxes.

I think this is the real problem you need to resolve (i.e. why won't it work using radio) instead of forcing to use checkboxes as radio buttons (which is not their purpose).

It would be nice if you can describe the process of "writing the form data to PDF" that you are using, and getting help with getting radios to work from there.

**carlemil** · 10-31-2012 07:17 AM

Originally Posted by bundat

I think this is the real problem you need to resolve (i.e. why won't it work using radio) instead of forcing to use checkboxes as radio buttons (which is not their purpose).

It would be nice if you can describe the process of "writing the form data to PDF" that you are using, and getting help with getting radios to work from there.

That process doesn't happen inhouse, so I don't know why it doesn't work actually. I am just filling in this position for a year (and I lack so much knowledge, lucky I even got the job lol) and those are the instructions I got from the person I am filling in for. Radio buttons won't work, that's all I know. I could try to prove them otherwise but I wouldn't even know where to start! Whenever the code has to be updated it is to be mailed to some guy at some company who does most of the back-end stuff for this site, i.e. making the information in these forms into a PDF document.

Originally Posted by refreezed

Here's something very simple that'll make the checkboxes act like radio buttons:

Code:

some pro code

Even for a beginner I think this is pretty easy to understand so I won't bother explaining more.

Thank you sir, that worked perfectly! Now all I need is to make that required as well, in the same style as the rest of the form (see above posts in this thread) Anyone?

**carlemil** · 11-06-2012 06:41 AM

Anyone, a function to make the checkbox-part mentioned in last posts, required? Pleeease help

**vwphillips** · 11-06-2012 10:15 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Verify(frm){
 for (var mess=[],pass=false,z0=1;frm['four'+z0];z0++){
  if (frm['four'+z0].checked){
   pass=true;
  }
 }
 if (!pass&&!frm['fourtext'].value.replace(/\s/g,'')){
  mess.push('check one '+frm['four1'].title);
  mess.push('or complete '+frm['fourtext'].title);
 }
 for (pass=false,z0=0;z0<frm['five'].length;z0++){
  if (frm['five'][z0].checked){
   pass=true;
   if (frm['five'][z0].value=='yes'&&!frm['fivetext'].value.replace(/\s/g,'')){
    mess.push('complete '+frm['fivetext'].title);
   }
  }
 }
 if (!pass){
  mess.push('check one '+frm['five'][0].title);
 }
 if (!frm['marketing_yes'].checked&&!frm['marketing_yes'].checked){
  mess.push('Check One '+frm['marketing_yes'].title);
 }
 if (mess[0]){
  alert(mess.join('\n'));
  return false;
 }
 return true;
}

function updateRadioCheckboxes(cb,id){
 if (cb.checked){
  document.getElementById(id).checked=false;
 }
}

/*]]>*/
</script></head>

<body>
<form>
<input title="checkox" type="checkbox" name="four1" />
<input type="checkbox" name="four2" />
<input type="checkbox" name="four3" />
<input type="checkbox" name="four4" />
<input title="first Text Box" name="fourtext" />
<br />
<input title="radio" type="radio" name="five" value="yes" />
<input type="radio" name="five" value="no" />
<input  title="second Text Box" name="fivetext" />
<br />
<label>Do you agree to some marketing thing bla bla bla</label>


<input title="marketing"value="yes" type="checkbox" name="marketing_yes" id="marketing_yes" onclick="updateRadioCheckboxes(this,'marketing_no');" />
<label for="marketing_yes">Yes</label>


<input value="no" type="checkbox" name="marketing_no" id="marketing_no" onclick="updateRadioCheckboxes(this,'marketing_yes');" />
<label for="marketing_no">No</label>

<br />
<br />
<input type="button" name="" value="Test" onmouseup="Verify(this.form)"/>
</form>

</body>

</html>

Thread: Required forms with a twist

Thread Tools

Display

Required forms with a twist

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions