SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to inactivate a form field based on a separate checkbox

    Hi Folks:

    I am working on a form (regular .html page). Here is a picture of the section I need help with:



    The way it works now: only the checkboxes that are checked get submitted, while all the "Quantity" fields get submitted.

    I would like to have only the quantity fields be submitted that also have the corresponding checkboxes checked. I tried using the idea/code from the "Simply Javascript" book on de-activating a form field. I couldn't get it to work. I really just need the field to not post if it is blank. Here is what a post looks like now:



    I would like the empty/blank items (the last 3) to not show at all. Of course i tried it without an initial value of 0.

    Here is the actual code if that helps:
    Code:
     <table width="469" border="0" cellspacing="0">
          <tr>
          <th colspan="3" bordercolor="#FFFFFF" bgcolor="#CECF9C" class="Padding1">Materials *            </tr>
          <tr>
            <td width="39" bordercolor="#FFFFFF" bgcolor="#FAFAD2" class="Padding1"><label><span id="sprycheckbox1"><span class="checkboxRequiredMsg">Please make a selection.</span></span></label></td>
            
            <td width="318" bordercolor="#FFFFFF" bgcolor="#FAFAD2" class="Padding1"><label>Item</label><br></td>
            <td width="100" bordercolor="#FFFFFF" bgcolor="#FAFAD2" class="Padding1">Quantity</td>
          </tr>
          <tr>
            <td bordercolor="#FFFFFF" bgcolor="#FAFAD2" class="Padding1">
            <input name="MHV Business Card" type="checkbox" id="MHV Business Card" value="Order Placed"></td>
            <td bordercolor="#FFFFFF" bgcolor="#FAFAD2" class="Padding1">MHV Business Card</td>
            <td bordercolor="#FFFFFF" bgcolor="#FAFAD2" class="Padding1">
              <input name="Business Card Quantity" type="text" id="Business Card Quantity" value="0" size="10">
            </td>
          </tr>
          <tr>
            <td bordercolor="#FFFFFF" bgcolor="#FAFAD2" class="Padding1">
            <input name="Pocket Card" type="checkbox" id="Pocket Card" value="Order Placed"></td>
            <td bordercolor="#FFFFFF" bgcolor="#FAFAD2" class="Padding1">Pocket Card - Partnership between Veterans/Health Care Providers</td>
            <td bordercolor="#FFFFFF" bgcolor="#FAFAD2" class="Padding1"><input name="Pocket Card Quantity" type="text" id="Pocket Card Quantity" value="0" size="10"></td>
          </tr>
          <tr>
            <td bordercolor="#FFFFFF" bgcolor="#FAFAD2" class="Padding1">
            <input name="Bookmark" type="checkbox" id="Bookmark" value="Order Placed"></td>
            <td bordercolor="#FFFFFF" bgcolor="#FAFAD2" class="Padding1">Bookmark - It's All about You!</td>
            <td bordercolor="#FFFFFF" bgcolor="#FAFAD2" class="Padding1"><input name="Bookmark Quantity" type="text" id="Quatity" value="0" size="10"></td>
          </tr>
          <tr>
            <td bordercolor="#FFFFFF" bgcolor="#FAFAD2" class="Padding1">
            <input name="Fact Sheet" type="checkbox" id="Fact Sheet" value="Order Placed"></td>
            <td bordercolor="#FFFFFF" bgcolor="#FAFAD2" class="Padding1">Fact Sheet - MHV, A Veteran's Personal Health Record</td>
            <td bordercolor="#FFFFFF" bgcolor="#FAFAD2" class="Padding1"><input name="Fact Sheet Quantity" type="text" id="Fact Sheet Quantity" value="0" size="10"></td>
          </tr>
          <tr>
            <td bordercolor="#FFFFFF" bgcolor="#FAFAD2" class="Padding1">
            <input name="Online Prescription Brochure" type="checkbox" id="Online Prescription Brochure" value="Order Placed"></td>
            <td bordercolor="#FFFFFF" bgcolor="#FAFAD2" class="Padding1">Online Prescription Refill Brochure</td>
            <td bordercolor="#FFFFFF" bgcolor="#FAFAD2" class="Padding1">
            <input name="Prescription Brochure Quanitity" type="text" id="Online Prescription Brochure Quanitity" value="0" size="10"></td>
          </tr>
          <tr>
            <td bordercolor="#FFFFFF" bgcolor="#FAFAD2" class="Padding1">
            <input name="All About You Brochure" type="checkbox" id="All About You Brochure" value="Order Placed"></td>
            <td bordercolor="#FFFFFF" bgcolor="#FAFAD2" class="Padding1">It's All About You Brochure</td>
            <td bordercolor="#FFFFFF" bgcolor="#FAFAD2" class="Padding1">
            <input name="About You Brochure Quantity" type="text" id="All About You Brochure Quantity" value="0" size="10"></td>
          </tr>
        </table>
    Thanks for any help.
    Matt

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You shouldn't need a checkbox at all.
    Or in other words, what purpose is there to having a checkbox?
    Issues with that are likely to be
    - If it's ticked then an order of 0 will be accepted
    - if it's not ticked then an entered quantity won't be sent through.

    Why not just ignore any quantity values of 0 from the server-side. Then it will work if javascript is turned off too.

    Quote Originally Posted by cwebpro View Post
    I really just need the field to not post if it is blank.
    You can use javascript to improve on things then, so that when the quantity is entered, it's validated and the name attribute is removed if it's invalid.

    Code HTML4Strict:
    <input name="Business Card Quantity" type="text" id="Business Card Quantity" value="0" size="10" onchange="validateNotZero(this)">

    The form submit could do a similar script that checks all of the entries.

    Code HTML4Strict:
    <form method="post" action="processorder.php" onsubmit="validateAllNotZero()">

    This way the form works both with and without javascript. Using the server-side as the primary validator, and javscript to improve the user experience.


Bookmarks

Posting Permissions

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