CODEWITHSUNDEEP
javascripturlcheckbox
max299x
max299x

Reputation: 1

Javascript pass value to url

I woult to use checkbox and javascript to filter search results. Actually I use this code to alterate url and obtain results but I would to obtain results in this format: ?A=A1,A2&B=B1,B2&C=C1,C2 instead ?A=A1&A=A2&B=B1$B=B2&C=C1&C=C2

This is the code

<input type="checkbox" name="a" value="A1" /> A1 Value
            <input type="checkbox" name="a" value="A2" /> A2 Value

            <input type="checkbox" name="b" value="B1" /> B1 Value
            <input type="checkbox" name="b" value="B2" /> B2 Value

            <input type="checkbox" name="c" value="C1" /> C1 Value
            <input type="checkbox" name="c" value="C2" /> C2 Value

            <input type="button" value="Test" onclick="javascript:checkbox_test()">

          <script type="text/javascript">
         // function will loop through all input tags and create
// url string from checked checkboxes
function checkbox_test() {
    var counter = 0, // counter for checked checkboxes
        i = 0,       // loop variable
        url = '',    // final url string
        // get a collection of objects with the specified 'input' TAGNAME
        input_obj = document.getElementsByTagName('input');
    // loop through all collected objects
    for (i = 0; i < input_obj.length; i++) {
        // if input object is checkbox and checkbox is checked then ...
        if (input_obj[i].type === 'checkbox' && input_obj[i].checked === true) {
            // ... increase counter and concatenate checkbox value to the url string
            counter++;
            url = url + '&c=' + input_obj[i].value;
        }
    }
    // display url string or message if there is no checked checkboxes
    if (counter > 0) {
        // remove first "&" from the generated url string
        url = url.substr(1);
        // display final url string
        alert(url);
        // or you can send checkbox values
        // window.location.href = 'my_page.php?' + url; 
    }
    else {
        alert('There is no checked checkbox');
    }
}
          </script>

Upvotes: 0

Views: 943

Answers (3)

PP_vinnieg
PP_vinnieg

Reputation: 224

You're better off using document.querySelectorAll() instead of looping through all this yourself. See this fiddle.

here's the relvant part:

var boxes = document.querySelectorAll("input[type='checkbox']:checked");
if (boxes.length > 0) {
    //convert nodeList to Array and transform to name=value pairs
    var querystring = Array.prototype.slice.call(boxes)
    .map(function (box, index) {
        alert(box);
        return escape(box.name) + '=' + escape(box.value);
    })
    .join("&"); //turn into querystring
    alert(querystring);
}

Upvotes: 0

willicab
willicab

Reputation: 64

try this:

function checkbox_test() {
    var counter = 0, // counter for checked checkboxes
    i = 0,       // loop variable
    url = new Array(),    // final url string
    input_obj = document.getElementsByTagName('input');
    ck = {};
    for (i = 0; i < input_obj.length; i++) {
        if (input_obj[i].type === 'checkbox' && input_obj[i].checked === true) {
            if(ck[input_obj[i].name] == undefined) ck[input_obj[i].name] = new Array();
            ck[input_obj[i].name].push(input_obj[i].value);
            counter++;
        }
    }
    for (k in ck) {
        url.push(k + '=' + ck[k].join(','));
    }
    if (counter > 0) {
        alert('?' + url.join('&'));
    }
    else {
        alert('There is no checked checkbox');
    }
}

Upvotes: 0

JAKEtheJAB
JAKEtheJAB

Reputation: 289

Here you go:

function checkbox_test() {
  var counter = 0, // counter for checked checkboxes
  i = 0,       // loop variable
  url = '',    // final url string
  // get a collection of objects with the specified 'input' TAGNAME
  input_obj = document.getElementsByTagName('input');

  // loop through all collected objects
  var arr = [];
  for (i = 0; i < input_obj.length; i++) {
    // if input object is checkbox and checkbox is checked then ...
    if (input_obj[i].type === 'checkbox' && input_obj[i].checked === true) {
      // ... increase counter and concatenate checkbox value to the url string
      if (arr.indexOf(input_obj[i].name) == -1) {
        arr.push(input_obj[i].name);
        url = url + '&' + input_obj[i].name + '=';
        counter = 0;
      }
      if (counter > 0) {
        url = url + ',';
      }
      url = url + input_obj[i].value;
      counter++;
    }
  }

  // display url string or message if there is no checked checkboxes
  if (counter > 0) {
    // remove first "&" from the generated url string
    url = url.substr(1);
    // display final url string
    alert(url);
    // or you can send checkbox values
    // window.location.href = 'my_page.php?' + url; 
  }
  else {
    alert('There is no checked checkbox');
  }
}

See DEMO

Upvotes: 1

Related Questions