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

A submit button is going to submit a form so why are you submitting the form with JavaScript? — epascarello
– epascarello, Commented Nov 23, 2020 at 14:54
Are you sure that the classes are updated, it is the form submission that is removing them when the page reloads? The classes do not stay on the elements — epascarello
– epascarello, Commented Nov 23, 2020 at 14:55
when i did it form wasn't submitted but class names were changed ,i wan't to do both these processes at the same time using same button — kasunk
– kasunk, Commented Nov 23, 2020 at 15:01
@epascarello i don't wanna update the classes, only wanna add and remove the class names of the elements (they are bootstrap class names) — kasunk
– kasunk, Commented Nov 23, 2020 at 15:10
Not sure what your definition of update is if add/remove is not an update. — epascarello
– epascarello, Commented Nov 23, 2020 at 15:24

Geethan · Accepted Answer · 2020-11-23 16:02:29Z

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.

user14654659 · Accepted Answer · 2020-11-23 15:37:05Z

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;
}

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related