Javascript activating form action

Asked

Viewed 2,621 times

1

Situation: You have the form and one of the options I want is that it gives a result of the sum of variables automatically by clicking a button or it can be without clicking, only the user just typing the values.

The problem is: he is already activating the action for the processing page in php without the user finishing the form. How could you show the result of the sum below the add-up button (the same one that is activating the action)?

code in header:

<script type="text/javascript">  
    function calcula(){  
    var val1 = document.getElementById("pa").value;  
    var val2 = document.getElementById("di").value;
    var val3 = document.getElementById("insc").value;  
    var val4 = document.getElementById("outr").value;
    var soma = parseFloat(val1)+parseFloat(val2)+parseFloat(val3)+parseFloat(val4);  
    document.write("" + soma);  
}  
</script>

now the code within the html form calling the above function:

<legend>Calcular total.</legend>    
<button id="calcular" onclick="calcula()">Calcular</button>

I accept suggestions to do otherwise or other language.

javascript html
  • 2

    Nothing in this code is triggering the action, but the document.write is overwriting the entire document.

  • The user puts the numbers in the variables, would like a button or even the sum of these fields were made and shown. the code ai is part inside the form in HTML, I could use alert(soma); it shows the result (as I want) only that after the form gives the action for me to handle the information on another PHP page, but I do not want it. I just want to show the result of these variables automatically summed within the form itself that the user is filling.

  • One thing q tb can be done is to place the call from the calculus function on the onchange of values input, so vc has the sum value before pressing the button.

2 answers

1


By default, the <button></button> submit the form when pressing the button.

This behaviour can be changed by indicating type="button" (jsfiddle).

<button id="calcular_btn" type="button" onclick="calcular()">X</button>

Alternatively, you can delete the commit by returning the value false in the event of the button (jsfiddle 1, jsfiddle 2).

<button id="calcular_btn" onclick="calcular(); return false;">X</button>

There is also a third way to suppress submission: through the preventDefault (jsfiddle DOM simple, jsfiddle jQuery).

$('#calcular_btn').click(function (e) {
    calcular();
    e.preventDefault();
});

  • Excellent! just a simple return false inside the button. document.write and instead I used document.getElementById("soma").value = soma; it returns the result for an HTML text field <input type="text" name="soma" id="soma"> that sits below the other variables as I wanted.

0

If what you need is to cancel sending the form ideally add the code below to your 

document.getElementById('id-do-form').onsubmit = function() {
    return false;
}

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.