button Function onclick not display in text filed

Question

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

You're not doing anything to prevent the form from being submitted — j08691, Sep 13 '19 at 15:43
You need to prevent the form from being submitted. See this answer https://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted — Hastradamus, Sep 13 '19 at 15:48

harpal · Answer 1 · 2019-09-13T16:14:35.677

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

"return false" from your function,
event.preventDefault() add in your function //it will avoid the default behavior (in your case submit form).
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>

I have edited answer as suggested by @bgaynor78 to use "var" — harpal, Sep 13 '19 at 16:17
If it is working then accept and upvote it, it will motivate me to write for others also. — harpal, Sep 13 '19 at 16:24

bgaynor78 · Answer 2 · 2019-09-13T16:03:09.907

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;
}

Abdullah Al Mamun · Answer 3 · 2019-09-14T08:32:08.363

<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

Why include JQuery when it's not being used in the js code? – bgaynor78 Sep 13 '19 at 16:01 — bgaynor78, Sep 13 '19 at 16:01

button Function onclick not display in text filed

3 Answers3