Solved

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

Posted on 2008-10-23
3
8,454 Views
Last Modified: 2012-05-05
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....

0
Comment
Question by:pixelcellar
[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
3 Comments
 
LVL 11

Expert Comment

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

Open in new window

0
 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
ID: 22793455


$(document).ready(function(){
$("#submit").click(function(){
 
$('#itemname option').each(function(){$(this).val($(this).val() + $('#idBox').val());});
 
return false;
});
}); 

Open in new window

0
 

Author Comment

by:pixelcellar
ID: 22795544
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..

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_23844267.html

Many thanks....



0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

691 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