0

I've googled the afternoon away, and I've found things that contain elements of my issue, but nothing that quite hits it on the head. I've tried adapting several things, but to no avail. The javascript fires, but can not read the value of the dynamically created field.

The overall goal here is that we have a webpage to add contractors to a database. One of the fields that we enter is sticker number to track people with. Needless to say, we don't want people to have duplicate sticker numbers. Rather than throw their entry out on submission, I am validating the entries with an ajax request (code adapted from Chirp Internet in ajaxrequest.js). I have that working. It returns an error message letting you know that sticker number BLAH is already in use. The form field is even cleared by the code so people don't enter numbers they are supposed to. The real twist comes through the button I have at the bottom of the form. It clones the last row of inputs, removes any labels (for the first row), clears a couple of the fields, and appends it to the container div.

Here is my html generated in php

<div class=\"input_fields_row\">
                <div class=\"row addCont\">
                    <div class=\"col-md-2\">
                        <label>First Name:</label>
                        <div><input type=\"text\" name=\"contFirstName[]\" class=\"cst_inputBox form-control\"/></div>
                    </div>
                    <div class=\"col-md-2\">
                        <label>Last Name:</label>
                        <div><input type=\"text\" name=\"contLastName[]\" class=\"cst_inputBox form-control\"/></div>
                    </div>
                    <div class=\"col-md-2\">
                        <label>Company:</label>
                        <div><input type=\"text\" name=\"contCompany[]\" class=\"form-control\" /></div>
                    </div>
                    <div class=\"col-md-2\">
                        <label>Employee Contact:</label>
                        <div><input type=\"text\" name=\"compContact[]\" class=\"form-control\" /></div>
                    </div>
                    <div class=\"col-md-2\">
                        <label>Sticker Number</label>
                        <div><input type=\"text\" name=\"stickerNum[]\" class=\"cst_inputBox form-control\" id=\"stickerBox\" onchange=\"checkUniq(this.name, this.value, " . $moduleAccess[0]->cloudID . ", this.id);\"/></div>
                    </div>
                </div>
            </div>

Here is my js that creates the dynamic row

jQuery(document).ready(function() {
 var max_fields      = 20; //maximum input boxes allowed
 var wrapper         = jQuery(".input_fields_wrap"); //Fields wrapper
 var add_button      = jQuery(".add_field_button"); //Add button ID
 var tableRow        = jQuery(".input_fields_row:last"); //row to copy


 var x = 1; //initlal text box count
 //Add Container Size
 jQuery(add_button).click(function(e){ //on add input button click
     e.preventDefault();
     if(x < max_fields){ //max input box allowed
         x++; //text box increment
         var newTableRow = tableRow.clone();
         newTableRow.find(".cst_inputBox").val("")
         newTableRow.find(".cst_inputBox").attr('id', 'stickerBox' + x);
         newTableRow.find('div').find('div').find('label').remove();
         jQuery(wrapper).append(newTableRow.find('div:first').append('<a href="#" class="remove_field">Remove</a>')); //add input boxes
     }
 });
 jQuery(wrapper).on("click",".remove_field", function(e){ //user click on remove text
     e.preventDefault(); 

     jQuery(this).parent('div').remove();
     x--;
 })

});

Here is the ajax request section being called upon from checkuniq.php

case "setvalue":
      var target = getNodeValue(commands[i], "target");
      var value = getNodeValue(commands[i], "value");
      if(target && value !== false) {
        var el = document.getElementById(target);
        if(el) {
          el.value = value;
        } else {
          console.log("Cannot target missing element: " + target);
        }
      }
      break;

it was called upon by this

if( $stmt->fetchColumn() > 0 ) {
    $xml->command('alert', array('message' => "$value is a Duplicate Sticker Number!" . $stmt->fetchColumn()));
    $xml->command('setvalue', array('target' => "$targetIdField", 'value' => "",));
}

For the row of inputs originally on the form, it clears it no problem, just with the dynamically added ones I get nothing. I can output target with an alert box, and it has the id correct, but when I use alert to give me the value (before I set it to nothing) it shows nothing.
I'm assuming it's something like the javascript can't see the value of the dynamically created input. I ran into much the same issue implementing autocomplete for dynamic fields, but I can't solve this by watching a class I believe.
Any help would greatly be appreciated. We launch in a week, and why this isn't critical, it's certainly for extra sprinkles on top.

CWentzloff
  • 43
  • 5
  • What's with the backslashes in the HTML markup (the attribute values)? – Pointy Jun 22 '17 at 20:48
  • Why are you using jQuery in some parts and in some parts plain JavaScript? If you have included jQuery why you don't use $(target) instead of document.getElementById(target); – Schlumpf Jun 22 '17 at 20:52
  • You can mix the two easily @Schlumpf jQuery *is* JavaScript – Jay Blanchard Jun 22 '17 at 20:54
  • Sure but its much more easier using jQuery. For me its not clear where the problem is, because there are some importent things not known. var newTableRow = tableRow.clone(); What is inside the tableRow? On which input field does it look? Hard to answer that with only some small parts of code – Schlumpf Jun 22 '17 at 20:54
  • Sorry for taking so long, I had to leave it be last night. I don't think it's a duplicate question. Not sure how I could get that removed, but the problem isn't that the javascript isn't firing, it does, it just can't read the value from the appended field. I'll update the question with more of the code as requested. As to the backslashes, I just copied and pasted the echoed portion of my php file. – CWentzloff Jun 23 '17 at 12:43
  • I tried using jQuery in the ajaxrequest.js file. I substituted the el.value = value with jQuery('#' + target).val('');, but it won't reset the field. – CWentzloff Jun 23 '17 at 12:55
  • For anyone having similar issues. The problem was with newTableRow.find(".cst_inputBox").attr('id', 'stickerBox' + x); in my js. It was finding it by class, so it was applying to the two name fields as well so I had three inputs with duplicated ids. I never tested with everything filled out, so I couldn't see that it was clearing the first input rather than the last! Palm to face. – CWentzloff Jun 23 '17 at 14:09

0 Answers0