[Resolved] How to listen for Form submit event

[Author]

Posts

[Nashaat]

Hi,
I am using a custom javascript to hide a div when a user click submit. Tgis code works with any buttons as expected. I am trying to use this with cred submit button but seems not to work. How i hide the form when user click submit?

<button onclick="myFunction()">Click Me</button>

<div id="myDIV">
  This is my DIV element.
</div>

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

[Christian Cox]

You could use a jQuery click event handler to respond to click events, but if you hide the Form you might also hide the Form's validation messages. There is no JavaScript API to respond to validation events in Forms, so this is mostly outside the scope of support we provide here.

jQuery(document).ready(function(){
  jQuery( "#something" ).on( "click", function() {
    console.log( jQuery( this ).text() );
  ));
});

https://api.jquery.com/on/

[Nashaat]

I have following code which works with Cred delete Button. Everytime a user click on the cred delete button the whole div will get hidden and the post getting trashed as well. one part is missing and i am not sure how to do it, since i am using this button in a views loop, the button need to be with id and th div as well, i tried several things but couldn't manage it...

This code works for only the first item in the loop:

<div class="col-12 col-md-6 col-lg-3 p-2 mb-2" id="myD">
[wpv-post-title]
</div>

[cred_delete_post_link action='trash' text='Delete' message_show='0' class='btn btn-warning btn-lg mydelete']

<a href="#" class="myshow">show div</a>

$(document).ready(function(){
  $(".mydelete").click(function(){
    $("#myD").hide();
  });
  $(".myshow").click(function(){
    $("#myD").show();
  });
});

I tried first this but this didnt work:

<div class="col-12 col-md-6 col-lg-3 p-2 mb-2" id="myD_[wpv-post-id]">
[wpv-post-title]
</div>

[cred_delete_post_link action='trash' text='Delete' message_show='0' class='btn btn-warning btn-lg mydelete_[wpv-post-id]']

<a href="#" class="myshow_[wpv-post-id]">show div</a>

$(document).ready(function(){
  $(".mydelete_[wpv-post-id]").click(function(){
    $("#myD_[wpv-post-id]").hide();
  });
  $(".myshow_[wpv-post-id]").click(function(){
    $("#myD_[wpv-post-id]").show();
  });
});

I tried as well followingcode but still not working:

<div class="col-12 col-md-6 col-lg-3 p-2 mb-2" id="myD_[wpv-post-id]">
[wpv-post-title]
</div>

[cred_delete_post_link action='trash' text='Delete' message_show='0' class='btn btn-warning btn-lg mydelete_[wpv-post-id]']

<a href="#" class="myshow_[wpv-post-id]">show div</a>

$(document).ready(function(){
  $(".mydelete_"+postid).click(function(postid){
    $("#myD_"+postid).hide();
  });
  $(".myshow_"+postid).click(function(postid){
    $("#myD_"+postid).show();
  });
});

i hope you can help with this.

[Nashaat]

This works as well for the first Item in the Loop:

jQuery(document).ready(function(){
  jQuery(".mydelete").click(function(){
    $("#myD").hide();
  });
  jQuery(".myshow").click(function(){
    $("#myD").show();
  });
});

[Christian Cox]

Again, this is custom code that falls outside the scope of support we provide here because there is no JavaScript API for Forms or for the delete post link shortcode. It is not recommended to override the functionality of the delete post shortcode with custom JavaScript. You're on your own if you want to attach click handlers to the delete post controls.

[Nashaat]

For someone else who has the same situation, here is a solution:

/** HTML */

<div class="col-12 col-md-6 col-lg-4 col-xl-3 p-2 mb-2" id="myD[wpv-post-id]">
[wpv-post-title]
</div>

[cred_delete_post_link action='delete' text='Delete This' message_show='0' class='btn btn-danger mydelete']


/** Javascript and jQuery */

jQuery(".mydelete").click(function(){
    var value=this.id;
    var items = value.split('_');
    $("#myD"+items[3]).hide();
});