Home › Forums › JavaScript › updating a form field from selections
- This topic is empty.
-
AuthorPosts
-
May 21, 2009 at 1:44 pm #24911BigBrotherBiggsParticipant
Hey all. if there was a name for someone lower than a NewBe that would be me…
I have just stepped up on the Java band wagon and am impressed with what I have been able to figure out.
I think what I am wanting to do can be done in java and am asking if it is and if anyone can assist me in learning how to do it.
First a Link… http://cutiepetutiejewelry.designedbyje … t_Necklace
now a description: This is a client of mine that wants more than an out of the box shopping cart. But before I can hire someone to build that I need to make this one work so she can start making money to pay the programmer.
so if you look at this page and if you are doing so on Fire Fox i am sorry about the big gaps I have no idea as to why that is. I have always had this issue with IE now it looks the way it was designed in IE, Safari and Opera but not Fire FOX
BUT I DIGRESS SORRY.
So looking at the linked product page… This is a template I created for each product. The system i am using here is the GoodBarry CMS. The Text Field with a Label Special Instructions is the field I want to effect.
The Site shopper will be able to select the product and customize it. the idea I had was to have images of the color combos and other options in a horizontal scroll feel ( I have one I’ve used before that i can modify using mootools) with a radio button the value of that button would be the color code not the name. When that radio button is selected I want it to add the value to the Special Instructions text box.
If I can have that work it will transfer the text box info to the shopping cart.
As i mentioned before anyone know how I can do this?
Your help is much appreciated.
May 21, 2009 at 10:28 pm #57935akeenlabsParticipantLet’s simplify this a little bit. Disregarding the actual implementation, here is what I gather you are looking for:
Start with a series of radio buttons and a text box.
As each radio button is selected, it copies it’s own value into a different textbox.
-or-
When the page is submitted, copy the value of the currently selected radio button into the textbox.I’m only going to solve the first (if you’d like the second I could do that too). So, here it goes:
Code:
I’m using jQuery (a JavaScript library that helps with browser incompatibilities and DOM manipulation), so if you’ve never used it before some of this may look a little foreign and I recommend checking it out: http://www.jquery.com. Basically you just need to attache an event to each radio button that fires when that radio button’s ‘checked’ status changes. If the radio button is checked, then you should copy something into the textbox.
I hope this is what you’re looking for. If not, help narrow in on it and we’ll give it another shot. :D
May 21, 2009 at 11:51 pm #57939BigBrotherBiggsParticipantSpot on! Number one is exactly what I am looking for… Take the values of selected radio buttons and post those values in a text field.
Sorry about my post I was trying to figure out how to explain it. I will try what you have shared and report. Again thank you.
May 22, 2009 at 12:18 am #57944BigBrotherBiggsParticipantakeenlabs Thanks a lot I got it to work let me take it up a notch and see if I can throw you off.
I have two or more groups of products, each group is a series of radio buttons, a selection from each group can be made with the value of each selection entered into the same text field, separated by a comma or other separator. as in the mock up screen shot below. :twisted:
[attachment=0]Picture 3.png[/attachment]
how is that for a challenge?
May 24, 2009 at 10:01 pm #58113akeenlabsParticipantHere’s how I would do it (just a quick and dirty way): Use a global (even though I typically hate globals) array/hash to store the information for each selection set. When any one modifies this array re-generate the full instruction list.
Code:
Choice 1
Choice 2
Choice 3
Choice 4
This is definitely not the most elegant approach, but it does allow you to easily expand without having to go back in a modify the JavaScript since all the values are pulled from the HTML markup.
Good luck.
May 25, 2009 at 1:19 am #58122BigBrotherBiggsParticipantthanks Justin you have been a great help. I will give it a go and will let you know how I do.
May 26, 2009 at 2:43 pm #58207BigBrotherBiggsParticipantI got it to work on my computer but am having issues on the server.
One thing that I think is holding it up is that the shopping cart field I am trying to update is called catProdInstructions_474297. Simple enough if all the products had the same field…. but they don’t.
The field that needs to change on each field is the same except the numbers that follow the ‘catProdInstructions_’ .
So what I am asking…
Is there a way to get just the number from the ‘catlproduct_474297’ (being 474297 remember that this number changes depending on what product is showing) and having it update the Script so that wherever ‘catProdInstructions_’ is mentioned it has that number added to it?Here is a visual for you… the green line is to show where two fields are used the bottom one is the field we are trying to update with the radio buttons
As shown here.
[attachment=0]Picture 1.png[/attachment]May 26, 2009 at 3:30 pm #58211akeenlabsParticipantIf I understand you correctly, you need to make sure the product options update the correct instructions textbox. Let’s say for instance you want to pull the catalog number from an image tag based on which image is currently displayed; you then want to use that number to reference the textarea with the name number. Hope this helps:
Code:
Choose 1
Choice 2
Choice 3
Choice 4
Note: I only changed a little HTML markup and the updateInstructions function.
May 26, 2009 at 5:29 pm #58222BigBrotherBiggsParticipantNot quite what I was after.
Lets see if I can explain this better.
here is the url to my dev server for this client. http://cutiepetutiejewelry.designedbyjeff.com/
Right now there are three products in the database.
This is the "Phat" line of Jewelry.so if you navigate to the "Collections" menu then down to the "L through P" menu then to "PHAT" you will see the three products listed on a page… for illustration click on the necklace.
[attachment=1]Picture 3.png[/attachment]
if you look at the source code you will see that each product is given a name from the system… it is ‘catlproduct_’ followed by a number. In the case of the Phat necklace it is catlproduct_474297
The following code is rendered when the {tag_name} is used.Code:Here is a screen shot of what the tags look like:
[attachment=0]Picture 10.png[/attachment]So I want to grab the number from the id and then put it at the end of the the instruction reference in the script.
May 26, 2009 at 8:29 pm #58234akeenlabsParticipantSorry, but I’m still a little confused. Do you want to put the product ID in the actual textarea itself or use the product ID to reference the textarea? Either way, I think you probably have enough information to make it happen.
Use can use the following selector to select the image: "img[id^=’catlproduct_’]". This will select any image tags that have an ID that starts with the string "catlproduct_". You can’t select an element based on a full regular expression yet, but this nifty little feature should suffice here. Once you have the ID, I believe you can use it how you wish?
Sorry for all the confusions, but sometimes I’m hard to understand things. I hope this is what you were looking for :D
P.S. If you were having trouble selecting the correct textarea, I believe you can use this selector: ‘textarea.productTextarea’; but you probably already knew that :D
May 26, 2009 at 8:58 pm #58236BigBrotherBiggsParticipantno no it is all my confusion… I don’t have enough knowledge and understanding yet to understand the proper terms. but it wan’t unti I tried it out on a plant page that I got the idea and what you where trying to teach me… Thank you very much.
So you know I understand.
Basically the Script is going to look at the image id and pull from it the numeric portion of it.
then with in the code it will be referencing the proper text field by adding the number to the end of the text field id.thus when ever a change is made it is made in the right text box.
Now I gotta figure out why it isn’t recognizing or finding the location of my js files and I should show you that your instruction was not in vain. :D
May 26, 2009 at 9:03 pm #58237akeenlabsParticipantIt sounds like you get it now! If anything, you learned how it worked on your own by looking at the code; I’ve never been good at explaining myself :D
Either way, glad I could help. Good luck!
June 15, 2009 at 9:18 pm #59097BigBrotherBiggsParticipantOkay, i got it working and even added a little accordion styling to it… I had some conflicting Script from the CMS I use but was able to have it resolved by adding…
Code:var $j = jQuery.noConflict();One of the support guys from the CMS did that for me.
Site is still being tweaked but you will get the picture.
http://cutiepetutiejewelry.designedbyjeff.com/_product_42000/Phat_Necklace
Now I want to add comments to the same text box from various other text boxes. So i tried to figure it out on my own with no luck. This is what I came up with. Where am i going wrong?
This is the code I added to your code
Code: -
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.