Solved

javascript with for adding multiple input items to combobox

Posted on 2004-10-29
604 Views
Last Modified: 2007-12-19
Hello,

First of all thanks for your reponses. My question is as follows..

I have a  form which contains name, middle name ,sex ,educational level and telephones. The telephone can be many so what I did is provide textbox and combobox for accumulating all telephone. What my problem is I want to collect all the above data to a single combobox...

Name -->textbox
Middle name-->textbox
Sex-->combobox(male or female)
educational Level-->combobox(high school,higer education)
and

Telephone-->textbox
and buttons like add,edit and delete to add telephone to telephone list.

cutomerlist-->combobox(which will contain name of the customer with value of the above fileds concatenated) i will have add,delete,edit buttons to add as many cutomers

Can somebody help me to solve the above issue?

Thanks,
:14:15
0
Question by:Lalibela
    13 Comments
     
    LVL 5

    Expert Comment

    by:steve_bagnall
    Hi,

    I think this does what you want, if not please let me know.

    Cheers, Steve



    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Answer</title>

    <script>



    var modifyingIndex;

    function onAdd(sender) {
          var tel = document.getElementById("telephone");
          var sel = document.getElementById("telephone_list");

          if (sender.value == 'Add...') {
                if (tel.value != "") {
                      sel.options[sel.options.length] = new Option(tel.value, tel.value, false, true);
                }
          } else if (sender.value == 'Modify...') {
                if (tel.value != "") {
                      sel.options[modifyingIndex] = new Option(tel.value, tel.value, false, true);
                      sender.value = 'Add...';
                }
          }


    }


    function onEdit(sender) {


          var tel = document.getElementById("telephone");
          var sel = document.getElementById("telephone_list");

          modifyingIndex = sel.selectedIndex

          tel.value = sel.options[modifyingIndex].text;

          document.getElementById("add").value = 'Modify...';



    }


    function onDelete(sender) {

          var sel = document.getElementById("telephone_list");
          sel.options[sel.selectedIndex] = null;


    }


    </script>
    </head>

    <body>

    <form name="form1">

    <table>
    <tr>
    <td>Name:</td><td><input name="name" /></td>
    </tr><tr>
    <td>Middle Name:</td><td><input name="middle_name" /></td>
    </tr><tr>
    <td>Sex:</td><td><select name="sex">
    <option value="M">Male</option>
    <option value="F">Female</option>
    </select></td>
    </tr><tr>
    <td>Education:</td><td><select name="education">
    <option value="high_school">High School</option>
    <option value="higher_education">Higher Education</option>
    </select></td>
    </tr><tr>
    <td>Telephone:</td><td><input name="telephone" />
    <input type="button" name="add" value="Add..." onClick="onAdd(this)" /></td>
    </tr><tr>
    <td>&nbsp;</td>
    <td><select name="telephone_list"></select>
    <input type="button" name="edit" value="Edit" onClick="onEdit(this)" />
    <input type="button" name="delete" value="Delete" onClick="onDelete(this)" />
    </td>
    </tr>
    </table>

    </form>
    </body>
    </html>




    0
     

    Author Comment

    by:Lalibela
    Hello,

    Thanks for your time. Here is what I thought of doing, I have added three submit buttons and one dropdown in your html.

    Hi,

    I think this does what you want, if not please let me know.

    Cheers, Steve



    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Answer</title>

    <script>



    var modifyingIndex;

    function onAdd(sender) {
         var tel = document.getElementById("telephone");
         var sel = document.getElementById("telephone_list");

         if (sender.value == 'Add...') {
              if (tel.value != "") {
                   sel.options[sel.options.length] = new Option(tel.value, tel.value, false, true);
              }
         } else if (sender.value == 'Modify...') {
              if (tel.value != "") {
                   sel.options[modifyingIndex] = new Option(tel.value, tel.value, false, true);
                   sender.value = 'Add...';
              }
         }


    }


    function onEdit(sender) {


         var tel = document.getElementById("telephone");
         var sel = document.getElementById("telephone_list");

         modifyingIndex = sel.selectedIndex

         tel.value = sel.options[modifyingIndex].text;

         document.getElementById("add").value = 'Modify...';



    }


    function onDelete(sender) {

         var sel = document.getElementById("telephone_list");
         sel.options[sel.selectedIndex] = null;


    }


    </script>
    </head>

    <body>

    <form name="form1">

    <table>
    <tr>
    <td>Name:</td><td><input name="name" /></td>
    </tr><tr>
    <td>Middle Name:</td><td><input name="middle_name" /></td>
    </tr><tr>
    <td>Sex:</td><td><select name="sex">
    <option value="M">Male</option>
    <option value="F">Female</option>
    </select></td>
    </tr><tr>
    <td>Education:</td><td><select name="education">
    <option value="high_school">High School</option>
    <option value="higher_education">Higher Education</option>
    </select></td>
    </tr><tr>
    <td>Telephone:</td><td><input name="telephone" />
    <input type="button" name="add" value="Add..." onClick="onAdd(this)" /></td>
    </tr><tr>
    <td>&nbsp;</td>
    <td><select name="telephone_list"></select>
    <input type="button" name="edit" value="Edit" onClick="onEdit(this)" />
    <input type="button" name="delete" value="Delete" onClick="onDelete(this)" />
    </td>
    </tr>
    <tr>
      <td colspan="2"><input type="submit" name="Submit" value="add">
        <input type="submit" name="Submit2" value="edit">
        <input type="submit" name="Submit3" value="delete"></td>
      </tr>
    <tr>
      <td height="58" colspan="2"><div align="center">
        <select name="select" size="2">
        </select>
      </div></td>
      </tr>
    </table>

    </form>
    </body>
    </html>

    What I want is when the user his add(the newly added one) I will gather all datas in the above inputs and put it in the dropdown and selecting from the dropdown will fill the respecive inputs. This way a user can add as many customers as he/she wish. I have  two ideas..
    1. get the value of the inputs and use some sort of separator for value in the collector combo.
    2. Use JS OOP feature, so that I caon consturct my own customer object..

    but I have obstacles... senario 1 has a problem of choice of separator... the user can enter the separator and things mess up..
    2. I will be complicated and I think it consume much more resource...

    Cany you help me out....

    Thanks,
    :14:15
    0
     
    LVL 5

    Expert Comment

    by:steve_bagnall
    Hi,

    I have used option 1, the user can't modify the values in a select field so it should be OK.  See what you think of this ...

    Cheers,
    Steve



    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Answer</title>

    <script>



    var modifyingIndex;
    var modingRecIndex;

    /*
          CHANGE THE VALUES OF YOUR DELIMETERS HERE
    */
    var dlm = "|"; // main delimeter
    var subdlm = ","; // sub delimeter, to seperate phone numbers


    function onAdd(sender) {
         var tel = document.getElementById("telephone");
         var sel = document.getElementById("telephone_list");

         if (sender.value == 'Add...') {
              if (tel.value != "") {
                   sel.options[sel.options.length] = new Option(tel.value, tel.value, false, true);
                   tel.value = '';
                   tel.focus();
              }
         } else if (sender.value == 'Modify...') {
              if (tel.value != "") {
                   sel.options[modifyingIndex] = new Option(tel.value, tel.value, false, true);
                   sender.value = 'Add...';
                   tel.value = '';

              }
         }


    }


    function onEdit(sender) {



         var tel = document.getElementById("telephone");
         var sel = document.getElementById("telephone_list");

         if (sel.options.length > 0) {
               modifyingIndex = sel.selectedIndex

               tel.value = sel.options[modifyingIndex].text;

               document.getElementById("add").value = 'Modify...';
         }



    }


    function onDelete(sender) {

         var sel = document.getElementById("telephone_list");
         sel.options[sel.selectedIndex] = null;


    }


    function onRcrdAdd(sender) {

          var record = '';

          record = document.getElementById('name').value + dlm;
          record = record + document.getElementById('middle_name').value + dlm;
          record = record + document.getElementById('sex').value + dlm;
          record = record + document.getElementById('education').value + dlm;

          var tel = document.getElementById('telephone_list')
          for (i = 0; i < tel.options.length; i++) {
                record = record + tel.options[i].text + subdlm;
          }
          record = record + dlm;

          var dbOptions = document.getElementById('db').options;

          if (sender.value == 'Add') {

                dbOptions[dbOptions.length] = new Option(record, record, false, true);

          } else if (sender.value == 'Modify') {

                dbOptions[modingRecIndex] = new Option(record, record, false, true);
                sender.value = 'Add';

          }


          clearAll();


    }


    function onRcrdEdit(sender) {

           var splitRecord = new Array();
           var splitTel = new Array();

         var sel = document.getElementById("db");
         modingRecIndex = sel.selectedIndex;



         if (sel.options.length > 0) {

               clearAll();

               var record = sel.options[modingRecIndex].value;

                 splitRecord = record.split(dlm);

                document.getElementById('name').value = splitRecord[0];
                document.getElementById('middle_name').value = splitRecord[1];
                document.getElementById('sex').value = splitRecord[2];
                document.getElementById('education').value = splitRecord[3];

                splitTel = splitRecord[4].split(subdlm);

                for (i = 0; i < splitTel.length; i++) {
                      if (splitTel[i] != '') {
                            document.getElementById('telephone_list').options[i] = new Option(splitTel[i], splitTel[i], false, true);
                      }
                }
                document.getElementById('telephone_list').selectedIndex = 0;
                document.getElementById("rcrd_add").value = 'Modify';
         }



    }


    function onRcrdDelete(sender) {

           var sel = document.getElementById("DB");
           sel.options[sel.selectedIndex] = null;


    }



    function clearAll() {

          document.getElementById('name').value = '';
          document.getElementById('middle_name').value = '';
          document.getElementById('sex').selectedIndex = 0
          document.getElementById('education').selectedIndex = 0
          document.getElementById('telephone_list').options.length = 0;

    }


    </script>
    </head>

    <body onLoad="document.getElementById('name').focus();">

    <form name="form1" method="post">

    <table>
    <tr>
    <td>Name:</td><td><input name="name" /></td>
    </tr><tr>
    <td>Middle Name:</td><td><input name="middle_name" /></td>
    </tr><tr>
    <td>Sex:</td><td><select name="sex">
    <option default value="Male">Male</option>
    <option value="Female">Female</option>
    </select></td>
    </tr><tr>
    <td>Education:</td><td><select name="education">
    <option value="high School">High School</option>
    <option value="higher Education">Higher Education</option>
    </select></td>
    </tr><tr>
    <td>Telephone:</td><td><input name="telephone" />
    <input type="button" name="add" value="Add..." onClick="onAdd(this)" /></td>
    </tr><tr>
    <td>&nbsp;</td>
    <td><select name="telephone_list"></select>
    <input type="button" name="edit" value="Edit" onClick="onEdit(this)" />
    <input type="button" name="delete" value="Delete" onClick="onDelete(this)" />
    </td>
    </tr>
    <tr>
      <td colspan="2"><input type="button" name="rcrd_add" value="Add" onClick="onRcrdAdd(this);" />
        <input type="button" name="rcrd_edit" value="Edit" onClick="onRcrdEdit(this);" />
        <input type="button" name="rcrd_delete" value="Delete" onClick="onRcrdDelete(this);" /></td>
      </tr>
    <tr>
      <td height="58" colspan="2"><div align="center">
        <select name="db" size="2">
        </select>
      </div></td>
      </tr>
    </table>

    </form>
    </body>
    </html>
    0
     

    Author Comment

    by:Lalibela
    Hello,

    Thanks again for your response. If I am not nagging you the approach has major flaw, what if the user uses , or | I am done. The other thing is, it is not generic. That is if  I want to add another control like , Email field  with email and type(like personal,organization) just like telephone I would be forced to use another delimiter, for the email list. Can you help me think of unique deliminter so that the user will not have a chance to write it on. What about the OOP? And at the end of the day I will process the values in server .. It will be hard to split and find each value..

    Thanks,
    :14:15
    0
     
    LVL 5

    Expert Comment

    by:steve_bagnall
    Hi,

    You can test for the use of "|" in your validation, it is bound to be inapropriately used if you find it.  You do not have to worry about the use if commas, in your fields where you might expect to find a comma, only in fields such as your telephone, or email fields, where you wouldn't expect to find a comma anyway.  In any case you can set the delimeters to be anything you like using the global variables in my script.

    I could add this validation, and you're right this could be made generic if you wanted, but before I do that, can I ask is there any reason you are avoiding processing these records on your server, are you using a cgi script or anything similar.  Is it just the speed, perhaps you could construct the whole record, including the multi-value fields, and then submit each record to the server?

    Let me know what you think, as I don't want to work on something you wont be happy with.

    Cheers,
    Steve.
    0
     

    Author Comment

    by:Lalibela
    Hello steve,

    Thanks again. I am using JSP for processing and I use JSTL for processing. What I have in mind is to collect all information and submit using hidden like name control array, sex control array, telephone control array etc.. BTW I found a solution I can escape the whole input before I concatenate with the deliminator. What do you think should I pass the data parsed to the server or parse it on the server...

    Thanks,
    :14:15
    0
     
    LVL 5

    Expert Comment

    by:steve_bagnall
    Hi,

    Do you have a database that you can use as a template for the HTML and Javascript of your page.  i.e.  could you loop through all the field names of your database and create a text input control (for data entry) and a select control (for displaying the records) for each one on you web page.  Also use the list of field names to update the JavaScript for adding a record and creating a set of add / edit / delete controls for fields that on your datbase are flagged as allowing multiple values.  In this way you can update your application simply by adding a new field to your database, and also each field will be sent back in its own select control, and you can cycle through each of the values using JSP:

    String[] name = request.getParameterValues("name");
    if (name != null) {
      for (int i = 0; i < name.length; i++) {
        ....
      }
    }

    You would still have to seperate your multivalue fields using a delimeter, but you could use your escape solution to solve that problem.

    What do you think, sound good ?

    Steve.
    0
     

    Author Comment

    by:Lalibela
    Hello,

    Thanks for your prompt response. I don't get you. I will use javascript to dynamically populate the fields given some query; this will be done on server side. What I mean is I will consturct the JS server side. In any case for the piece of my mind could you please give me your generic solution. I really thank you for answering my answers. All the points are yours.

    Please give me the generic solution that you have in your mind

    Thanks

    :14:15
    0
     
    LVL 5

    Expert Comment

    by:steve_bagnall
    Hi,

    OK I don't think we're quite understanding each other, but I will make the assumption that you can give each field an id based on what "kind" it is on the server side, you will see what I mean when I show you the code.  It's nearly home time here though so you probably wont see this until your tomorrow if that's OK.

    Cheers,
    Steve.
    0
     
    LVL 5

    Accepted Solution

    by:
    Hi,

    Right, this is generic.  It puts all your different fields in a select box named "store_<yourfieldname>".  It concatenates any multivalue fields using the delimeter assigned to the global variable: dlm in the JavaScript.  You need to assign the global variable mainField as the name of your first field (in this case "name").  Your server script needs to render all the single-value text fields as per this example using the naming convention "input_<yourfieldname>".  

    Any multivalue fields need to follow the naming convention "mInput_<yourfieldname>".  The Add, Edit and Delete buttons on your multivalue fields need to all be called the same name as your field i.e. "<yourfieldname>" and they need to call the "if (validateMulti(this)) {onAdd(this)}, onEdit(this), and onDelete(this) functions in the onClick event respectively.  The select control corresponding to your multivalue fields needs to follow the naming convention "mInput_<yourfieldname>List" and the onExit event needs to call the validateMulti(this) function (to check for the delimeterin the entered value).

    The first store select control is a normal one so it can be selected, all the others are marked with the attribute "disabled".  The first select control needs to call the function updateSelected(this) in the onChange event (this is to keep the selectedIndex of all the store select controls in sync).  In your form you will need to add a submit button which points at you JSP page.  Once there you will be able to manipulate the entered fields (as in a previous post) and manually parse the multi-value fields on the server using the same delimeter.

    If you want to add a new field you can by paying attention to the correct formatting and naming conventions as above (especially for a multi-value field), and the rest should just work as normal.  This is now quite a big script so let me know if you don't understand it or it doesn't work (I have tested it but I may have missed something).

    Cheers, Steve.





    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Answer</title>

    <script language="JavaScript" type="text/javascript">

    var modingRecIndex = null;
    var modifyingIndex;


    // Change these as encessary
    var dlm = ","; // main delimeter
    var mainField = "name";  /* this determines which field the user selects when they want
                                              to edit a record */



    // functions to edit multi-value fields

    function onAdd(sender) {

           // get the text field and its corresponding select field
         var inputField = document.getElementById("mInput_" + sender.name);
         var listField = document.getElementById("mInput_" + sender.name + "List");

           // if the text field is not blank add it to thselect control
         if (inputField.value != "") {
               listField.options[listField.options.length] = new Option(inputField.value, inputField.value, false, true);
               inputField.value = '';
               inputField.focus();

         }


    }


    function onEdit(sender) {

           // get the text field and its corresponding select field
        var inputField = document.getElementById("mInput_" + sender.name);
        var listField = document.getElementById("mInput_" + sender.name + "List");


          // if not already editing, get the selected value and put it in text field
          if (sender.value == 'Edit') {
               if (listField.options.length > 0) {

                       modifyingIndex = listField.selectedIndex;
                       inputField.value = listField.options[modifyingIndex].text;
                       sender.value = 'Modify';

               }

         // if already editing, change the selected value to equal the value of the text field
         } else {
                if (listField.options.length > 0) {

                       listField.options[modifyingIndex].text = inputField.value;
                       listField.options[modifyingIndex].value = inputField.value;
                       inputField.value = '';
                       sender.value = 'Edit';

               }


         }



    }


    function onDelete(sender) {

           // delete the selected value
         var listField = document.getElementById("mInput_" + sender.name + "List");
         listField.options[listField.selectedIndex] = null;
    }


    // end of fucntions for editing multi-value fields





    // functions for adding records to lists

    function onRcrdAdd() {

           // loop through all the elements on the page
         for (i = 0; i < document.forms[0].elements.length; i++) {

               var fieldName = document.forms[0].elements[i].name;
                var multipleField = false;

                // if an inpyut field add the value, if multi-value - make a note
                if (fieldName.indexOf('input_') == 0) {
                      eval('var listField = document.getElementById("' + 'store_' +  fieldName.substr(6) + '");');
                } else if (fieldName.indexOf('mInput_') == 0)  {
                      eval('var listField = document.getElementById("' + "store_" +  fieldName.substr(7) + '");');
                      multipleField = true;
                } else {
                      listField = null;
                }

                // assign the corresponding list field

                if (listField) {


                      var newValue = '';

                      // if multi field concatenate, otherwise just assign
                      if (multipleField) {

                            for (j = 0; j < document.getElementById(fieldName + "List").options.length; j++) {
                                  var newValue = newValue + document.getElementById(fieldName + "List").options[j].value + dlm;

                            }


                      } else {
                            var newValue = document.forms[0].elements[i].value;

                      }



                      // if we arnt modifying a record then append a new option, otherwise replace the one were modifying
                      if (modingRecIndex == null) {
                            listField.size = listField.size + 1;
                            listField.options[listField.options.length] = new Option(newValue, newValue, false, true);

                      } else {


                            listField.options[modingRecIndex] = new Option(newValue, newValue, false, true);

                      }


                }

          }


          // reset the modifying flag
          modingRecIndex = null;
        clearAll();


    }



    // handle an edit of an entire record
    function onRcrdEdit(sender) {

           // keep a recorn of all the field names used to store column values
         var stores = new Array();
         var storeIndex;

         var sel = document.getElementById("store_" + mainField);
         modingRecIndex = sel.selectedIndex;


          // if the buttons value was Edit when it was pressed
          if (sender.value == 'Edit') {



                if (sel.options.length > 0) {

                            // clear all current values and assign them with the values of the selected record
                            clearAll();

                            storeIndex = 0;
                            // go through and get the names of the "store_" fields


                            for (i = 0; i < document.forms[0].elements.length; i++) {
                                  var fieldName = document.forms[0].elements[i].name;


                                  if (fieldName.indexOf('store_') == 0) {
                                        stores[storeIndex] = fieldName;
                                        storeIndex++;
                                  }
                            }

                            // find matching input fields
                            for (i = 0; i < document.forms[0].elements.length; i++) {
                                  var fieldName = document.forms[0].elements[i].name;




                                  if (fieldName.indexOf('input_') == 0) {

                                        for (j = 0; j < stores.length; j++) {

                                              if (stores[j].substr(6) == fieldName.substr(6)) {

                                                    document.getElementById(fieldName).value = document.getElementById(stores[j]).value;

                                              }

                                        }

                                  } else if ( (fieldName.indexOf('mInput_') == 0) && (fieldName.indexOf('List') == fieldName.length - 4) ) {


                                        for (j = 0; j < stores.length; j++) {

                                              if (stores[j].substr(6) == fieldName.substr(7, fieldName.length - 4 - 7)) {


                                                    var splitVals = document.getElementById(stores[j]).value.split(dlm)

                                                    var ele = document.getElementById(fieldName);


                                                    for (k = 0; k < splitVals.length; k++) {
                                                          if (splitVals[k] != '') {

                                                                ele.options[k] = new Option(splitVals[k], splitVals[k], false, true);

                                                          }

                                                    }

                                                    ele.selectedIndex = 0;
                                              }
                                        }
                                  }

                            }



                        sender.value = 'Modify';

                 }

          // if the buttons value was Modify when it was pressed, then add a new record,
          // the modifying flag has already been set
          } else if (sender.value = 'Modify') {

                onRcrdAdd();
                sender.value = 'Edit';

          }



    }



    function onRcrdDelete(sender) {

          // for all elements on the page
          for (i = 0; i < document.forms[0].elements.length; i++) {
                var fieldName = document.forms[0].elements[i].name;

                // if this is one of the store databases
                if (fieldName.indexOf('store_') == 0) {
                      // delete the selected option
                      document.getElementById(fieldName).options[document.getElementById(fieldName).selectedIndex] = null;
                      document.getElementById(fieldName).size = document.getElementById(fieldName).size - 1;
                      document.getElementById(fieldName).selectedIndex = 0;
                }
          }


    }



    // clear all teh data-entry text fields
    function clearAll() {

          var undefined;

          // for all elements on the page
        for (i = 0; i < document.forms[0].elements.length; i++) {

              var fieldName = document.forms[0].elements[i].name;


                // delete both single and multivalue fields
                if ( (fieldName.indexOf('input_') == 0) || (fieldName.indexOf('mInput_') == 0) ) {

                      if (document.forms[0].elements[i].selectedIndex != undefined) {
                            if (fieldName.indexOf('List') == fieldName.length - 4) {

                                  var selLength = document.forms[0].elements[i].options.length;

                                  for (j = 0; j < selLength; j++) {
                                        // keep deleting the first option till none left
                                        document.forms[0].elements[i].options[0] = null;

                                  }

                            } else {
                                  document.forms[0].elements[i].selectedIndex = 0;
                            }
                      } else {
                            document.forms[0].elements[i].value = '';
                      }
                }


          }

    }



    function updateSelected(sender) {


          for (i = 0; i < document.forms[0].elements.length; i++) {
                if (document.forms[0].elements[i].name.indexOf('store') == 0) {
                      document.forms[0].elements[i].selectedIndex = sender.selectedIndex;
                }
          }

    }



    function validateMulti(sender) {

          // if the value contains the delimeter character
          // then issue a message saying that it cannot
          // and return false


          if (document.getElementById('mInput_' + sender.name).value.indexOf(dlm) != -1) {
                alert('This field may not contain the character: "' + dlm + '", please remove it.');
                return false;
          } else {
                return true;
          }

    }


    </script>
    </head>

    <body onLoad="document.getElementById('input_name').focus();">

    <form name="form1" method="post">

    <table>


    <!-- if field == single value then name = "input_" + fieldname -->
    <tr>
    <td>Name:</td><td><input name="input_name" /></td>
    </tr><tr>
    <td>Middle Name:</td><td><input name="input_middle_name" /></td>
    </tr>

    <!-- if field == single value then name = "input_" + fieldname -->
    <tr>
    <td>Sex:</td><td><select name="input_sex">
    <option default value="Male">Male</option>
    <option value="Female">Female</option>
    </select></td>
    </tr>

    <!-- if field == single value then name = "input_" + fieldname -->
    <tr>
    <td>Education:</td><td><select name="input_education">
    <option value="High School">High School</option>
    <option value="Higher Education">Higher Education</option>
    </select></td>
    </tr>

    <!--
    *** if field == multi value then name = "mInput_" + fieldname
    ***
    ***      and validation call added to onExit
    ***
    ***      and HTML different (see validation
    -->

    <tr>
    <td>Telephone:</td><td><input name="mInput_telephone" />
    <input type="button" name="telephone" value="Add..." onClick="if (validateMulti(this)) {onAdd(this)}" /></td>
    </tr>

    <tr>
    <td>&nbsp;</td>

    <!-- select name that show all the values name = "mInput" + fieldname + "List" -->
    <td><select name="mInput_telephoneList" onExit="validateMulti(this);"></select>

    <!-- all button names = fieldname -->
    <input type="button" name="telephone" value="Edit" onClick="onEdit(this)" />
    <input type="button" name="telephone" value="Delete" onClick="onDelete(this)" />
    </td>
    </tr>



    <!-- row of record buttons -->
    <tr>
      <td colspan="2">
            <input type="button" name="rcrd_add" value="Add" onClick="onRcrdAdd();" />
        <input type="button" name="rcrd_edit" value="Edit" onClick="onRcrdEdit(this);" />
        <input type="button" name="rcrd_delete" value="Delete" onClick="onRcrdDelete(this);" />
      </td>
    </tr>


    </table>





    <!-- fields for display and for use on server -->

    <table>


    <!-- write initial value as the one the user selects to edit -->
    <tr>
      <td height="58">
        <select name="store_name" size="0" onChange="updateSelected(this)">
        </select>
      </td>



    <!-- start loop on server for each of the rest of the fields field-->

      <td height="58">
          <select name="store_middle_name" size="0" disabled>
          </select>
      </td>
      <td height="58">
          <select name="store_sex" size="0" disabled>
          </select>
      </td>
      <td height="58">
          <select name="store_education" size="0" disabled>
          </select>
      </td>
      <td height="58">
         <select name="store_telephone" size="0" disabled>
         </select>
      </td>


    <!-- loop end -->
    </tr>
    </table>

    </form>
    </body>
    </html>
    0
     
    LVL 5

    Expert Comment

    by:steve_bagnall
    Error in the previous post: the select control doesn't need to call validateMulti() because as you can see this is called in the Add buttons onClick event!

    Sorry about that
    Steve
    0
     

    Author Comment

    by:Lalibela
    Hello,
    Thanks a million for your nice and great code. But I have on question, Can you make only one dropdown at the bottom so that all the inputs are added in one dropdown rather than the disabled dropdowns?

    Thanks again,
    :14:15
    0
     
    LVL 5

    Expert Comment

    by:steve_bagnall
    Hi,

    You can, as we did before, but you are then stuck with the delimeter which I know you didn't like.  I think it looks better as seperate fields and also avoids you having to parse the main fields on the server.  What you could do is remove the disabled keyword on the fields, but add the onChange event and make it the same as the first select box, so no matter which one you clicked on the selectedIndex in all the controls changes.

    HTH

    Cheers,
    Steve.
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    This article shows how to read a single webpage's HTML into a string variable, and it also shows how to automate a sequence so you can read and process a list of webpages.  I was tasked with reading and parsing a series of webpages to collect some s…
    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    910 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now