Javascript-function lets parent-div disappear with a-tag, but not as button

Question

I wanted to work on a form which, when clicking on a button, let the parent-form disappear. I tried several things with Javascript and after I while I got a working function that works with a click on an a-tag, but not when trying the same with the button. I don't understand why, but assume it has something to do with the button-element.

Then I have the whole form and div which contains the form (shortened, just to show the structure, the form / construction works). The following is my function:

function hideFunction() {
$("#submit").closest("#fullbody").css({"display":"none"});}

<div id="fullbody" style="display:block" class="w3-content w3-white r_siu r_centered_div">

 <div id="register" role="form" class="r_form_elements">
    <form  method="post" class="form" action="profile_corp.php" enctype="multipart/form-data" autocomplete="off" >
   
   <div class="w3-row">
    <button type="submit" id="submit" name="login" class="w3-button w3-black w3-half w3-hover-yellow" onclick="hideFunction();">Add</button>
    <button class="w3-button w3-black w3-half w3-hover-pale-yellow" id="forgot">Forgot Password</button>
    <a id="submit" onclick="hideFunction();">CLICK</a>
   </div>
  </form>
 </div>
</div>

So as I said, the function works when clicking on the a-tag, but not when clicking on the button. Does anybody have an idea?

Thanks in advance.

The button submits the form (look at its type, but even without the type attribute it would submit the form), and so the page reloads. One solution: `return false` after having called the function. See: https://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms — trincot, Jul 09 '17 at 18:11
if it gets reload on button click then you need to stop the reloading by using event.preventDafault in your js function — Harpreet Singh, Jul 09 '17 at 18:15
You have used button type Submit. hence page is getting post to server and then server returning profile_corp.php page. If you want to just disappear content then just change button type from submit to button. — rishikesh tadaka, Jul 09 '17 at 18:23

score 0 · Accepted Answer · answered Jul 09 '17 at 18:18

you can use event.preventDefault() like this:

function hideFunction(event) {
event.preventDefault();
$("#submit").closest("#fullbody").css({"display":"none"});}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="fullbody" style="display:block" class="w3-content w3-white r_siu r_centered_div">

 <div id="register" role="form" class="r_form_elements">
    <form  method="post" class="form" action="profile_corp.php" enctype="multipart/form-data" autocomplete="off" >
   
   <div class="w3-row">
    <button type="submit" id="submit" name="login" class="w3-button w3-black w3-half w3-hover-yellow" onclick="hideFunction(event)">Add</button>
    <button class="w3-button w3-black w3-half w3-hover-pale-yellow" id="forgot">Forgot Password</button>
    <a id="submit" onclick="hideFunction(event)">CLICK</a>
   </div>
  </form>
 </div>
</div>

Works fine so far. But is there probably a way to use it like "submit" and "hide"? — nucky, Jul 09 '17 at 18:28
submit and hide? how will that be? submit button generally refreshes the page. if you want to hide after that then you can hide it from page load using some check. — Dij, Jul 10 '17 at 18:06
My fault, guys. There was another problem I had in my code and solved it. Got what I wanted. Had to do with ajax. Now it works as I want. So thanks you all of you and especially to you, Dij. — nucky, Jul 10 '17 at 21:41

score 0 · Answer 2 · answered Jul 09 '17 at 21:04

when you clicked on the button that type is "submit", page has refreshed and your code does not work correctly. test the following HTML Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="fullbody" style="display:block" class="w3-content w3-white r_siu r_centered_div">

    <div id="register" role="form" class="r_form_elements">
        <form  method="post" class="form" action="profile_corp.php" enctype="multipart/form-data" autocomplete="off" >
            <div class="w3-row">
                <input type="submit" id="submit" name="login" value="Add" class="w3-button w3-black w3-half w3-hover-yellow" onclick="hideFunction(event)" />
                <input type="button" id="forgot" value="Forgot Password" class="w3-button w3-black w3-half w3-hover-pale-yellow"/>
            </div>
        </form>
    </div>
</div>

And following jQuery Code:

$(function(){
   $("#submit").on("click",function(e){
      e.preventDefault();
      $(e.target).parents("form").submit()
      $(e.target).parents("#fullbody").css("display","none");
   });
});

Will test your code later, Erfan. But thank you so far. :-) – nucky Jul 10 '17 at 21:42 — nucky, Jul 10 '17 at 21:42

Javascript-function lets parent-div disappear with a-tag, but not as button

2 Answers2