Button call php function when it shouldn't

Question

I create a html page where are showed the info about the logged user, near the info there is a button that open a form:

<h1 class="personal">Il mio profilo: <button class="add_btn" onclick="mod()">Modifica</button></h1>
    <div class="mobile-screen" id="modform" style="display: none">
        <form action="modifica.php" method="post" id="mod-form">
            <table>
                <button class="login-btn" onclick="mod()">Chiudi</button>
                    <tr>
                        <input type="text" name="memail" id="memail" placeholder="E-Mail">
                    </tr>
                    <tr>
                        <input type="text" name="mpass" id="mpassword" placeholder="Password">
                        <input type="text" name="mmphone" id="mmphone" placeholder="Cellulare">
                    </tr>
                    <tr>
                        <input type="submit" class="login-btn" name="mod" id="signup-btn" value="Modifica">                             
                    </tr>
            </table>
       </form>
   </div>

In this form I added a button that should close it by calling a js function.

This is the button:

<button class="login-btn" onclick="mod()">Chiudi</button>

This is the JS function that is called

function mod(){
    var y = document.getElementById("modform");
    if (y.style.display === "none") {
        y.style.display = "block";
    }else{
        y.style.display = "none";
    }
}

Everytime I click that button it calls modifica.php file

Any idea why it happens?

Modified the button like this:

<button type="button" class="login-btn" onclick="mod()">Chiudi</button>

But it still call modifica.php

The solutions given in that question didn't help me, that's why I asked — Davide, Jun 23 '18 at 17:39
Yes it did. You have another problem if it did not. For example naming your functions the same as your buttons — mplungjan, Jun 23 '18 at 17:43

score 2 · Answer 1 · answered Jun 23 '18 at 17:33

2

By default a <button> in a form will be treated as a submit button(and hence submit the form to whatever the action is, in this case modifica.php), to avoid this set the type attribute to button.

<button type="button" class="login-btn" onclick="mod()">Chiudi</button>

answered Jun 23 '18 at 17:33

Musa

96,336
17
118
137

Tried it, it didn't fix the problem – Davide Jun 23 '18 at 17:35
1

This is the answer to the given question with the given button. Please check that you added it to the correct button and that your form is not cached – mplungjan Jun 23 '18 at 17:37
to refresh your pagewithout the cache you can often run ctrl + shift + R or cmd + shift + R – Matthew Ciaramitaro Jun 23 '18 at 17:39
refreshed the page without the cache and it still call the function, it is added to the correct button, I have other 3 buttons, 1 works correctly, 1 call the function and the last one reload the page. The js functions are the same, with the ID and function name changed – Davide Jun 23 '18 at 17:43
Do you have any other code relevant to the form/button you didn't post? – Musa Jun 23 '18 at 17:46
Look in the console. You will see errors or similar. Change the function to `function mod(e) { alert(e.target.innerHTML); e.preventDefault(); ...` – mplungjan Jun 23 '18 at 17:47
@Musa I have the CSS code and the PHP file that is called – Davide Jun 23 '18 at 17:51
I changed the name of the functions and now 2 buttons works correctly and 2 doesn't do nothing, but the problem is that I only changed 2 randomly, and left 1 as it was, now 2 works (1 was already working correctly and 1 was calling a php page) and 2 doesnt at all ( 1 was calling a php page and 1 was reloading the page) – Davide Jun 23 '18 at 17:54

Button call php function when it shouldn't

1 Answers1