4

I am sending a form to an external server I have limited access to. I have a form with many check-boxes for different products the user is interested in. I need to send these in a single string that lists all the products they checked.

I know I need to use JavaScript to capture the selections and combine them into one variable and then send it through POST to the external server. I'm not very experienced in Javascript to know how exactly.

Ryan Haining
  • 30,835
  • 10
  • 95
  • 145
Brian Barrus
  • 375
  • 3
  • 6
  • 16
  • What format does the server expect the data? Just one string of name-value pairs, or is it in JSON format as amsterdam discusses below? –  Jul 29 '13 at 23:35
  • Actually I am sending it to a SalesForce server so I just need the input names of the checked checkboxes in a comma separated string: "Product A, Product D, Product F". Also, I've never used JSON to POST a form. – Brian Barrus Jul 29 '13 at 23:52

2 Answers2

3

I'm just going to give you a hint on how to catch up the checked checkboxes once the form is submitted (DEMO).

Imagine you have the following html:

<form id="testForm">
    <input class="checkbox" name="one" type="checkbox">
    <input class="checkbox" name="two" type="checkbox">
    <input class="checkbox" name="three" type="checkbox">
    <input type="hidden" name="checkboxStr" id="checkbox_str">
    <button>Send</button>
</form>

You can add an event listener to form submission:

var form = document.getElementById('testForm');

try {
    form.addEventListener("submit", submitFn, false);
} catch(e) {
    form.attachEvent("onsubmit", submitFn); //IE8
}

And then you can get all the needed checkboxes with for example its class name. Loop trough them and add the checked ones to an array which you later on join to a string.

function submitFn(event) {
    event.preventDefault();
    var boxes = document.getElementsByClassName('checkbox');
    var checked = [];
    for(var i=0; boxes[i]; ++i){
      if(boxes[i].checked){
        checked.push(boxes[i].name);
      }
    }

    var checkedStr = checked.join();

    document.getElementById('checkbox_str').value = checkedStr;
    form.submit();

    return false;
}

You can now send this string via ajax or you can add a hidden form field and set the string as its value and submit the form without ajax.

Marcel Gwerder
  • 7,707
  • 4
  • 31
  • 56
  • I'd perfer `if (form.addEventListener) { ... } else { ... }` over a try-catch block – K Mehta Jul 30 '13 at 01:10
  • Can you explain why? :) – Marcel Gwerder Jul 30 '13 at 01:12
  • I'm sure it's a dumb mistake but after much effort I can't get the script to set the value of the hidden field... oyy – Brian Barrus Jul 30 '13 at 04:00
  • I hope it's not uncouth to post an address, but my page is at www.megadyne.com/new/samples.php to see the code. – Brian Barrus Jul 30 '13 at 04:02
  • @MarcelGwerder Consider how try-catch is implemented and the cost incurred to throw an exception. A primitive if statement is significantly simpler. Also, I prefer using a try-catch for error conditions, and I don't believe that this qualifies as one. – K Mehta Jul 30 '13 at 07:22
  • @BrianBarrus Added example code for the hidden input field solution to my answer. Didn't update the jsfiddle though. To simplify things you may change the submit event handler to a click event handler of the button which will not interfere your manual submission. – Marcel Gwerder Jul 30 '13 at 08:32
  • @KshitijMehta Isn't "*undefined function addEventListener*" or whatever happens when in IE8 an error? – Marcel Gwerder Jul 30 '13 at 09:03
  • Note: if you get a "Submit is not a function error", you may need to remove any name attribute from your submit button for this to work. http://stackoverflow.com/questions/833032/submit-is-not-a-function-error-in-javascript – Justin Mar 02 '17 at 10:29
1

First you need to grab the name value pairs and store them to an object as such:

var obj = {}; // this will hold your name value pairs

From there you can use JSON to send the data to the server. JSON data is in string form when it is sent to the server.

var json_string = JSON.stringify(obj);
nativist.amsterdam.vallon
  • 27
  • 5