javascript with for adding multiple input items to combobox

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
LalibelaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

steve_bagnallCommented:
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
LalibelaAuthor Commented:
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
steve_bagnallCommented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

LalibelaAuthor Commented:
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
steve_bagnallCommented:
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
LalibelaAuthor Commented:
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
steve_bagnallCommented:
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
LalibelaAuthor Commented:
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
steve_bagnallCommented:
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
steve_bagnallCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
steve_bagnallCommented:
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
LalibelaAuthor Commented:
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
steve_bagnallCommented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.