running Javascript on button click

Question

I am new to Javascript so I'm not sure if my code is working as I'm not sure how to test or run it. What I want my code to do is display the JSON created from gathering all the checked boxes. I haven't added a console.log anywhere because I'm not sure where it would be appropriate. I feel as though I have all the pieces but I am not sure how to put everything together.

The expected output should be:

{
  "testpages" : [...data...],
  "configs" : [...data...]
}

My code

<script type="text/javascript">
  function grabSelected() {
    var configs = [];
    var testPages = [];
    var selectedConfigs = document.getElementByClassName('.testpages').value;
    var selectedTestPages = document.getElementByClassName('.configs').value;
    for (var i = 0; i < selectedConfigs.length; i++) {
      if (selectedConfigs[i].checked) {
        configs.push(selectedConfigs[i])
      }
    }
    for (var i = 0; i < selectedTestPages.length; i++) {
      if (selectedTestPages[i].checked) {
        testPages.push(selectedTestPages[i])
      }
    }
    var jsonString = {"testpages" : testpages, "configs" : configs};
    var testJson = JSON.stringify(jsonString);
  }
  </script>
  <body class="wrap">
    <form action="POST" >
      <div class="testpages" id="left_col">
        <input id="tp1" type="checkbox" value="1">Test Page 1<br>
        ...
        ...
        <input id="tp30" type="checkbox" value="30">Test Page 30<br>
      </div>
      <div class="configs" id="right_col">
        <input id="config_0" type="checkbox" value="Windows XP internet explorer 8">Windows XP 
        ...
        ...
        <input id="config_59" type="checkbox" value="OS X 10.9 Safari 7">OS X 10.9 Safari 7<br>
      </div>
    </form>
    <input id="" type="submit" value="Submit" onclick="grabSelected();" />
  </body>
<html>

@SpencerWieczorek good catch. I think i might have deleted too much when I was shortening my code — Liondancer
– Liondancer, Commented Oct 20, 2014 at 22:57
So what is working, is the function running? You can console.log at the start of the function to see if it's running. — Spencer Wieczorek
– Spencer Wieczorek, Commented Oct 20, 2014 at 22:58
@SpencerWieczorek i dont think my function is working as console.log doesnt output anything — Liondancer
– Liondancer, Commented Oct 20, 2014 at 23:03
Does the page reload? It's in a form, you may want to add return false on the end. — Spencer Wieczorek
– Spencer Wieczorek, Commented Oct 20, 2014 at 23:09

Prabu Raja · Accepted Answer · 2014-10-20 23:15:23Z

Some of the (trivial) mistakes found in your original code:

Used getElementByClassName instead of getElementsByClassName
Used testpages instead of testPages in jsonString formation
Used the classnames testpages and configs for parent div instead of input elements.

Here's the one you can use:

    <html>
    <script type="text/javascript">
    function grabSelected() {
    var configs = [];
    var testPages = [];
    var selectedConfigs = document.getElementsByClassName('testpages');
    var selectedTestPages = document.getElementsByClassName('configs');
    for (var i = 0; i < selectedConfigs.length; i++) {
      if (selectedConfigs[i].checked) {
        configs.push(selectedConfigs[i].value)
      }
    }
    for (var i = 0; i < selectedTestPages.length; i++) {
      if (selectedTestPages[i].checked) {
        testPages.push(selectedTestPages[i].value)
      }
    }
    var jsonString = {"testpages" : testPages, "configs" : configs};
    var testJson = JSON.stringify(jsonString);
  }
  </script>
  <body class="wrap">
    <form action="POST" >
      <div id="left_col">
        <input class="testpages" id="tp1" type="checkbox" value="1">Test Page 1<br>
        <input class="testpages" id="tp30" type="checkbox" value="30">Test Page 30<br>
      </div>
      <div id="right_col">
        <input class="configs" id="config_0" type="checkbox" value="Windows XP internet explorer 8">Windows XP 

        <input class="configs" id="config_59" type="checkbox" value="OS X 10.9 Safari 7">OS X 10.9 Safari 7<br>
      </div>
    </form>
    <input id="" type="submit" value="Submit" onclick="grabSelected();" />
  </body>
<html>

ZAR · Accepted Answer · 2014-10-20 23:16:50Z

1

I believe the problem is that you're trying to return the value of the class instead of checking to see if is checked. Instead of getElementByClassName().value, try getElementByClassName(id).getElementsByTag('input'). This will return an array that you can loop through and return the values for.

Apologies for answer formatting, typed from SO app.

answered Oct 20, 2014 at 23:16

ZAR

2,7645 gold badges43 silver badges68 bronze badges

Collectives™ on Stack Overflow

running Javascript on button click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related