asked on

Jquery (Javascript) Append textbox value to Select Box Item on Submit

Hi Experts

I'm trying to pass the contents of a textfield element onto the end of a Select box's items value on submit of a form. I've managed to get the following code to work where essentially it is adding the code to another textfield but am struggling to figure out how to get the value of "idBox" textbox onto the end of the option values of the select box. I need to be able to add this onto all of the option values.

Excuse the function names; i've had to pull this together quickly!!!

Code Examples Below:

$(document).ready(function(){
$("#submit").click(function(){
var emailToVal = $("#idBox").val();
if(emailToVal == '') {
alert ("No Value");
}

else if(emailToVal != '') {
$("#copyBox").val($("#idBox").val().toString());

alert ("Value + " + emailToVal);
}
return false;
});

});

<form>
<select size="1" id="itemname" name="itemname" class="width_130">
<option value="Please Select {exclude}" selected="selected">Please Select</option>
<option value="(1 week)">1 week - £25.00</option>
<option value="(1 month)">1 month - £75.00</option>
<option value="(3 months)">3 months - £160.00</option>
<option value="(1 year)">1 year - £495.00</option>
<option value="(Renewal 1 year)">Renewal 1 year - £49.50</option>
</select>

<label>ID No:</label><input type="text" id="idBox" value="" /><br />
<label>Copy To:</label><input type="text" id="copyBox" value="" /><br />

</form>

Any further information needed then please ask; 500 points available for the code to help me achieve my goal; preferably using JQuery but normal javascript will do if it doesn't interfere with other JQuery items in this particular environment....

Cheers....

MacAnthony

Try this:

$(document).ready(function(){
$("#submit").click(function(){
if($("#idBox").val() != '') {
 $('#itemname').append('<option value="' + $('#idBox').val() + '">' + $('#copyBox').val() + '</option>');
 }
});
 
});

Open in new window

ASKER CERTIFIED SOLUTION

sh0e

membership

This solution is only available to members.

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

Start Free Trial

pixelcellar

ASKER

sh0e

That works perfectly as required; i have something additional that has only just reared it's head to this; any chance you can show me how i can combine this idea but set more precisely where i put the value of the "idBox" textbox? I'm thinking subString sort of thing but essentially my option value code looks as follows:

<option value="(1 month) {75.00}">1 month - £75.00</option>

The {75.00} is needed for the shopping cart but if i do what you showed me the code for it adds the idBox value at the end and the shopping cart for some annoying reason needs the {75.00} to be the last thing in the option value code.

I'd like to be able to set the addition of (#idBox) value to be 9 characters in from the end (ie before the {75.00}.

I'm going to add this as another question so more points available; thanks for your help so far though, link to the other question is below..

https://www.experts-exchange.com/questions/23844267/Jquery-SubString-Idea.html

Many thanks....