0

JS fiddle here

The whole picture is, I am trying to accomplish sending a multistep form using jquery-steps. Part 1 is pretty straight-forward but when in part 2, the users would be able to select a recipient or clone the fields so they can add more.

enter image description here

The fiddle I pasted doesn't include the cloning function but the name attributes for each cloned fields are always the same. (rid and recipient_id on 1st, rid and recipient_id on 2nd and so on). I'm trying to avoid looping in each one in PHP so I'd instead put them all in a single json.stringify variable that I can pass upon submit.

[{"rid":"1","recipient_id":"2","email_type":"to","to_cc_bcc":"","start_dte":"","end_dte":""},
{"rid":"1","recipient_id":"3","email_type":"Body","to_cc_bcc":"","start_dte":"","end_dte":""}]

My fiddle shows 'Uncaught ReferenceError: headers is not defined'. How will I make it work only for fields inside a specific div class?

HTML:

<div id="testform">
    <input class="input_rid" type="text" name="rid" id="rid" value="" placeholder="rid" required>
    <input class="input_recipient_id" type="text" name="recipient_id" id="recipient_id" value="" placeholder="recipient_id" required>
    <select class="select_eml" name="email_type" id="email_type" required>
        <option value="">Email type</option>
        <option value="Body">Body</option>
        <option value="Body & Attachment">Body & Attachment</option>
        <option value="Link">Link</option>
        <option value="Internal Attachment">Internal Attachment</option>
        <option value="External Attachment">External Attachment</option>
    </select>
    <select class="select_tcb" name="to_cc_bcc" id="to_cc_bcc">
        <option value="">To_CC_BCC</option>
        <option value="to">To</option>
        <option value="cc">CC</option>
        <option value="bcc">BCC</option>
    </select>
    <input class="input_sd" type="date" name="start_dte" id="start_dte" value="" placeholder="start_dte" required>

    <input class="input_ed" type="date" name="end_dte" id="end_dte" value="" placeholder="end_dte">
    <input type= "button" onclick="test()" value="Save">
</div>

JS:

$.fn.serializeObject = function()
{
   var o = {};
   var a = this.serializeArray();
   $.each(a, function() {
       if (o[this.name]) {
           if (!o[this.name].push) {
               o[this.name] = [o[this.name]];
           }
           o[this.name].push(this.value || '');
       } else {
           o[this.name] = this.value || '';
       }
   });
   return o;
};

window.test = function() {
headers
var formData = JSON.stringify(jQuery('#testform').serializeObject());
console.log(formData);
}

UPDATE: Fiddle updated to include the cloning thingamajig.

Odinovsky
  • 551
  • 1
  • 6
  • 23
  • The first line of your `window.test` function is just `headers` - that's what the reference error is. – nnnnnn Sep 06 '16 at 01:27
  • `JSON array` - JSON is a string, you want an array of JSON strings? – Jaromanda X Sep 06 '16 at 01:29
  • oh man..it's edited out..the log only shows {}..it looks like the function doesn't fire for a div class – Odinovsky Sep 06 '16 at 01:29
  • pretty much in a form of [{"rid":"1","recipient_id":"2","email_type":"to","to_cc_bcc":"","start_dte":"","end_dte":""}] so I can json_decode it in php – Odinovsky Sep 06 '16 at 01:31
  • Change the `` to a `
    ` and [see what happens](https://jsfiddle.net/1dkfzos2/8/) (after you also fix that `headers` thing)...
     – nnnnnn Sep 06 '16 at 01:31
  • it works if I changed it to a form..but a form inside an original form may cause me some headaches.. – Odinovsky Sep 06 '16 at 01:32
  • OK, I think [this is what you want](https://jsfiddle.net/1dkfzos2/9/), so I'm going to close this incident as a duplicate because the `headers` reference error is just a typo in your code as already mentioned, and the real problem is how to serialise the contents of an element that isn't a form. – nnnnnn Sep 06 '16 at 01:49

0 Answers0