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.