Page 1 of 1

Can a "confirm" popup be customised via dropdown?

Posted: Wed Jul 09, 2014 7:26 am
by simonmlewis
We have products sold on a site, but depending on a dropdown below the BUY NOW button, each dropdown makes a <div> appear with further info.

People are missing that content, so we want to do it with a

Code: Select all

onclick=\"javascript:return confirm('........');
It works, but it does the same content no matter what option of three they select.
So while <div id='other'></div> appears if they choose 'Other', can I make the text in the pop different depending on what option they choose from that dropdown?

So from:
<select name='test'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<select>

If they choose option 2, I want "one set of text to appear in the Confirm popup", but if option 3 is chosen, I want "different set of text to appear".

It's using this Javascript to run the <div> appearance:

Code: Select all

 function optionCheck(){
        var option = document.getElementById("options").value;
        if(option == "PLEASE PAINT"){
            document.getElementById("1").style.display ="inline";
            document.getElementById("2").style.display ="none";
            document.getElementById("3").style.display ="none";
        }
        if(option == "UKARA"){
            document.getElementById("1").style.display ="none";
            document.getElementById("2").style.display ="none";
            document.getElementById("3").style.display ="none";
        }
        
        if(option == "OTHER"){
            document.getElementById("1").style.display ="none";
            document.getElementById("2").style.display ="none";
            document.getElementById("3").style.display ="inline";
        }
    }

Re: Can a "confirm" popup be customised via dropdown?

Posted: Wed Jul 09, 2014 7:30 am
by Celauran
Test the value of that element and display your text accordingly.

Re: Can a "confirm" popup be customised via dropdown?

Posted: Wed Jul 09, 2014 7:35 am
by simonmlewis
Sorry how do I do that - I'm not a Javascript expert at all. But this would be tremendous if we could do something like that.

Re: Can a "confirm" popup be customised via dropdown?

Posted: Wed Jul 09, 2014 10:18 am
by simonmlewis
I'm trying to see how this is done, but I really don't understand it. I guess I can put some form of javascript into my form (since this is JS not PHP query). But having never written it, I really don't understand how to query what I have selected, and show in my current Javascript Confirm script.

Re: Can a "confirm" popup be customised via dropdown?

Posted: Thu Jul 10, 2014 10:51 am
by simonmlewis
Can it "listen" to hear what has been selected, and assign that to a $variable.... and then based on that variable, put the appropriate text in a <div>? Or does Javascript not use variables?

I'm really stuck.

Re: Can a "confirm" popup be customised via dropdown?

Posted: Thu Jul 10, 2014 11:01 am
by Celauran
simonmlewis wrote:Can it "listen" to hear what has been selected, and assign that to a $variable.... and then based on that variable, put the appropriate text in a <div>?
That is precisely what I was suggesting.

Re: Can a "confirm" popup be customised via dropdown?

Posted: Thu Jul 10, 2014 11:02 am
by simonmlewis
Here are the basics.

Code: Select all

<Script>
  function optionCheck(){
        var option = document.getElementById("options").value;
        if(option == "1"){
            document.getElementById("1").style.display ="inline";
            document.getElementById("2").style.display ="none";
            document.getElementById("3").style.display ="none";
        }
        if(option == "2"){
            document.getElementById("1").style.display ="none";
            document.getElementById("2").style.display ="none";
            document.getElementById("3").style.display ="none";
        }
        
        if(option == "3"){
            document.getElementById("1").style.display ="none";
            document.getElementById("2").style.display ="none";
            document.getElementById("3").style.display ="inline";
        }
    }
    </script>
    
    <form>
    <select name='itemname2' onchange=\"optionCheck()\" id='options'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>

<div id='1' style='display:none; font-size: 12px'>This shows box 1</div>
<div id='2' style='display:none; font-size: 12px'>This shows box 2</div>
<div id='3' style='display:none; font-size: 12px'>This shows box 3</div>


<input type='submit' value='Buy Now' disabled class='submit_buynow' style='margin-top: 4px' onclick=\"javascript:return confirm('THIS NEEDS TO BE ALTERED, DEPENDING ON WHICH OPTION THEY CHOOSE.');\">

Re: Can a "confirm" popup be customised via dropdown?

Posted: Thu Jul 10, 2014 11:16 am
by simonmlewis
But how ?
PHP is server, so I don't think I can assign the value selected to a $variable.

Trying to see if I could use this, but not sure if it would interfere with the JAvascript already there:

Code: Select all

<select id="Colours">

<option value="0" >select..</option>
<option value="1">Red</option>
<option value="2">Black</option>
<option value="3">Green</option>
<option value="4">Gold</option>

</select>

Adding a button

<button type="button" onclick="getDropBox()">Try it</button>
<p id="demo1"></p>
<p id="demo2"></p>

Creating a method to get selected in the drop down

<script>
    function getDropBox(){
    var e = document.getElementById("Colours");
    var strval1 = e.options[e.selectedIndex].value;
    var strval2 = e.options[e.selectedIndex].text;
    document.getElementById("demo1").innerHTML = strval1;
    document.getElementById("demo2").innerHTML = strval2;   
}
</script>