Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2002
    Location
    -
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript Alert Box

    Hi,


    I have a form on a web page that includes two property value dropdown menus, one for a 'property minimum proce' and one for a 'property maximum price'.

    I need to ensure that when a user selects a max' price it is higher than the min' price and would like to alert them with a javascript pop up box if it is not the case.

    However I'm unsure how to do this and was hoping someone could help me!

    Here is a slim version of the form code:-


    <form name="form0" method="post" action="search.php" onSubmit="return CheckForm2(this);" language="JavaScript">
    <div align="center" class="style11"><span class="style12">PROPERTY SEARCH <br>
    <br>
    Area:</span><br>
    <select name="loc" size="1" id="loc">
    <option value="" selected>-- Please Select --</option>
    <option>London E10</option>
    <option>London E11</option>
    <option>London E17</option>
    <option>London E18</option>
    </select>
    <br>
    <span class="style13"><strong>Min price</strong></span> <br>
    <select name="pp1" id="pp1">
    <option value="100000" selected>£100,000</option>
    <option value="120000">£120,000</option>
    <option value="140000">£140,000</option>
    </select>
    <br>
    <span class="style13"><strong>Max price</strong></span><br>
    <select name="pp2" id="select">
    <option value="200000" selected>£200,000</option>
    <option value="220000">£220,000</option>
    <option value="240000">£240,000</option>
    <option value="260000">£260,000</option>
    </select>
    <br>
    <span class="style13"><strong>No of beds </strong></span><br>
    <select name="pb" size="1" id="pb">
    <option value="" selected>-- Any Number --</option>
    <option value="1">-- 1 --</option>
    <option value="2">-- 2 --</option>
    <option value="3">-- 3 --</option>
    <option value="4">-- 4 --</option>
    <option value="5+">-- 5 or more --</option>
    </select>
    <br>
    <input type="submit" name="Submit2" value="Search">
    </div>
    </form>

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Possibly something like this

    myform=document.form0

    if(myform.pp1.options[myform.pp1.selectedIndex].value>myform.pp2.options[myform.pp2.selectedIndex].value){
    alert("Ouch!")
    }

    and add

    onchange="chkprice()"

    to

    <select name="pp1" id="pp1">
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Just to elaborate on Mr.J's example:

    Code:
    <html>
    	<head>
    		<script type="text/javascript">
    			function chkPrice()
    			{
    				var p1=document.form0.pp1.options[document.form0.pp1.selectedIndex].value;
    				var p2=document.form0.pp2.options[document.form0.pp2.selectedIndex].value;
    				
    				if(p1>p2)
    				{
    					alert("The minimum price must be smaller than the maximum price!");
    					return false;
    				}
    				else
    				{
    					return true;
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<form name="form0" method="post" action="search.php" onSubmit="return CheckForm2(this);" language="JavaScript">
    <div align="center" class="style11"><span class="style12">PROPERTY SEARCH <br>
    <br>
    Area:</span><br>
    <select name="loc" size="1" id="loc">
    <option value="" selected>-- Please Select --</option>
    <option>London E10</option>
    <option>London E11</option>
    <option>London E17</option>
    <option>London E18</option>
    </select>
    <br>
    <span class="style13"><strong>Min price</strong></span> <br>
    <select name="pp1" id="pp1">
    <option value="100000" selected>£100,000</option>
    <option value="120000">£120,000</option>
    <option value="140000">£140,000</option>
    <option value="220000">£220,000</option>
    
    </select> 
    <br>
    <span class="style13"><strong>Max price</strong></span><br>
    <select name="pp2" onchange="var stat=chkPrice();" id="select">
    <option value="200000" selected>£200,000</option>
    <option value="220000">£220,000</option>
    <option value="240000">£240,000</option>
    <option value="260000">£260,000</option>
    </select>
    <br>
    <span class="style13"><strong>No of beds </strong></span><br>
    <select name="pb" size="1" id="pb">
    <option value="" selected>-- Any Number --</option>
    <option value="1">-- 1 --</option>
    <option value="2">-- 2 --</option>
    <option value="3">-- 3 --</option>
    <option value="4">-- 4 --</option>
    <option value="5+">-- 5 or more --</option>
    </select>
    <br>
    <input type="submit" name="Submit2" value="Search"> 
    </div>
    </form> 
    	</body>
    </html>
    You could take the onchange out and test on submit, that might be a bit less intrusive, also check the value of the variable "stat" before submitting, ensuring it is set to true, else the alert will be thrown but there is nothing preventing the user from submitting anyway.

    Basscyst
    Last edited by Basscyst; 01-15-2005 at 05:41 PM.
    Helping to build a bigger box. - Adam Matthews

  • #4
    New Coder
    Join Date
    Aug 2002
    Location
    -
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks guys - spot on, works a treat.
    Thank you very much for your time, much appreciated.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •