CODEWITHSUNDEEP
javascript
dominic tanui
dominic tanui

Reputation: 21

button Function onclick not display in text filed

I'm writing a code that display content in text field on button submit click, but the code below is not working

<script>

  function myFunction() { 
  var x = document.getElementById("cost").value;
       if (document.getElementById("cost").value;) {
        var netprofit = x-(16/100*x);
        document.getElementById("net").value =  +netprofit;
        else if (document.getElementById("cost").value;) {

         var commission = netprofit * 35/100;
        document.getElementById("comm").value =  +commission;
        }
}
}
</script>

<form action="" method="POST">
<input type="text" id="cost" placeholder="kindly enter the cost value of project"><br><br>
<input type="text" name="" id="net" readonly="readonly"><br><br>
<input type="text" name="" id="comm" readonly="readonly"><br><br>
<input type="submit" value="Calculate" onclick="myFunction()">
</form>

I expect result to display in an input text onClicking button

Upvotes: 0

Views: 83

Answers (3)

Abdullah Al Mamun
Abdullah Al Mamun

Reputation: 132

<form action="" method="POST">
<input type="text" id="cost" placeholder="kindly enter the cost value of project"><br><br>
<input type="text" name="" id="net" readonly="readonly"><br><br>
<input type="text" name="" id="comm" readonly="readonly"><br><br>
<input type="button" value="Calculate" onclick="myFunction()">
</form>

    <script>
        function myFunction() {

            var x = document.getElementById("cost").value;

            if (document.getElementById("cost").value) {

                var netprofit = x - (16 / 100 * x);
                document.getElementById("net").value = +netprofit;
            }
            else if (document.getElementById("cost").value) {
                var commission = netprofit * 35 / 100;
                document.getElementById("comm").value = +commission;
            }
        }
    </script>

Output Output of this code

Upvotes: 0

harpal
harpal

Reputation: 476

Your input type is submit. So it will always submit form and reload the page. You can do in function like

  1. "return false" from your function,
  2. event.preventDefault() add in your function //it will avoid the default behavior (in your case submit form).
  3. Or use button in your HTML in place of ("input" with type "submit").

Here is working snippet, but i don't know why you are writing same condition in "if" and "else if"

function myFunction(e) {
  e.preventDefault();
  var cost = document.getElementById("cost").value;
  if (cost) {
    cost = +cost;
    var netprofit = cost - (16 / 100 * cost);
    var commission = netprofit * 35 / 100;
    document.getElementById("net").value = +netprofit;
    document.getElementById("comm").value = +commission;
    }   
}
<form action="" method="POST">
  <input type="text" id="cost" placeholder="kindly enter the cost value of project"><br><br>
  <input type="text" name="" id="net" readonly="readonly"><br><br>
  <input type="text" name="" id="comm" readonly="readonly"><br><br>
  <input type="submit" value="Calculate" onclick='myFunction(event)'>
</form>

Upvotes: 1

bgaynor78
bgaynor78

Reputation: 454

As Harpel pointed out, you have to prevent the form from submitting. This is default behavior for forms that contain a input of type submit. I'd also suggest reorganizing your code a bit (vars for each input you selecting, etc). Something like the below:

<script>
function myFunction(event) { 
  event.preventDefault();
  var costInput = document.getElementById("cost");
  var netInput = document.getElementById("net");
  var commInput = document.getElementById("comm");

  if (costInput.value) {
    var netprofit = costInput.value - (16/100 * costInput.value);
    netInput.value = netprofit;
  } else if (costInput.value) {
    var commission = netprofit * 35/100;
    commInput.value = commission;
  }
}
</script>

<form action="" method="POST">
  <input type="text" id="cost" placeholder="kindly enter the cost value of project"><br><br>
  <input type="text" name="" id="net" readonly="readonly"><br><br>
  <input type="text" name="" id="comm" readonly="readonly"><br><br>
  <input type="submit" value="Calculate" onclick="myFunction(event)">
</form>

One additional thing; I'm not sure what the if statement is supposed to be checking, as it seems to be checking the same condition. If that's the case, you can just place both calculations for the input values into one if check like:

if (costInput.value) {
  var netprofit = costInput.value - (16/100 * costInput.value);
  netInput.value = netprofit;

  var commission = netprofit * 35/100;
  commInput.value = commission;
}

Upvotes: 1

Related Questions