简体   繁体   中英

Filtering specific checkboxes

I have this code:

<form method="post">
    <% for(let i = 0; i < websites.length; i++){ let website = websites[i]; %>
    <fieldset id="site<%= i %>" style="padding-bottom: 0;
                padding-top: 10px;
                margin-bottom: 0;">
        <label for="checkbox<%= i %>">Attach BuiltWith results (cost 1 credit)</label>
        <input type="checkbox" name="checkbox<%= i %>" id="checkbox<%= i %>">
        <p style="color: <% if(errorMsgs[i] === 'Wrong website address'){ %> red;<% } else { %> green;<% } %>
                padding-bottom: 0;
                padding-top: 0;
                margin-bottom: 0;"
           class="">
            <%= errorMsgs[i] %>
        </p>
        <div class="">
            <input class="website"
                   name="website<%= i %>"
                   id="<%= i %>"
                   value="<%= website %>"
                   type="text"/>
            <a href="/websites/edit/<%= i %>"
               class="btn btn-info hide">
                Edit
            </a>
            <a href="/websites/delete/<%= i %>"
               data-id="<%= i %>"
               class="btn btn-danger confirmation removeBtn">
                Remove
            </a>
        </div>
    </fieldset>
    <% } %>
    <input type="submit"
           id="generateReport"
           class="btn btn-primary col-sm-offset-2"
           value="Generate a report"
           name="generateReport"
           data-toggle="modal"
           data-target="#exampleModal">
    <!-- Save button created using Javascript. In case JS is disabled -->
</form>

The <%%> thing is EJS templating system . This is what I'm doing in the back end:

router.post('/', (req, res, next) => {
    var checkboxes = Object.keys(req.body)
        .filter(key => key.startsWith('checkbox'))
        .map(k => req.body[k]);
    console.log(checkboxes);

    res.redirect('/reports');
});

What I want to achieve: As you see there can be many websites, to be sent to the back end. I need to attach a checkbox to each of them. Unfortunately, what I'm getting now is this:

[ 'on' ]

which is not what I want.

I basically need to know which checkboxes specifically were checked. How can I do it?

Edit: This is the req.body outprint

{ checkbox0: 'on',
    website0: 'google.com',
    website1: 'stackoverflow.com' }

This worked for me:

router.post('/', (req, res, next) => {
    var bwIndexes = [];
    var checkboxes = Object.keys(req.body)
        .filter(key => key.startsWith('checkbox'))
        .map(k => bwIndexes.push(k.slice(-1)));
    console.log(bwIndexes);
    console.log(req.body);

    res.redirect('/reports');
});

Following will work if your index is between 0 to 9

router.post('/', (req, res, next) => {
    var bwIndexes = [];
    var checkboxes = Object.keys(req.body)
        .filter(key => key.startsWith('checkbox'))
        .map(k => bwIndexes.push(k.slice(-1)));
    console.log(bwIndexes);
    console.log(req.body);

    res.redirect('/reports');
});

following will work even index more than 9

router.post('/', (req, res, next) => {
    var bwIndexes = [];
    var checkboxes = Object.keys(req.body)
        .filter(key => key.startsWith('checkbox'))
        .map(k => bwIndexes.push(k.replace( /^\D+/g, '')));
    console.log(bwIndexes);
    console.log(req.body);

    res.redirect('/reports');
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM