Select option by clicking image

  • Resolved Fisherman777

    (@fisherman777)


    7 years, 10 months ago

    Hello,

    How can I select an option in a dropdown box by clicking an image? Say I have three images in the form (red.png, black.png and blue.png) and a dropdown with red, black and blue selections. I want to be able to click the red image and have the red option in the dropdown selected or the client can just select the dropdown himself if they want.

    I have a static php form that will do this but I need to do it in Calculated Fields Form. Here’s the code:

        <p>Acrylic Color<br>
    <br>
    <img onclick="SelectADropdownItem('acrylic-dropdown','Blue')" src="../quote/swatch/blue.jpg" style=
    "border:none; height:44px; width:44px; cursor:pointer; margin:0 5px 0 5px;" alt="Blue Face">
    <img onclick="SelectADropdownItem('acrylic-dropdown','Red')" src="../quote/swatch/red.jpg" style=
    "border:none; height:44px; width:44px; cursor:pointer; margin:0 5px 0 5px;" alt="Red Face">
    <img onclick="SelectADropdownItem('acrylic-dropdown','Yellow')" src="../quote/swatch/yellow.jpg" style=
    "border:none; height:44px; width:44px; cursor:pointer; margin:0 5px 0 5px;" alt="Yellow Face">
    <img onclick="SelectADropdownItem('acrylic-dropdown','Green')" src="../quote/swatch/green.jpg" style=
    "border:none; height:44px; width:44px; cursor:pointer; margin:0 5px 0 5px;" alt=
    "Green Face"><br>
    <img onclick="SelectADropdownItem('acrylic-dropdown','Orange')" src="../quote/swatch/orange.jpg" style=
    "border:none; height:44px; width:44px; cursor:pointer; margin:0 5px 0 5px;" alt="Orange Face">
    <img onclick="SelectADropdownItem('acrylic-dropdown','Grey')" src="../quote/swatch/grey.jpg" style=
    "border:none; height:44px; width:44px; cursor:pointer; margin:0 5px 0 5px;" alt="Grey Face">
    <img onclick="SelectADropdownItem('acrylic-dropdown','White')" src="../quote/swatch/white.jpg" style=
    "border:none; height:44px; width:44px; cursor:pointer; margin:0 5px 0 5px;" alt="white Face">
    <img onclick="SelectADropdownItem('acrylic-dropdown','Black')" src="../quote/swatch/black.jpg" style=
    "border:none; height:44px; width:44px; cursor:pointer; margin:0 5px 0 5px;" alt="Black Face">
    <img onclick="SelectADropdownItem('acrylic-dropdown','Other')" src="../quote/swatch/other.jpg" style=
    "border:none; height:44px; width:44px; cursor:pointer; margin:0 5px 0 5px;" alt=
    "Other Face"><br>
    <select id="acrylic-dropdown">
      <option>
        Select here or click a color above.
      </option>

      <option value="Blue">
        Blue
      </option>

      <option value="Red">
        Red
      </option>

      <option value="Yellow">
        Yellow
      </option>

      <option value="Green">
        Green
      </option>

      <option value="Orange">
        Orange
      </option>

      <option value="Grey">
        Grey
      </option>

      <option value="White">
        White
      </option>

      <option value="Black">
        Black
      </option>

function SelectADropdownItem(id,val)
{
    var d = document.getElementById(id);
    for( var i=0; i<d.length; i++ )
    {
        if( d[i].value == val ) { d[i].selected = true; }
        else { d[i].selected = false; }
    }
}
Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello @fisherman777,

    Please, send me the link to the webpage with the form that includes the dropdown field and images tags for giving you more specific instructions.

    Best regards.

    Thread Starter Fisherman777

    (@fisherman777)

    Here’s the link. After we’re finished, can we delete this link from the forum thread?

    • This reply was modified 7 years, 10 months ago by Fisherman777.
    Plugin Author codepeople

    (@codepeople)

    Hello,

    I’m talking about the form created with our plugin.

    Best regards.

    Thread Starter Fisherman777

    (@fisherman777)

    I’m looking for the link. It’s installed at https://www.signlettersasap.com. The form name is “Channel Letter Quote”.

    Plugin Author codepeople

    (@codepeople)

    Hello,

    I’ve visited your webpage but the form is not inserted on it (create a page and insert in its content the shortcode of your form). I’m sorry, but if I cannot check the form’s structure won’t be possible to give you the instructions to implement the behavior requested.

    Best regards.

    Thread Starter Fisherman777

    (@fisherman777)

    Sorry about that.

    https://www.signlettersasap.com/quotetest/

    Plugin Author codepeople

    (@codepeople)

    Hello,

    I really want to help you but the form does not correspond with your project’s description, there are not a dropdown with colors names, or images tags, so, I will try to explain the process with an hypothetical example:

    1. Insert multiple media fields to load the images.

    2. To make the selection easier (instead to create an onclick event for every image) associate to each media field a class name with the structure: color_colorname, like: color_green, color_yellow, color_black, etc. The color must coincide with the values of the choices in the dropdown field (green, yellow, black, etc.)

    3. Assuming that the DropDown field is the fieldname1, insert a “HTML Content” field in the form with the following piece of code as its content:

    <script>
jQuery(document).on('click','[class*="color_"]', function(){
var color;
jQuery(jQuery(this).attr('class').split(/\s+/)).each(function(index,item){
if(/color_/.test(item)) color = item.replace('color_', '');
});
jQuery('[id*="fieldname1"]').val(color);
});
</script>

    and that’s all.
    Best regards.

    Thread Starter Fisherman777

    (@fisherman777)

    Thank you. That does help and I think I can get it working now. Can you delete the links in the two posts above for me?

    Thread Starter Fisherman777

    (@fisherman777)

    Thanks again! It works just fine and I’ll be finished with this form sooner than I thought.

    Kindest Regards,
    Fisherman

    Hi, sorry to bother you here but I’m not getting any reply to ticket #171778 since last week…

    Awaiting your news.

    Regards,

    M

    Plugin Author codepeople

    (@codepeople)

    Hello @ fisherman777,

    I’m sorry, I cannot edit your entries in the forum.

    Best regards.

    Plugin Author codepeople

    (@codepeople)

    Hello @marcoguiotto,

    Your support ticket is currently open. You will get the answer on it asap.

    Best regards.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Select option by clicking image’ is closed to new replies.