Hello, I'm new with codes. But for the last months I've been reading and started making some simple websites.
I'm adding rows with append, so users can input one email or the amount they want, if the email input box contains the name of the website or any name I choose @example.com y give options on the select next to it, if no match i show other options.
It works great for one email, the problem starts when u add rows.
I've red about binds i think this is the problem, but I'm not sure so thats why I ask help.
this is the code
the js part
I've tried giving and ID to the table and binding the table but I'm not sure if this is how its done.
I'm adding rows with append, so users can input one email or the amount they want, if the email input box contains the name of the website or any name I choose @example.com y give options on the select next to it, if no match i show other options.
It works great for one email, the problem starts when u add rows.
I've red about binds i think this is the problem, but I'm not sure so thats why I ask help.
this is the code
HTML:
<style>
.groupa, .groupb, .groupa1, .groupb1, .groupa2, .groupb2, .groupa3, .groupb3, .groupa4,
.groupb4, .groupa5, .groupb5{
display: none;
}
</style>
<input class="btn btn-primary" type="button" id="addbutton" value="+ User" title="Add
more input rows">
<small id="rowHelp" class="form-text text-muted">Press button to add rows</small>
<br>
<table class="thetable" id="usertable">
<tr>
<td><b>User email: </b></td>
<td><b>User options:</b></td>
</tr>
//** Here you insert the append with a new input and new select **//
</table>the js part
JavaScript:
// Append that will add a row with 1 email input and 1 selectbox
var i = 1;
$("#addbutton").click(function () {
$("#usertable").append('<tr>'+
'<td><input class="form-control input-lg email'+i+'" type="email" name="mail[]"
required /></td>'+
'<td>'+
'<select class="form-select" name="role[]" required>'+
'<option value=""></option>'+
'<optgroup Class="groupa'+i+'" label="Group A options">'+
'<option value="option1">option1</option>'+
'<option value="option2">option2</option>'+
'<option value="option3">option3</option>'+
'</optgroup>'+
'<optgroup class="groupb'+i+'" label="Group B options">'+
'<option value="option4">option4</option>'+
'<option value="option5">option5</option>'+
'</optgroup>'+
'</select>'+
'</td>'+
'<td><button type="button" class="removebutton" title="Remove this row">X</button>
</td></tr>').find("input").each(function () {
});
i++;
});;
$(document).on('click', 'button.removebutton', function () {
$(this).closest('tr').remove();
return false;
});
// This should determinate the new input and the new select options, if the user inputs something with gmail give options, if not then gives others.
$(".email"+i).on("keyup change", function() {
if ($(this).val().match(/@example/i)){
$(".groupa"+i).show();
$(".gruopb"+i).hide();
} else {
$(".groupa"+i).hide();
$(".groupb"+i).show();
}
});I've tried giving and ID to the table and binding the table but I'm not sure if this is how its done.
