Send Elements from a List box to an array JQuery

I will like to be able to send items that I dynamically add to a list box and place those into an array type inside of a JQuery function. I want to return that array and pass it through as a parameter.  Here is the code I have thus far. Currently when I pass this as a parameter to write to a database table, it will only insert on record when I have multiple in the list box. Need Help!!


<script language="javascript">
function addProg() {
    var prog = document.getElementById("ProgramAdd");
    var box = document.getElementById("ActiveProg");
       
    var option = document.createElement("option");
    option.text = prog.value;
    option.value = prog.value;
    try {
        box.add(option, null);
    }catch(error) {
        box.add(option);
    }
    prog.value = " ";
}
</script>
SeaghostAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

Julian HansenCommented:
Can you post more of your code the above really does not tell us anything useful.

We need a context for what that code is referring to.
Currently when I pass this as a parameter to write to a database table, it will only insert on record when I have multiple in the list box.
Where and how are you doing this - the code shown does not deal with passing anything.

What are ProgramAdd and ActiveProg?

Why do you have
option.text = prog.value;
option.value = prog.value;

Open in new window

And not
option.text = prog.text;
option.value = prog.value;

Open in new window


There is simply not enough in the question for us to form any kind of picture of what we are dealing with here - or to put the question in context.
SeaghostAuthor Commented:
Here is the html portion for my question:

<div>
  <fieldset>
  <legend>Program Selections:</legend>
  <label for="ProgramAdd">Add Programs for Program Administrators:</label>
  <input type="text"  id="ProgramAdd" />
  <input type="button" value="Add Program" onclick="addProg()" class="sparkley" />
  <input type="button" value="Remove Program" onclick="removeOptions()" class="sparkley" />
  <br />
  <label>Available Programs:</label> <select name="ActiveProg" id="ActiveProg"></select>
  </fieldset>
  </div>
Julian HansenCommented:
Ok, and where are you sending the data to the database?
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

SeaghostAuthor Commented:
Yes, I am sending the information to an Oracle 11g database table.
Julian HansenCommented:
Yes but where - where is the code that does this?

Currently when I pass this as a parameter to write to a database table, it will only insert on record when I have multiple in the list box. Need Help!!

You are describing the problem but not showing us the relevant code. Where is the parameter passing happening?
SeaghostAuthor Commented:
Here is the Signature of my insert procedure to the table:
P_INSERT_PROG_ADMIN(AdminID IN VARCHAR2 DEFAULT NULL,ActiveProg portal.wwv_utl_api_types.vc_arr DEFAULT portal.wwv_utl_api_types.empty_vc_arr,btnProcess IN VARCHAR2 DEFAULT NULL,exitForm IN VARCHAR2 DEFAULT NULL) IS


IF ActiveProg.COUNT > 0 THEN

    IF btnProcess = 'Accept' THEN
    FOR i IN 1..ActiveProg.COUNT LOOP
   
    INSERT INTO T_PRIORITY_ADMINISTRATION
    (ADMIN_REC_ID,
     ADMIN_ID,
     ADMIN_NAME,
     ADMIN_PROGRAM,
     ADMIN_STATUS,
     ADMIN_ACTIVITY_DATE)
     VALUES
     (APP_REGISTRATION.SEQ_ADMIN_ID.NEXTVAL,
      VAR_ADMIN,
      VAR_NAME_TEST,
      ActiveProg(i),
      'A',
      SYSDATE);
      COMMIT;
     
      END LOOP;
      END IF;
Julian HansenCommented:
Maybe I am not explaining myself well.

Somewhere you are sending data from your page to a server - where is that code.

So far we have
The DB insert code
The code to dynamically add a Prog to a listbox
And the form code for displaying the above

What we don't have is the most important bit which is the code that sends the data to the server - how is that being done?
SeaghostAuthor Commented:
Here is the code that sends the information to the Server:

<form id="form1" name="SystemAdmin" method="post" action="APP_REGISTRATION.P_INSERT_PROG_ADMIN">

Everything else has been provided.
Julian HansenCommented:
Ok so you are doing a form post so you want to dynamically add named controls to hold the data you are creating.

Based on your previous posts it appears you are adding the new items to a <select> -  are you wanting to submit all items that are added to the select or do you want the user to select 1 from the list?

I suspect you want to send all of the items - which means using a select is probably not what you are looking for.

How do you want the data to come through on the receiving end - there are many ways to do this?
SeaghostAuthor Commented:
Yes, I am trying to send all of the items that are populated into the Select Box. If there is a better way in adding and removing the items from the box, any suggestions you may offer would be highly desired. I would image that the data being transferred would be in the form of an array type.
Julian HansenCommented:
You could use a select if it were a multi-select and then set the selected property on every option. How you do this though depends on what you are running on the server side to receive the data.

For instance - if you change your select to the following
<select multiple name="ActiveProg[]" id="ActiveProg">

Open in new window

and add the following to your JavaScript
	option.selected = true;

Open in new window

Then with a server side script in PHP the select values will come through as an array stored in ActiveProg

This may not work for other development environments so you would need to change it for whichever you are using - however the multiple select option with all options selected will return the data to your server side process.

Here is a sample with a PHP backend that demonstrates the concept.

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
SeaghostAuthor Commented:
If I am sending this html element through an Oracle procedure call. Do you have an example of that? I am not using PHP at this point. I am strictly using JQuery.
Julian HansenCommented:
I am strictly using JQuery.
1. There is no JQuery in any of the code you have posted
2. JQuery is a client side (javascript) library for manipulating the DOM - it is not used to process the results of a form submission on the server.
3. You have already said that you are using a form POST to send the data which means that the data is posted by the browser - not be intervening code.

Your solution currently uses plain JavaScript to modify the options in the <select> beyond that there does not appear to be any other code that you are using client side.

As far as showing you code for receiving this via an Oracle procedure - I have absolutely no experience with that - you posted to the JQuery, JavaScript, Web Development and HTML zones.

Here are the basics of what happens you can hopefully use this to take it forward.

When you do a form POST with a select that is set to allow multiple values (Say its name is entries). It might end up looking like this.
<select multiple name="entries">
   <option selected value="1">One</option>
   <option selected value="2">Two</option>
   <option selected value="3">Three</option>
</select>

Open in new window

When you click submit this results in the data being included in the request header like so
entries=one&entries=2&entries=3

Open in new window

It may be that in Oracle it automatically converts this into an array of values for you - I cannot say but multi selects are fairly common so there should be a bunch of articles out there on how to process a multi-select in an Oracle procedure.

As a matter of interest - where were you envisaging JQuery fitted into the picture?
Julian HansenCommented:
Having looked at your Oracle procedure I would try making the two small changes to your script I recommended in my second to last post and try it. Your procedure is already checking for an array submission and a mutliple select should translate into an array - it just comes down to how Oracle expects the markup to be defined for a multiple select.
SeaghostAuthor Commented:
I was utilizing JQuery in the scripting portion of my html application. So was just wondering if there was something there that also needed some correction or attention.
SeaghostAuthor Commented:
Julian is amazing in providing this solution for me. I cannot state my appreciation enough for his assistance.
Julian HansenCommented:
@Seaghost,

You are most welcome, I am glad I was able to help.
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.