How to always hide a div when the submit button is first clicked?

JavaScript
1

I want to permanently hide the <div class="show_hide" id="hide_this"> after pressing the submit button

I’m creating a multi-step form, what I mean when the user skips the first step, the div disappears

<button class="frm_button_submit" id="toggle" type="submit" [button_action]>[button_label]</button>

<div class="show_hide" id="hide_this">

<label><input type="checkbox" name="rememberMe" value="true" tabindex="4"><i class="a-icon a-icon-checkbox"></i><span class="a-label a-checkbox-label">

Keep me signed in.

<span class="a-declarative" data-action="a-popover" data-a-popover="{&quot;activate&quot;:&quot;onclick&quot;,&quot;header&quot;:&quot;\&quot;Keep Me Signed In\&quot; Checkbox&quot;,&quot;inlineContent&quot;:&quot;\u003cp>Choosing \&quot;Keep me signed in\&quot; reduces the number of times you're asked to Sign-In on this device.\u003c\/p>\n\u003cp>To keep your account secure, use this option only on your personal devices.\u003c\/p>&quot;}">

<a id="remember_me_learn_more_link" href="javascript:void(0)" class="a-popover-trigger a-declarative">

Details

<i class="a-icon a-icon-popover"></i></a>

</span>

</span></label>

</div>
2

I want to permanently hide the <div class="frm_button_submitt" id="hideOnSubmit"> after pressing the submit button

I’m creating a multi-step form, what I mean when the user skips the first step, the div disappears

<div class="frm_submit">
[if back_button]<button type="submit" name="frm_prev_page" formnovalidate="formnovalidate" class="frm_prev_page" [back_hook]>[back_label]</button>[/if back_button]

<!-- When you click here for the first time -->
<button class="frm_button_submit" type="submit" id="toggle" [button_action]>[button_label]</button>

<!-- This div disappears in the following steps -->
<div class="frm_button_submitt" id="hideOnSubmit">
<label><input type="checkbox" name="rememberMe" value="true" tabindex="4"><i class="a-icon a-icon-checkbox"></i><span class="a-label a-checkbox-label">
          Keep me signed in.
          <span class="a-declarative" data-action="a-popover" data-a-popover="{&quot;activate&quot;:&quot;onclick&quot;,&quot;header&quot;:&quot;\&quot;Keep Me Signed In\&quot; Checkbox&quot;,&quot;inlineContent&quot;:&quot;\u003cp>Choosing \&quot;Keep me signed in\&quot; reduces the number of times you're asked to Sign-In on this device.\u003c\/p>\n\u003cp>To keep your account secure, use this option only on your personal devices.\u003c\/p>&quot;}">
            <a id="remember_me_learn_more_link" href="javascript:void(0)" class="a-popover-trigger a-declarative">
              Details
            <i class="a-icon a-icon-popover"></i></a>
          </span>
</span></label>
</div>


[if save_draft]<a href="#" tabindex="0" class="frm_save_draft" [draft_hook]>[draft_label]</a>[/if save_draft]
</div>

This is a simple solution, using an enumerator, but I could not implement it, is there someone who can help me to write it correctly and completely

const element = document.getElementById("#");
let clickCount = 0;

element.addEventListener("click", (e) => {
  if(clickCount > 0) return element.style.display = "none";
  
  console.log("Clicked")
  clickCount++;
});

Note: The number of clicks next 4 clicks

Animated GIF-downsized_large

3

I’m thinking that a click count is the wrong solution here.

A more reliable way is to use the submit event handler of the form, to hide that section instead.

.hide {
  display: none;
}

const form = document.querySelector("form");
form.addEventListener("submit", function (evt) {
    document.querySelector("#hideOnSubmit").classList.add("hide");
});
1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.