www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: Required forms with a twist

  1. #1
    Join Date
    Aug 2012
    Posts
    9

    Required forms with a twist

    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.

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,670
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Aug 2012
    Posts
    9
    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.

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,670
    change the names to your own requirement
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Aug 2012
    Posts
    9
    Quote Originally Posted by vwphillips View Post
    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.

  6. #6
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,670
    change the form names in the script as well
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. #7
    Join Date
    Aug 2012
    Posts
    9
    Quote Originally Posted by vwphillips View Post
    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

  8. #8
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,670
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  9. #9
    Join Date
    Aug 2012
    Posts
    9
    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

  10. #10
    Join Date
    Aug 2012
    Posts
    9
    Bump, someone please help. I'm desperate!

  11. #11
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    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. ;)

  12. #12
    Join Date
    Oct 2012
    Posts
    9
    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.

  13. #13
    Join Date
    Aug 2012
    Posts
    9
    Quote Originally Posted by bundat View Post
    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.


    Quote Originally Posted by refreezed View Post
    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?

  14. #14
    Join Date
    Aug 2012
    Posts
    9
    Anyone, a function to make the checkbox-part mentioned in last posts, required? Pleeease help

  15. #15
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,670
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles