Can a "confirm" popup be customised via dropdown?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Can a "confirm" popup be customised via dropdown?

Post 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";
        }
    }
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post by Celauran »

Test the value of that element and display your text accordingly.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

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

Post 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.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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.');\">
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

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

Post 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>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply