asked on

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

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> </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>

Lalibela

ASKER

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> </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

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> </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>

Lalibela

ASKER

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

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.

Lalibela

ASKER

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

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.

Lalibela

ASKER

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

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.

ASKER CERTIFIED SOLUTION

steve_bagnall

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

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

Lalibela

ASKER

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

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.