Solved

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

Posted on 2008-10-23
3
8,446 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

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

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

Suggested Solutions

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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)

737 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