Fill several checkboxes based on a single query string

Question

I have a view with a form that stores some values in the database. Later I can open the record again and it passes the stored values by querystrings into the same view, filling the fields.

Works fine for text fields and dropdown, but I cannot make the same process for the checkboxes. The thing is, they all have to be in the same js var, into the same database field, into the same querystring, and then into the checkboxes again.

// for testing
function displayTest() {
    var contacts = $('input[name="fieldtotest"]:checked').map(function () {
        return this.value;
    }).get();
    $("#outputtest").val(contacts.join(","));
}
$(":checkbox").change(displayTest);
displayTest();

//gets all qs
function getParameterByName(name, url) {
    if (!url) {
      url = window.location.href;
    }
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var setmyfield = getParameterByName('myqsvar');
if (setmyfield) { 
// something that selects the right checkboxes
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" align="left">
  <div>
    <label for="fieldtotest">Field to test</label>
  </div>
  <div>
    <input type="checkbox" name="fieldtotest" value="John Smith">John Smith<br>
    <input type="checkbox" name="fieldtotest" value="Joseph Augustine">Joseph Peter<br>
    <input type="checkbox" name="fieldtotest" value="Sarah Smith">Sarah Smith<br>
    <input type="checkbox" name="fieldtotest" value="Caroline Gabes">Caroline Gabes
  </div>
</div>
<input type="text" id="outputtest" size="50">

If the field is a simple text box, I would pick the querystring and use

$('#fileldid').val(qsvalueforthefield)

to populate the field again, but I cannot do this for several checkboxes in a single var/qs. Is this possible?

Assign/add an extra class updateable-checks to the checkboxes and use it to select the relevant DOM elements — Alfabravo
– Alfabravo, Commented Dec 20, 2017 at 21:15
Care to elaborate? How does that help me pass the values has a QS? — João Gomes
– João Gomes, Commented Dec 20, 2017 at 21:25

Barmar · Accepted Answer · 2017-12-20 21:47:45Z

1

If you have the list of values in a comma-separated string, as you create in displayTest(), you can loop through this and check the corresponding boxes.

var param = "Joseph Augustine,Caroline Gabes";
$.each(param.split(","), (i, val) => 
    $(":checkbox[name=fieldtotest][value='" + val + "']").prop("checked", true));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" align="left">
  <div>
    <label for="fieldtotest">Field to test</label>
  </div>
  <div>
    <input type="checkbox" name="fieldtotest" value="John Smith">John Smith<br>
    <input type="checkbox" name="fieldtotest" value="Joseph Augustine">Joseph Peter<br>
    <input type="checkbox" name="fieldtotest" value="Sarah Smith">Sarah Smith<br>
    <input type="checkbox" name="fieldtotest" value="Caroline Gabes">Caroline Gabes
  </div>
</div>
<input type="text" id="outputtest" size="50">

answered Dec 20, 2017 at 21:47

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

João Gomes Over a year ago

Perfect. Thanks.

Collectives™ on Stack Overflow

Fill several checkboxes based on a single query string

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related