www.webdeveloper.com
Results 1 to 3 of 3

Thread: How to disable Add/Delete buttons for a selection

  1. #1
    Join Date
    May 2012
    Posts
    7

    How to disable Add/Delete buttons for a selection

    See attachment for picture of form.

    The options for the select box are:

    Code:
    10=Individual - $10
    15=Family - $15
    100=Patron - $100
    300=Patron King - $300
    500=Patron Master - $500
    1000=Patron Grandmaster - $1000
    The html code for the rest of the form is:

    Code:
    <INPUT type="button" value="Add Member" onclick="addRow('dataTable')" />
     
    <INPUT type="button" value="Delete Member" onclick="deleteRow('dataTable')" />
     
    <TABLE id="dataTable" width="650px" cellspacing=5>
      <TH>
        <TD>&nbsp; </TD>
        <TD>First Name </TD>
        <TD>Last Name </TD>
        <TD>Chess Rating </TD>
        </TH>
      <TR>
        <TD><INPUT type="checkbox" name="chk"/></TD>
        <TD>&nbsp; </TD>
        <TD> <input type="text" name="mbr_info[][first_name]"/></TD>
        <TD> <input type="text" name="mbr_info[][last_name]"/></TD>
        <TD> <input type="text" name="mbr_info[][rating]"/></TD>
      </TR>
    </TABLE>
    The javascript to process the form is:

    Code:
            function addRow(tableID) {
     
                var table = document.getElementById(tableID);
     
                var rowCount = table.rows.length;
                var row = table.insertRow(rowCount);
     
                var cell1 = row.insertCell(0);
                var element1 = document.createElement("input");
                element1.type = "checkbox";
                cell1.appendChild(element1);
     
                var cell2 = row.insertCell(1);
                cell2.innerHTML = "";
     
                var cell3 = row.insertCell(2);
                var element2 = document.createElement("input");
                element2.type = "text";
                element2.name="mbr_info[][first_name]";
                cell3.appendChild(element2);
    
                var cell4 = row.insertCell(3);
                var element3 = document.createElement("input");
                element3.type = "text";
                element3.name="mbr_info[][last_name]";
                cell4.appendChild(element3);
    
                var cell5 = row.insertCell(4);
                var element4 = document.createElement("input");
                element4.type = "text";
                element4.name="mbr_info[][rating]";
                cell5.appendChild(element4);
     
            }
     
            function deleteRow(tableID) {
                try {
                var table = document.getElementById(tableID);
                var rowCount = table.rows.length;
     
                for(var i=0; i<rowCount; i++) {
                    var row = table.rows[i];
                    var chkbox = row.cells[0].childNodes[0];
                    if(null != chkbox && true == chkbox.checked) {
                        table.deleteRow(i);
                        rowCount--;
                        i--;
                    }
     
                }
                }catch(e) {
                    alert(e);
                }
            }
    Hope this is enough info.

    What I would like to accomplish is that the Add/Delete buttons be disabled by default when the user visits the page. They remain disabled if the user selects the "Individual Membership" option, and are enabled for all other options.

    Thank you.
    Attached Images Attached Images

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,688
    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 addRow(tableID) {
    
                var table = document.getElementById(tableID);
    
                var rowCount = table.rows.length;
                var row = table.insertRow(rowCount);
    
                var cell1 = row.insertCell(0);
                var element1 = document.createElement("input");
                element1.type = "checkbox";
                cell1.appendChild(element1);
    
                var cell2 = row.insertCell(1);
                cell2.innerHTML = "";
    
                var cell3 = row.insertCell(2);
                var element2 = document.createElement("input");
                element2.type = "text";
                element2.name="mbr_info[][first_name]";
                cell3.appendChild(element2);
    
                var cell4 = row.insertCell(3);
                var element3 = document.createElement("input");
                element3.type = "text";
                element3.name="mbr_info[][last_name]";
                cell4.appendChild(element3);
    
                var cell5 = row.insertCell(4);
                var element4 = document.createElement("input");
                element4.type = "text";
                element4.name="mbr_info[][rating]";
                cell5.appendChild(element4);
    
            }
    
            function deleteRow(tableID) {
                try {
                var table = document.getElementById(tableID);
                var rowCount = table.rows.length;
    
                for(var i=0; i<rowCount; i++) {
                    var row = table.rows[i];
                    var chkbox = row.cells[0].childNodes[0];
                    if(null != chkbox && true == chkbox.checked) {
                        table.deleteRow(i);
                        rowCount--;
                        i--;
                    }
    
                }
                }catch(e) {
                    alert(e);
                }
            }
    
    function Disable(s,d1,d2){
     var frm=s.form;
     frm[d1].disabled='disabled';
     frm[d2].disabled='disabled';
     if (s.value&&s.value>10){
      frm[d1].removeAttribute('disabled');
      frm[d2].removeAttribute('disabled');
     }
    }
    
    
            /*]]>*/
    </script></head>
    
    <body>
    <form>
    <select onchange="Disable(this,'add','delete');" >
    <option value="" >Membership Type</option>
    <option value="10" >Individual - $10</option>
    <option value="15" >Family - $15</option>
    <option value="100" >Patron King - $300</option>
    <option value="300" >Patron Master - $500</option>
    <option value="500" >Patron Grandmaster - $1000</option>
    </select>
    <INPUT name="add" disabled="disabled" type="button" value="Add Member" onclick="addRow('dataTable')" />
    
    <INPUT name="delete" disabled="disabled" type="button" value="Delete Member" onclick="deleteRow('dataTable')" />
    
    <TABLE id="dataTable" width="650px" cellspacing=5>
      <TH>
        <TD>&nbsp; </TD>
        <TD>First Name </TD>
        <TD>Last Name </TD>
        <TD>Chess Rating </TD>
        </TH>
      <TR>
        <TD><INPUT type="checkbox" name="chk"/></TD>
        <TD>&nbsp; </TD>
        <TD> <input type="text" name="mbr_info[][first_name]"/></TD>
        <TD> <input type="text" name="mbr_info[][last_name]"/></TD>
        <TD> <input type="text" name="mbr_info[][rating]"/></TD>
      </TR>
    </TABLE>
    </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
    May 2012
    Posts
    7
    Thanks for your reply. I am using Chronoforms and cannot add the following to the select element
    Code:
    <select onchange="Disable(this,'add','delete');" >
    It was suggested I use the following JS code instead. "membership" is the id of the selection box.
    Code:
    window.addEvent('domready', function() {
      $('membership').addEvent('change', Disable(this, 'add', 'delete'));
    });
    I have tried this and the buttons are disabled but the will not enable regardless of the selection made. I've tried various things but can't get the hang of it.

    Here is some additional information about the form that might help:
    The id for the selection box is:
    Code:
    <select id="membership" class=" validate['required']" name="membership" title="" size="1">
    The id for the Add/Remove Members and adding rows custom html code is 'personal_info'. The custom code for the Add/Delete Members button is:
    Code:
    <INPUT name="add" disabled="disabled" id="add" type="button" value="Add Member" onclick="addRow('dataTable')" />
    
    <INPUT name="delete" id="del" disabled="disabled" type="button" value="Delete Member" onclick="deleteRow('dataTable')" />
    Your JS code plus what was suggested:
    Code:
    window.addEvent('domready', function() {
      $('membership').addEvent('change', Disable(this, 'add', 'delete'));
    });
    
    function Disable(s,d1,d2){
    var frm=s.form;
    frm[d1].disabled='disabled';
    frm[d2].disabled='disabled';
    if (s.value&&s.value>10){
      frm[d1].removeAttribute('disabled');
      frm[d2].removeAttribute('disabled');
    }
    }
    I'm not sure what you are passing in the call to the function. Can we use something like document.getElementById to pass or get the required attribute? I don't know anything about JS so I'm only asking and will rely on your expertise.

    Thanks for any assistance.

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