Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

javascript with for adding multiple input items to combobox

Posted on 2004-10-29
13
Medium Priority
?
610 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
Comment
Question by:Lalibela
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 5
13 Comments
 
LVL 5

Expert Comment

by:steve_bagnall
ID: 12443220
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
ID: 12445758
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
ID: 12446944
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:Lalibela
ID: 12449526
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
ID: 12461526
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
ID: 12462833
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
ID: 12463372
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
ID: 12463833
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
ID: 12464275
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:
steve_bagnall earned 1000 total points
ID: 12474539
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
ID: 12474576
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
ID: 12489863
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
ID: 12491195
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

618 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