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

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

JavaScript
​x
 
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>

JavaScript
 
 <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

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

JavaScript
 
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>

JavaScript
 
<!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.

Advertisement

Answer