?
Solved

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

Posted on 2008-10-23
3
Medium Priority
?
8,459 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 2000 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses

777 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