CODEWITHSUNDEEP
javascriptformsfunction
user3698265
user3698265

Reputation:

on click showing confirmation box

I'm new in web development. I want to create a function which will show a confirm box by clicking on delete button (if row selected). I have also try to make it, my function working properly but i want to show confirm box only when row or rows will selected other wise it will show "Please select row first". Please help me

My code

<input type="submit" name="submit"  class="button"  value="Delete" onclick="javascript: var c=confirm('Are you sure you want to Delete selected members?'); if(c==false) return false; ">

this is selection code

function checkall()
{
    //alert("Hi");
    var length=document.listing_form.elements['ids[]'].length;
    //alert(length);
    for(var c1=0;c1<length;c1++)
        document.listing_form.elements['ids[]'][c1].checked=true;
} // ends

I'm unable to add image due to the low number of reputation so I have added a link kindly visit and understand to my question.

Upvotes: 1

Views: 59

Answers (3)

Barmar
Barmar

Reputation: 780851

function ok_to_delete() {
    if (rows_selected()) {
        return confirm("Are you sure you want to delete the selected members?");
    } else {
        alert("Please select a row first.");
        return false;
    }
}

function rows_selected() {
    var ids = document.listing_form.elements['ids[]'];
    var length = ids.length;
    for (var c1 = 0; c1 < length; c1++) {
        if (ids[c1].checked) {
            return true;
        }
    }
    return false;
}

Your form should then contain:

<form method="post" onsubmit="return ok_to_delete()">

Upvotes: 1

webkit
webkit

Reputation: 3369

You would need some kind of click handler that will select your rows.. so if:

<table id="rows">
<tr></tr>
<tr></tr>
<tr></tr>
</table>

You would need something like this:

var _table, _tr;
function rowSelect() {
    _table = document.getElementById("rows");
    _tr = _table.getElementsByTagName("tr");
    for (var i = 0; i < _tr.length; i++) {
            _tr[i].addEventListener('click', function() {
                if(_tr[i].className.indexOf('selected')>-1) {
                    // deselect
                    _tr[i].className = _tr[i].className.replace("selected", "");
                }
                else {
                    // select
                    _tr[i].className = _tr[i].className + " selected";
                }
            }, false);
    }
}

function confirm() {
     if (checkSelected()) {
        return confirm("Are you sure you want to delete the selected members?");
    } else {
        alert("Please select a row first.");
        return false;
    }
}

function checkSelected() {
    for (var i = 0; i < _tr.length; i++) {
        if (_tr[i].className.indexOf('selected')>-1) return true;
    }
    return false;

}

let me know if you have any questions.

Upvotes: 0

gerald
gerald

Reputation: 223

since you're using a submit button, you're better off adding this to the form tag itself, like the code below. if the confirm returns true, then the form will submit. otherwise, you will just return back to the page and submission will not continue.

<form method="post" onsubmit="return confirmThis()">
<input type="submit" name="submit"  class="button"  value="Delete" />
</form>

<script>
  function confirmThis() {
      return confirm("Are you sure you want to Delete selected members?");
  }
</script>

Upvotes: 0

Related Questions