Javascript – Get checkbox value from grails controller

grailsgroovygsphtmljavascript

I have a grails project where I need to select the fields that I want to delete and when I click 'delete' I need a function to delete all selected items:

html code:

<form name="bookForm" action="list" method="post">
    ....
    <g:link controller="book" action="delete">Delete</g:link>
    ....
    ....
    <g:checkBox id="select_all" name="select_all" value="" onclick="selectAll();" />
    ....
    <g:each in="${bookList}" status="i" var="bookInstance">
        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
            <td><g:checkBox id="${bookInstance.id}" name="delete_checkbox" value="" /></td>
        </tr>
    </g:each>
    ....
</form>

javascript code:

<script type="text/javascript">
    function selectAll(){//this function is used to check or uncheck all checkboxes
        var select = document.getElementById("select_all");
        var checkboxes = document.forms['bookForm'].elements['delete_checkbox'];
        if (select.checked){
            for (i = 0; i < checkboxes.length; i++) checkboxes[i].checked = true;
        }else{
            for (i = 0; i < checkboxes.length; i++) checkboxes[i].checked = false;
        }
    }//this function works fine
</script>

Problem:

I need the action to check all checkboxes in the list gsp, and if they are checked, take their ids and delete the record by id.

Can i do that either by groovy or javascript?

Best Answer

The problem with your code is that you set value for checkbox = "". That's incorrect, because value is what get submitted to server.

You need to change it as the following:

        <td><g:checkBox id="${bookInstance.id}" name="delete_checkbox" value="${bookInstance.id}"" /></td>

Related Solutions

Javascript – Which “href” value should I use for JavaScript links, “#” or “javascript:void(0)”

I use javascript:void(0).

Three reasons. Encouraging the use of # amongst a team of developers inevitably leads to some using the return value of the function called like this:

function doSomething() {
    //Some code
    return false;
}

But then they forget to use return doSomething() in the onclick and just use doSomething().

A second reason for avoiding # is that the final return false; will not execute if the called function throws an error. Hence the developers have to also remember to handle any error appropriately in the called function.

A third reason is that there are cases where the onclick event property is assigned dynamically. I prefer to be able to call a function or assign it dynamically without having to code the function specifically for one method of attachment or another. Hence my onclick (or on anything) in HTML markup look like this:

onclick="someFunc.call(this)"

onclick="someFunc.apply(this, arguments)"

Using javascript:void(0) avoids all of the above headaches, and I haven't found any examples of a downside.

So if you're a lone developer then you can clearly make your own choice, but if you work as a team you have to either state:

Use href="#", make sure onclick always contains return false; at the end, that any called function does not throw an error and if you attach a function dynamically to the onclick property make sure that as well as not throwing an error it returns false.

Use href="javascript:void(0)"

The second is clearly much easier to communicate.

Javascript – Remove properties from objects (JavaScript)

To remove a property from an object (mutating the object), you can do it like this:

delete myObject.regex;
// or,
delete myObject['regex'];
// or,
var prop = "regex";
delete myObject[prop];

Demo

var myObject = {
    "ircEvent": "PRIVMSG",
    "method": "newURI",
    "regex": "^http://.*"
};
delete myObject.regex;

console.log(myObject);

For anyone interested in reading more about it, Stack Overflow user kangax has written an incredibly in-depth blog post about the delete statement on their blog, Understanding delete. It is highly recommended.

If you'd like a new object with all the keys of the original except some, you could use the destructuring.

Demo

let myObject = {
  "ircEvent": "PRIVMSG",
  "method": "newURI",
  "regex": "^http://.*"
};

const {regex, ...newObj} = myObject;

console.log(newObj);   // has no 'regex' key
console.log(myObject); // remains unchanged

Best Answer

Related Solutions

Javascript – Which “href” value should I use for JavaScript links, “#” or “javascript:void(0)”

Javascript – Remove properties from objects (JavaScript)

Related Topic