CODEWITHSUNDEEP
javascriptjquery
user3495640
user3495640

Reputation: 27

Disable submit button if value less than specified

I'm trying to disable the submit button if the form total is less than $200. I've hacked together some code but can't get it to work.

(total1) comes from another script.

<script type="text/javascript">
function () {      
      if ($('total1').val() > 200)
          $(this).closest("form").find(":submit").removeAttr("disabled");
      else
          $(this).closest("form").find(":submit").attr("disabled", "disabled");      
      }
</script>

<form method="post" action="order.php">
Order total = $<input style="border: 0px solid #000000;" size="3" type="text" id="total1" readonly />
<input type="submit" value="Submit" disabled title="Order is below $200 minimum.">

Upvotes: 2

Views: 3015

Answers (3)

Buzinas
Buzinas

Reputation: 11725

You have an anonymous function that will never be called in that way.

If you want it to be called, you need to use it on some other input event "onchange", for example. Look, I've made a fiddle using a setInterval to show you how it works:

setInterval(function () {
    if ($('#total1').val() >= 200)
        $(":submit").removeAttr("disabled");
    else
        $(":submit").attr("disabled", "disabled");
}, 1);

setInterval(function () {
    var vl = parseInt($("#total1").val());
    $("#total1").val(vl + 50);
}, 1000);

Upvotes: -1

Rahul Prasad
Rahul Prasad

Reputation: 8222

Better keep it as disbaled and enable it when total is more than 200

Assuming total input box is not readonly.
Using JQuery

<input style="border: 0px solid #000000;" size="3" type="text" id="total1" readonly />
<input type="submit" value="Submit" disabled title="..." id="myButton"> 
// I have added id as myButton
<script>
$('#total1').change(function() {  // When value of total one is changed
  if ($('#total1').val() > 200)
          $("#myButton").removeAttr("disabled");
  else
          $("#myButton").attr("disabled", "disabled");      
  }

});
</script>

Upvotes: 2

Sunny Patel
Sunny Patel

Reputation: 8077

<script type="text/javascript">
function validate() {    //Name the function  
      if ($('total1').val() > 200)
          $(this).closest("form").find(":submit").removeAttr("disabled");
      else
          $(this).closest("form").find(":submit").attr("disabled", "disabled");      
      }
</script>

<form method="post" action="order.php" oninput="validate()"> <!-- Call validate form modification -->
    Order total = $<input style="border: 0px solid #000000;" size="3" type="text" id="total1" readonly />
    <input type="submit" value="Submit" disabled title="Order is below $200 minimum."/>

Upvotes: 0

Related Questions