Solved

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

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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now