Send POST request only if check box is checked

问题

So I'm trying to make my script only log and send the POST request if the check box is checked... The problem is when I un-check the box. It's still sending the post request.

This script basically adds check boxes to a specific elements, and gets the ID value if it's checked.

Here's my script:

const userlist = document.querySelector('#userlist');
new MutationObserver(() => {
userlist.querySelectorAll('.user:not([data-has-checkbox])').forEach((userDiv) => {
const checkbox = userDiv.insertBefore(document.createElement('input'), userDiv.children[0]);
checkbox.type = 'checkbox';
userDiv.dataset.hasCheckbox = true;
});
}).observe(userlist, { childList: true });

userlist.addEventListener('change', ({ target }) => {
if (target.matches('.user > input[type="checkbox"]')) {
const userDiv = target.parentElement;
var nameb = userDiv.id.replace("user_", ""); // Make variable for REQUEST
}

var evtSource = new EventSource("http://myurl.com/_watch//_index?_=1557958948927");

evtSource.onmessage = function(e) {
var obj = JSON.parse(e.data);
var line = JSON.stringify(obj.line)
var size = JSON.stringify(obj.lineWidth)
var color = JSON.stringify(obj.lineColor) // Not needed, but defined 
anyways.
var chat = JSON.stringify(obj.msg)
var original = line
//var mirror = JSON.parse(JSON.stringify(original).replace(/\d+/g, number => 20 + +number))
var list = JSON.parse(JSON.stringify(userList)) //LineLog


//--------------------------



if (obj.ident === nameb) // if ident ='s userDiv's Id value...
{
$.post("/draw.php?ing=_index", {
           l: (line),
           w : parseInt(obj.lineWidth) + 2,
           c: ("ffffff"),
            o: ("100"),
            f: ("1"),
            _: ("false")
})
console.log(nameb) //log the value.
}
});

If you can help me find a solution that would be great. Thank you.

回答1:

Have you tried this?

const checkbox = document.querySelector('#myCheckBox');

checkbox.addEventListener('change', e => {
    const self = e.target;
    if (self.checked){
        // send
    }
})

const userlist = document.querySelector('#userlist');
new MutationObserver(() => {
userlist.querySelectorAll('.user:not([data-has-checkbox])').forEach((userDiv) => {
const checkbox = userDiv.insertBefore(document.createElement('input'), userDiv.children[0]);
checkbox.type = 'checkbox';
userDiv.dataset.hasCheckbox = true;
});
}).observe(userlist, { childList: true });

userlist.addEventListener('change', (e, { target }) => {
if ( !e.target.checked ) return
if (target.matches('.user > input[type="checkbox"]')) {
const userDiv = target.parentElement;
var nameb = userDiv.id.replace("user_", "");
}

var evtSource = new EventSource("http://myurl.com/_watch//_index?_=1557958948927");

evtSource.onmessage = function(e) {
var obj = JSON.parse(e.data);
var line = JSON.stringify(obj.line)
var size = JSON.stringify(obj.lineWidth)
var color = JSON.stringify(obj.lineColor) // Not needed, but defined 
anyways.
var chat = JSON.stringify(obj.msg)
var original = line
//var mirror = JSON.parse(JSON.stringify(original).replace(/\d+/g, number => 20 + +number))
var list = JSON.parse(JSON.stringify(userList)) //LineLog


//--------------------------



if (obj.ident === nameb) // if ident ='s userDiv's Id value...
{
$.post("/draw.php?ing=_index", {
           l: (line),
           w : parseInt(obj.lineWidth) + 2,
           c: ("ffffff"),
            o: ("100"),
            f: ("1"),
            _: ("false")
})
console.log(nameb) //log the value.
}
});

来源：https://stackoverflow.com/questions/57771258/send-post-request-only-if-check-box-is-checked

标签

javascript

tampermonkey