Hi i’ve managed to use jquery to add a new text field when I press the “add” button but when I try with a select box which get the options from a database mysql using php it doesn’t work. I hope someone could help me please. Many thanks
This is my javascript code
$(document).ready(function(){
//group add limit
var maxGroup = 5;
//add more fields group
$(".addMore").click(function(){
if($('body').find('.fieldGroup').length < maxGroup){
var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
}else{
alert('Hai raggiunto il massimo numero di immobili registrabili di '+maxGroup+'');
}
});
//remove fields group
$("body").on("click",".remove",function(){
$(this).parents(".fieldGroup").remove();
});
});
Can you expand on what doesn’t work? I thought you were trying to add the “select” with Ajax as you were doing with the field in your first example.
You seem to have the select code in twice, with the same id. Is that a forum post error, or have you duplicated the ids in the real code? If you do need to have it twice, I’d be tempted to run the PHP loop and build the options into a string first, then just echo it twice. And you do have some means of connecting to the database first, presumably?
Hi, i’ve got the code duplicated on purpose so when I click to the add button it does show duplicated fields and i can manke another entry. You can see what i’m trying to achieve in a demo here. The dropdown menu works fine in the first code but not on the duplicated and i think it is because there might be some thing with the javascript code maybe with the following portion.
var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
I’ve tested everything without the dropdown and it works fine. Many thanks again for your help
Hmm, this is strange. I am learning JS and PHP, so I butted in originally in case there was a PHP thing I could help with. However I’ve copied and pasted your entire code into a local file, changed the database details as I don’t have your data, and mine seems to work exactly as you’d expect, in terms of drawing the drop-downs.
The only thing I can see that differs may not come into play until you actually submit the form. I just tried to add a pair of form tags and a submit button to test it out, but couldn’t get it to actually submit, so there’s obviously some other JS going on to stop that happening. However, if the problem is in the data when it is submitted, it may be because on all the other field names, you have added the array designators [] (for example name="ubicazione[]" ) but on the drop-down, you have not. I’m not sure off the top of my head whether that means it will submit the first value, or the last value, but either way you won’t get all the values.
Hi @droopsnoot many thanks for helping me. If you try to select one of the options in the duplicated dropdown does it keep the selection? Because the only problem I have now is when I duplicate the dropdown and I want to select the option it doesn’t keep it into the field after is selected. It only works for the first form but not for the added or duplicated forms. This is why i thought the problem could be in the javascript, maybe here:
+$(".fieldGroupCopy").html()
I’m not a javascript expert and i’m learning as well as you, so I might have said something stupid.
Hi @droopsnoot i’ve just found the problem. There is a conflict with bs-select plugin, in fact it works fine removing bs-select from the following code.