How to submit form and handle events using onclick(js function) method in same submit type input field(button)

Question

 function takeaction(id,tr,i,form){ if (window.confirm("Do you want to mark this record ? ")) { var form = getElementById(form); var element = document.getElementById(tr); element.classList.remove("table-danger"); element.classList.add("table-success"); var element = document.getElementById(id); element.remove(id); var element = document.getElementById(i); element.classList.add("fa-check"); form.submit(); } else { return 0; } }

 <table class="table table-hover"> <thead class="thead-dark"> <h1>Notifications</h1> <tr> <th>Name</th> <th>Action</th> </tr> </thead> <tbody> <tr id='tr4' class='table-danger'> <td>Geethan</td> <td> <form action='include/action.php?user_id=4' method='post' id='form' > <input id='tr4_btn' class='btn btn-warning' type='submit' name='action1' value='Take action' onclick="takeaction(this.id ,'tr4','tr4_i','form')" /> <i id="tr4_i" class="fa " style="color:green;"></i> </form> </td> </tr>

when I tried to submit this form and change the class names by using js function "onclick="takeaction(this.id ,'tr4','tr4_i','form')" the form is submitted but class names are not changed. I want to do both these processes at once

Answer 1

 function takeaction(id,tr,i,form){ if (window.confirm("Do you want to mark this record ? ")) { var $this = jQuery('#'+id); var $form = $this.parents('form'); // var form = getElementById(form); var element = document.getElementById(tr); element.classList.remove("table-danger"); element.classList.add("table-success"); var element = document.getElementById(id); element.remove(id); var element = document.getElementById(i); element.classList.add("fa-check"); $form.submit(); //form.submit(); } else { return 0; } }

 <!DOCTYPE html> <html> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <table class="table table-hover"> <thead class="thead-dark"> <h1>Notifications</h1> <tr> <th>Name</th> <th>Action</th> </tr> </thead> <tbody> <tr id='tr4' class='table-danger'> <td>Name</td> <td> <form action='include/action.php?user_id=4' method='post' id='form' > <input id='tr4_btn' class='btn btn-warning' type='submit' name='action1' value='Take action' onclick="takeaction(this.id ,'tr4','tr4_i','form')" /> <i id="tr4_i" class="fa " style="color:green;"></i> </form> </td> </tr> </tbody> </table> </body> </html>

You may help this code. I used some jquery inside the js function.

Answer 2

Here is a C# MVC example. The "Html.BeginForm" is the submit-form, which causes the MyController MyControllerMethod() method to be called. Within this submit-form is the javascript function, myValidateForm(event). In this Java function, you can return event.preventDefault(), which prevents the submit-form from calling the controller or simply return to invoke the controller.

@using(@Html.BeginForm("MyControllerMethod",
    "MyController", FormMethod.Post, new { onsubmit = "myValidateForm(event)" }))
        
// Java Function
function myValidateForm(event)
{
    event = event || window.event || event.srcElement;
    bool error = true;
    if (error)
    { 
        event.preventDefault(); // block submit from calling controller
        return;
    }
    return;
}

How to submit form and handle events using onclick(js function) method in same submit type input field(button)

Question

2 answers

solution1
2 ACCPTED 2020-11-23 16:02:29

solution2
0 2020-11-23 15:37:05

How to submit form and handle events using onclick(js function) method in same submit type input field(button)

Question

2 answers

solution1 2 ACCPTED 2020-11-23 16:02:29

solution2 0 2020-11-23 15:37:05

solution1
2 ACCPTED 2020-11-23 16:02:29

solution2
0 2020-11-23 15:37:05