0

Platform: WordPress

I have a group of two clonable fields name and email. So when user clones, they will have a set of name and email fields.

Note: These fields are newly added to my code and AJAX was working fine with the older code without two newly added fields.

The ajax code is always giving me an undefined index name error. See exact error below print in the debug.log file

PHP Notice: Undefined index: name in .../cart-add-process-ajax.php on line 89

Line 89 code

The below code to check if both fields have the same number of array items. So later I can combine them to an associative array.

Additionally, these fields are options so if empty AJAx should still process.

if (count($_POST[ 'name' ]) != count($_POST[ 'email' ])) {

    // throw customers error
    wp_send_json_error(__('Customer details are incorrect', 'online-shop'));
}

AJAX

$('form.addtocartform').on('submit', function (e) {
    e.preventDefault();

    let names = [];
    let emails = [];

    $('input[name="name"]').each(function () {
        names.push(this.value);
    });

    $('input[name="email"]').each(function () {
        emails.push(this.value);
    });

    $.ajax({

        method: 'POST',
        dataType: 'json',
        url: ajax_vars.ajax_url,
        data: {
            action: 'gs_add_to_cart',
            nonce: ajax_vars.nonce,
            group_id: $('#group_id').val(),
            product: $('#product').val(),
            qty: $('#qty').val(),
            name: names,
            email: emails,
            product_option: $('#product_option').val(),
        },
        ...
    }
}

HTML

<form method="POST" id="gsAddToCart" class="addtocartform" action="">
    <label for="product_option" class="gs-label">Options</label><select name="product_option" id="product_option" class="gs-select-box"><option value="">Select option</option><option value="0">Salty</option><option value="1">Sweet</option><option value="2">Bitter</option></select>
    <label for="qty" class="gs-label">Qty.</label>
    <input type="number" name="qty" id="qty" class="gs-number" min="1" step="1" value="1">

    <!-- these fields in the div are clonable and here I have a problem -->
    <div id="entry1" class="clonedInput gs-customer-fields">
        <input class="gs-field" type="text" name="name[]" placeholder="Name">
        <input class="gs-field" type="email" name="email[]" placeholder="Email">
    </div>
    <span class="gs-customer-delete" id="btnDel" disabled="disabled">delete</span>
    <span class="gs-customer-add" id="btnAdd">add</span>

    <input type="hidden" id="product" name="product" value="168">
    <input type="hidden" id="group_id" name="group_id" value="298">
    <input type="hidden" id="_gs_nonce" name="_gs_nonce" value="3676c059a6"><input type="hidden" name="_wp_http_referer" value="/products/id-adipisci-dolores-dicta/?group_id=298">
</form>

Question:

How to process ajax with clonable form fields so that I can get as an array in PHP?

Code Lover
  • 8,099
  • 20
  • 84
  • 154
  • 1
    aside from the need to inject the `nonce` value (which could be placed into a hidden field in your form to overcome the issue), it would be a lot easier to just [serialize](https://api.jquery.com/serialize/) the form fields and send the result via AJAX. It takes one line of code, and there are far less likely to be mistakes or problems. – ADyson Apr 29 '20 at 15:23
  • @ADyson, I am aware of serializing the form but in my case, I need those fields set in `data:` for various validation and checks in PHP. With serialize, I am unable to do so. – Code Lover Apr 29 '20 at 15:24
  • FWIW I think the nominated duplicate is not all that helpful, because I think the root of the issue is client-side, not server-side. – ADyson Apr 29 '20 at 15:25
  • which fields, exactly? As far as I can see, all but the `nonce` value come directly from the form already, and I've already suggested the workaround for that. – ADyson Apr 29 '20 at 15:26
  • @ADyson yeah, but I don't know how to unmark it. – Code Lover Apr 29 '20 at 15:26
  • Huh? Unmark what? – ADyson Apr 29 '20 at 15:27
  • Sorry actually it appears you do already have a `nonce` hidden field in the form too (albeit the `name` is different, but that's a trivial fix). So maybe it's only the action value which is the problem. And again, a hidden field would solve that instantly. – ADyson Apr 29 '20 at 15:27
  • @ADyson I am having trouble with `name` and `email` fields. Which is clonable `array` – Code Lover Apr 29 '20 at 15:27
  • Yes i know. you already said that. I'm suggesting that serializing the form will solve this issue. Try it. – ADyson Apr 29 '20 at 15:28
  • The hidden nonce I would remove once development is done for this part, I have created for some testing and it is still there. – Code Lover Apr 29 '20 at 15:28
  • I have tried serializing the form but didn't work. Let me try once again. – Code Lover Apr 29 '20 at 15:29
  • didn't work how? Same error, or a different one? – ADyson Apr 29 '20 at 15:29
  • 1
    OMG, it resolved.. haha. I realized my mistake while using serialize. I was using wrong action. Because I copied the line of code from another part of ajax and wasn't updating action. `data: formData + "&action=shop_add_to_cart&nonce=" + ajax_vars.nonce,` – Code Lover Apr 29 '20 at 15:34
  • Please write it as an answer so I can select as working solution. – Code Lover Apr 29 '20 at 15:35
  • I can't, because someone closed the question with a somewhat spurious duplicate. I'd have to wait to see if it gets re-opened. – ADyson Apr 29 '20 at 15:54

0 Answers0