I'm currently working on a project for which I have to develop a WordPress plugin allowing to manipulate tables in databases. My work is based on this plugin, which I'm improving and editing to match the requirements of my company : https://wordpress.org/plugins/create-db-tables/
My problem however doesn't concern MySQL, but html, Php and jQuery (especially jQuery, which I'm not familiar with, at all). It's about dynamically generating a form, itself depending on a dynamically generated form (yeah...).
With the following code, the plugin user is able to dynamically add rows to the table he's creating. I would like him to be able to add "sub-rows" (I know how to handle it server-side, my problem here is only the interface), like that :
https://i.sstatic.net/9FfbW.png
When the user clicks "Add subrows", a zone appears where he can fill out a form, etc. It works perfectly (at least the interface) for the first row, but after that, whenever I click another "Add subrows" button, nothing happens.
I'd appreciate very much if someone could take time to tell me where I'm doing something wrong. Thank you so much ! :)
Here is my code : (the first jQuery script seemingly works, I'm not the one who developed it. I duplicated it and tried to adapt the second one to my "sub-row" requirement)
<form id="create-table" method="post" action="<?php echo admin_url('admin-post.php'); ?>">
<input type="hidden" name="action" value="add_table">
<fieldset class="table-fieldset">
<label id="table-name">Table Name:</label> <br />
<span style="position: relative; top: 2px;"><?php echo "Choose prefix (by default wp_ ) : " ?></span><input type="text" class="prefix-name" name="prefix_name" size="4" id="prefix-name"><br />
<span style="position: relative; top: 2px;"><?php echo "Choose table name :" ?></span><input type="text" class="table-name" name="table_name" size="30" id="table-name">
<span>(Alphanumeric only, no special characters.)</span> <br/> <br/>
<span><font color="blue"><strong>Will this table be used for user authentication ? </strong></font></span><input type="checkbox" class="is-user-auth" name="is_user_auth" id="is-user-auth"><br/>
<span><strong>/!\ Only one table at a time can be used for user authentication : if a current table is used for this purpose, it won't be anymore.</strong></span><br/><br/>
</fieldset>
<div id="rows">
<fieldset class="row-fieldset" id="row-fieldset" value="1"><label id="row-label">Row:</label><input type="text" class="name-input" name="name[]" placeholder="Name" size="20"><input type="text" class="type-input" name="type[]" placeholder="Type [Ex: bigint(20)]" size="20"><span id="null-label">Null</span><input type="checkbox" class="null-input" name="null[]"><input type="text" class="default-input" name="default[]" placeholder="Default Value" size="20"><span id="unique-label">Unique</span><input type="checkbox" class="unique-input" name="unique[]"><button type="button" class="row-dynamic" style="background-color: #E3F6CE">Add subrows</button><div id="subrows1" value="1"></div></fieldset>
</div>
<div id="add-row">
<button type="button" class="add-row button-secondary">Add Row</button>
</div>
<fieldset>
<input type="hidden" id="items" name="items" value="1" />
</fieldset>
<fieldset>
<input type="hidden" id="subrowitems" name="subrowitems" value="101" />
</fieldset>
<fieldset>
<button type="submit" class="button button-primary button-large">Create Table</button>
</fieldset>
</form>
<!-- Script to add rows -->
<script>
jQuery(function($) {
$('.add-row').click(function () {
$('#items').val(function(i, val) { return +val+1 });
var val_2=$('#items').attr('value');
var subrow_name = 'subrows'+val_2;
var rowHTML = '<fieldset class="row-fieldset" id="row-fieldset" value=\"'+val_2+'\"><label id="row-label">Row:</label><input type="text" class="name-input" name="name[]" placeholder="Name" size="20"><input type="text" class="type-input" name="type[]" placeholder="Type [Ex: bigint(20)]" size="20"><span id="null-label">Null</span><input type="checkbox" class="null-input" name="null[]"><input type="text" class="default-input" name="default[]" placeholder="Default Value" size="20"><span id="unique-label">Unique</span><input type="checkbox" class="unique-input" name="unique[]"><button type="button" class="row-dynamic" style="background-color: #E3F6CE">Add subrows</button><div id=\"'+subrow_name+'\" value=' + val_2 + '></div></fieldset>';
$('#rows').append(rowHTML);
});
$("input.name-input").on({
keydown: function(e) {
if (e.which === 32)
return false;
},
change: function() {
this.value = this.value.replace(/\s/g, "");
}
});
$("input.table-name").on({
keydown: function(e) {
if (e.which === 32)
return false;
},
change: function() {
this.value = this.value.replace(/\s/g, "");
}
});
});
</script>
<!-- Script to add subrows -->
<script>
jQuery(function($) {
$('.row-dynamic').click(function () {
$('#subrowitems').val(function(i, val) { return +val+1 });
var val_3=$('#subrowitems').attr('value');
var subrowHTML = '<fieldset class="subrow-fieldset" value=\"' +val_3+ '\"><label id="subrow-label">Subrow:</label><input type="text" class="subrow-name-input" name="name[]" placeholder="Name" size="20" style="background-color: #E3F6CE"><input type="text" class="subrow-type-input" name="type[]" placeholder="Type [Ex: bigint(20)]" size="20" style="background-color: #E3F6CE"><span id="subrow-null-label">Null</span><input type="checkbox" class="subrow-null-input" name="null[]" style="background-color: #E3F6CE"><input type="text" class="subrow-default-input" name="default[]" placeholder="Default Value" size="20" style="background-color: #E3F6CE"><span id="subrow-unique-label">Unique</span><input type="checkbox" class="subrow-unique-input" name="unique[]" style="background-color: #E3F6CE"></fieldset>';
var subrow_val = '#subrows'+$('#row-fieldset').attr('value');
$(subrow_val).append(subrowHTML);
});
$("input.subrow-name-input").on({
keydown: function(e) {
if (e.which === 32)
return false;
},
change: function() {
this.value = this.value.replace(/\s/g, "");
}
});
$("input.table-name").on({
keydown: function(e) {
if (e.which === 32)
return false;
},
change: function() {
this.value = this.value.replace(/\s/g, "");
}
});
});
</script>
