Community Forums 

Main Content

Re:How to change image during choose of product from drop down menu

    Jul 25 2016 15:32:56

    #1

    Tomele

    Join date : 2016-07-11      Posts : 23

    GT said Why are you using the existing name?

    If it is for a script, get the script to use the id and use name=productpr id= noCampers


    You mean like this:
    <select name="productpr" id="noCampers" onchange="sumFields(); document.images['pic'].src='images/'+this.options[this.selectedIndex].value+'.jpg'" oninput="sumFields();">


    ------------------------------------

    Here is the full version:

    <script type="text/javascript">
    //<![CDATA[
    function submitForm() {
    /*
    When the form is submitted, these fields are tested for blanks.
    If it is ok to have a blank, then just remove that group.
    Bear in mind though that if you remove a group here, you need to remove all references
    to it in the rest of the page and to do this you would need good javascript knowledge
    so that you don't remove wrong areas of code.
    */
    if (document.myForm.noCampers.value=='') {
    alert('Please Select colour option');
    return false;
    }
    if (document.myForm.addPadding.value=='') {
    alert('Please Select agent option');
    return false;
    }
    /*
    If the above tests are all ok, then the script then creates the total
    */
    sumFields();
    }
    function sumFields() {
    /*
    The description is stored in a field called tmpDescription and like tmpPrice is built
    as the script runs through. It is then stored into the forms product field.
    */
    var tmpPrice=0;
    var tmpField=0;
    var tmpArray=new Array();
    tmpField=document.myForm.noCampers.value;
    tmpArray = tmpField.split(':');
    var tmpnoCampers=tmpArray[0];
    var tmpDescription='{b}Kit Small{/b}';

    if (document.myForm.noCampers.value>'')
    tmpField=document.myForm.noCampers.value;{
    tmpArray = tmpField.split(':');
    tmpDescription+='{br}'+tmpArray[0];
    tmpPrice+=(1*tmpArray[1]);
    }
    /*
    The following group of code (starting with if and ending with } ) is what is required for
    all your drop boxes that contain a description and a price setout in the traditional way as
    Mal's productpr field.
    Basically it first checks if the user has selected from the list and if so, runs the code.
    It splits the field into two fields around the : symbol.
    It then adds the first field ( tmpArray[0] ) to the temp field for description and adds the second
    field ( tmpArray[1] ) to the temp field for price.
    */
    if (document.myForm.addPadding.value>'') {
    tmpField=document.myForm.addPadding.value;
    tmpArray = tmpField.split(':');
    tmpDescription+='{br}'+tmpArray[0];
    tmpPrice+=(1*tmpArray[1]);
    }
    /*
    This stores the built up description to the forms product field to be compatible with
    Mal's cart
    */
    document.myForm.product.value=tmpDescription;
    /*
    This stores the built up price to the forms price field to be compatible with
    Mal's cart
    */
    document.myForm.price.value=tmpPrice;
    /*
    This updates the running total value at the bottom of the form so that the user can see
    how much they are spending before sending the data to the form
    */
    document.myForm.runningTotal.value=tmpPrice.toFixed(0);
    }
    //]]>
    </script>

    <img name="pic" src="images/No_colour.jpg" height="375" width="348">
    <br><br><br>
    <form action="http://ww#.aitsafe.com/cf/add.cfm" id="myForm" name="myForm" onsubmit="return submitForm();">
    <input name="return" value="" type="hidden">
    <input name="userid" value="" type="hidden">
    <input name="thumb" value="logo.png" type="hidden">
    <input name="product" type="hidden">
    <input name="price" type="hidden">
    <input name="noqty" value="0" type="hidden">
    <input name="qty" value="1" type="hidden">
    <p>Colour:
    <select name="productpr" id="noCampers" onchange="sumFields(); document.images['pic'].src='images/'+this.options[this.selectedIndex].value+'.jpg'" oninput="sumFields();">
    <option value="">Please Select</option>
    <option value="Gold_Metallic_colour:3.00">Gold Metallic - 3</option>
    <option value="Silver_Metallic_colour:3.00">Silver Metallic - 3.00</option>
    <option value="Copper_Metallic_colour:3.00">Copper Metallic - 3.00</option>
    <option value="Bronze_Metallic_colour:3.00">Bronze Metallic - 3.00</option>
    </select>
    </p>
    <p> Agent
    <select name="productpr" id="addPadding" onchange="sumFields();" oninput="sumFields();">
    <option value="" selected="selected">Please Select</option>
    <option value="Include agent:2.00">Include agent - 2.00</option>
    <option value="No need agent:0.00">No need agent</option>
    </select>
    </p>
    <p class="style2">Current Total: <input name="runningTotal" size="10" maxlength="10" readonly="readonly" class="runningTotal" type="text"></p>
    <p> <br/>
    <br no_space_b="true" no_space_e="true"/>
    <input name="Submit" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_LG.gif"; no_space_b="true" no_space_e="true" border="0" type="image"/></p>
    </form>