Click here to Skip to main content
13,794,530 members
Rate this:
 
Please Sign up or sign in to vote.
See more:
I have html form for category of travel (budget category) such as 1. Take it easy, 2. 2. not too much and 3. do as much as possible .All category have their budget/money range.

After select category user need to insert amount of money in text box .
What I want is how to do it when user insert amount so his amount is not exceed the range of category he was selected. for example if he select take it easy (range is RM 500- RM 1000) so if he insert amount below 500 or exceed 1000 it appear error and need insert again. ?

What I have tried:

<label for="budget">Category Budget</label>
   <select id="budget" name="budget">
   <option value="select">Please Select<option>
   <option value="take_it_easy">Take It Easy: RM 500 - RM 1000</option>
   <option value="not_too_much">Not to Little Not to Much: RM 1000 - RM 5000</option>
   <option value="Do_as_much_as_possible">Do As Much As Possible: RM 5000 - and above</option>
    </select>

<label for="amount">Your Amount</label>
<input type="number" id="amount" name="amount" required="required" placeholder="Eg: RM 1000">
Posted 11-Dec-16 22:23pm
Updated 12-Dec-16 2:41am
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

You will have to include some javascript to set the input max / min attribute.


<script>
window.onload = function() {
    var select = document.getElementById('budget');
    select .onchange = function() {
            switch(select .selectedIndex) {
                case 0:
                  SetMinMax(500,1000)
                  break;
                //case etc.....
            }
        }
}

function SetMinMax(min,max){
   document.getElementByID("amount").setAttribute("min", min);
   document.getElementByID("amount").setAttribute("max", max);
}
</script>

<label for="budget">Category Budget</label>
   <select id="budget" name="budget">
   <option value="select">Please Select<option>
   <option value="take_it_easy">Take It Easy: RM 500 - RM 1000</option>
   <option value="not_too_much">Not to Little Not to Much: RM 1000 - RM 5000</option>
   <option value="Do_as_much_as_possible">Do As Much As Possible: RM 5000 - and above</option>
    </select>

<label for="amount">Your Amount</label>
<input type="number" id="amount" name="amount" required="required" placeholder="Eg: RM 1000">



That should get you started. You may also need to check if the input already has a value outside of the range as it may not automatically change.

Hope that helps ^_^
  Permalink  
Comments
Member 12895537 12-Dec-16 6:31am
   
I still can submit any amount I insert to the database. Maybe should have error message in all the set max and min.Can I know which part I should put error code like this -
ErrorMessage="Invalid Amount in your category. Please enter the valid amount"
Andy Lanng 12-Dec-16 6:36am
   
First, take a look at the second solution. It sounds reasonable to me. Comment on that thought so I can at least understand where you're coming from
Member 12895537 12-Dec-16 7:09am
   
I already comment. This is not price range. Before this I asked about count total price from database it is my trial and error first how can I calculate total price for destination selected .that price and that sum of price I asked before is for destination that set up by admin. This question is budget range that user need to insert and their amount is according what category they have been selected. I still in separation process . Actually user need to insert travel information include select their category and insert their amount first, so when they submit I will give them itinerary plan or destination plan (destination with price and total) .they need to insert amount because at the end I want to subtract their amount with the total price of destination and they know their balance money. It is not at the same page and it is different process.that's why I need to ensure amount of money that user insert is true according to category.
Andy Lanng 12-Dec-16 7:21am
   
Ah cool. So this is just a "proof of concept" type of thing.

Well there are a couple of ways around this. Instead of setting a max and min, you can add an onchange event to the input and check the amount then. I'll have to write up another solution for it, tho. Give me a few
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 2

Wait a minute. Why do anyone want to select a price range, enter a price, then get the script to check for consistency all on the same page? It doesn't make sense. I suggest you rethink your design.
BTW, I remember your previous question on How to calculate sum for just one column in PHP?[^] that I have helped you to solve. If you want to expect more help in future, do go back there and set thing right.
  Permalink  
v3
Comments
Member 12895537 12-Dec-16 6:59am
   
You are misunderstood. This is not price range. that sum price I asked before is for destination that set up by admin. This question is budget range that user need to insert and their amount is according what category they have been selected. I still in separation process so it is look like you confuse. Actually user need to insert travel information include select their category and insert their amount first, so when they submit I will give them itinerary plan or destination plan (destination with price and total) .they need to insert amount because at the end I want to subtract their amount with the total price of destination and they know their balance money. It is not at the same page and it is different process.
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 3

Here is the solution to check the values (again, this should just be a starting point and it in no way a final working version. If it is then that's just a coincidence)


<script>
window.onload = function() {
    var amount= document.getElementById('amount');
    amount.onchange = function() {
            switch(select .selectedIndex) {
                case 0:
                  CheckMinMax(500,1000,amount)
                  break;
                //case etc.....
            }
        }
}

function SetMinMax(min,max, amount){
   if(amount.val() < min){
     alert("You promised me more money!")
   }
   else if(amount.val() > max){
     alert("Woh, dude.  Go easy!  This is too much.")
   }
}
</script>

<label for="budget">Category Budget</label>
   <select id="budget" name="budget">
   <option value="select">Please Select<option>
   <option value="take_it_easy">Take It Easy: RM 500 - RM 1000</option>
   <option value="not_too_much">Not to Little Not to Much: RM 1000 - RM 5000</option>
   <option value="Do_as_much_as_possible">Do As Much As Possible: RM 5000 - and above</option>
    </select>

<label for="amount">Your Amount</label>
<input type="number" id="amount" name="amount" required="required" placeholder="Eg: RM 1000">





Hope that helps ^_^
  Permalink  
Comments
Member 12895537 13-Dec-16 10:34am
   
thanks Andy for your help for my starting and concept. however I got better result with this code. and I share with you :)



function validateAmount(){

var amountT = document.getElementById('amount').value;
var cat_budgetTotal = document.getElementById('cat_budget').value;

if(cat_budgetTotal == "1"){
if(amountT >=500 && amountT &lt;=1000){
alert('Your amount is valid with the package: [Take It Easy]');
}
else{
alert('Your amount is not valid for package: [Take It Easy]');
}
}
if(cat_budgetTotal == "2"){
if(amountT >=1000 && amountT &lt;5000){
alert('Your amount is valid with the package: [Not to Little Not to Much]');
}
else{
alert('Your amount is not valid for package: [Not to Little Not to Much');
}
}
if(cat_budgetTotal == "3"){
if(amountT >=5000 && amountT &lt;10000){
alert('Your amount is valid with the package: [Do As Much As Possible]');
}
else{
alert('Your amount is not valid for package: [Do As Much As Possible]');
}
}

}
Andy Lanng 14-Dec-16 4:19am
   
Cool. That's exactly what I have above just written differently ^_^

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Cookies | Terms of Service
Web03 | 2.8.181207.3 | Last Updated 12 Dec 2016
Copyright © CodeProject, 1999-2018
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100