Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript updating a form field from selections

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #24911
    BigBrotherBiggs
    Participant

    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.

    #57935
    akeenlabs
    Participant

    Let’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

    #57939
    BigBrotherBiggs
    Participant

    Spot 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.

    #57944
    BigBrotherBiggs
    Participant

    akeenlabs 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?

    #58113
    akeenlabs
    Participant

    Here’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.

    #58122
    BigBrotherBiggs
    Participant

    thanks Justin you have been a great help. I will give it a go and will let you know how I do.

    #58207
    BigBrotherBiggs
    Participant

    I 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]

    #58211
    akeenlabs
    Participant

    If 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.

    #58222
    BigBrotherBiggs
    Participant

    Not 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:
    Phat Necklace

    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.

    #58234
    akeenlabs
    Participant

    Sorry, 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

    #58236
    BigBrotherBiggs
    Participant

    no 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

    #58237
    akeenlabs
    Participant

    It 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!

    #59097
    BigBrotherBiggs
    Participant

    Okay, 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:
Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.