requinix wrote:So I'm totally lost now.
Ok, so that makes two of us now haha
This is a completely new script for a new page and not at all connected with the old autocomplete script you helped me with before (which is working great

).
In this page I want to manually save a product to my database. All other info like product name and so on I know how many fields it takes but not for ingredients or allergens.
So the page looks something like:
Code: Select all
Food name: (input box)
net weight: (inputbox)
grossweight:(inputbox)
...
manufacturer: (Inputbox)
..
.
then a new table
Ingredient: (Input box)
<button> Add more ingredients</button>
When clicking that button it looks like this:
Ingredient: (Input box)
Ingredient: (Input box) remove
Ingredient: (Input box) remove
Ingredient: (Input box) remove
<button> Add more ingredients</button>
and exacly the same for allergens (another table)
Allergen: (Inputbox)
<button> Add more allergens</button>
requinix wrote: you should not be throwing around IDs like that.
Yeah, I have this little voice inside my head telling me the same thing... thats why I tried to make unique IDs with using a variable k (increasing int) so I get something like
ingredientid[2]
ingredientid[3]
ingredientid[4]
and so on.. the i & j variables are just to keep track of how many inputfields I have for ingredients and allergens (increase when I add new field with button and decrease when i hit remove... The reason I cant have them as id counter is if I add 1 2 3 4 5 and then remove 1 4 5 and then add 3 new fields I will have 2 4 3 4 5 so I use k which will give 2 4 6 7 8.... if i do as just stated before..
requinix wrote:I'll wrap the elements in one container with a unique ID
Yeah I tried to do that using a div .wrapper class and add the new elements to it (all tutorials on jquery add and remove inputbox I found did it this way) (probably for a reason) but since I use tables in the rest of the form I wanted to see if I could add it to the table instead (took me several hours to get it right heh).
Also the first ingredient: (inputbox) that I placed with the html was inside a table so when I added the new fields to the wrapper div they appered above my table and I couldnt get it to look good.. Now I add and remove them from the table and it looks and behaves the way I want.. except I have no clue on how to target the fields individually (or if I even have to.. but I guess I do...)
I just copied the autocomplet() function from the previous script to have something to work with (like for testing i add ean numbers as ingredients and when I get it to work I do a new php file to search the DB for ingredients instead of eans...
I will resend the login info to the page as a pm if you want to take a look how it looks and works with the buttons.
edit
from the page.php file....
Code: Select all
/../
<table class="content_table">
<?php
foreach ($product as $key=>$value) {
switch($key){
case "nutrition_info":
foreach ($nutritionlist as $k=>$v) {
$k=ucfirst($k);
?>
<tr>
<td style="background-color: white;"><?php echo $k;?></td>
<td style="background-color: white;"><input name="<?php echo $k;?>" type="text" size="10" id="<?php echo $k."_id";?>"></td>
<td style="background-color: white;"><?php echo $v;?></td>
</tr>
<?php
}
break;
}
}
?>
</table>
</div>
</div> <!-- End top wrapper -->
<div class="wrapper">
<div id="ingredient_nfo"><h2 style="text-align:center;">Ingredients list</h2>
<div class="field_wrapper" id="ingredient_wrapper">
<table class="content_table" id="Ingredient_table">
<tr>
<td>Ingredient</td>
<td><div class="input_container"><input type="text" name="ingredient[]" size="20" id="ingredientid[]" autocomplete="off"><ul id="ingredient_list_id" tabindex="-1"></ul></div></td>
<ul id="ingredient_list_id" tabindex="-1"></ul>
<td></td>
</tr>
</table>
</div>
<center><button class="add_button" id="add_ingredient">Add ingredient</button></center>
</div>
<div id="allergen_nfo"><h2 style="text-align:center;">Allergen information</h2>
<table class="content_table" id="Allergen_table">
<tr>
<td>Allergen</td>
<td><input type="text" name="allergen[]" size="20" id="allergenid[]" autocomplete="off"><ul id="allergen_list_id" tabindex="-1"></ul></td>
<td></td>
</tr>
</table>
<center></center><button class="add_button" id="add_allergen">Add allergen</button></center>
</div>
</div> <!-- End bottom wrapper -->
<button class="add_button" id="submit_button" type="submit" form="Add_product" value="Submit">Submit</button>
</form>
</div>
Edit: I tried to use div class input_container to make an onklick -> alert function just to see if it would work..
the php file:
Code: Select all
<td>Ingredient</td>
<td><div class="input_container"><input type="text" name="ingredient[]"
size="20" id="ingredientid[]" autocomplete="off">
<ul id="ingredient_list_id" tabindex="-1"></ul></div></td>
<ul id="ingredient_list_id" tabindex="-1"></ul>
the js file
Code: Select all
$('#add_ingredient').click(function() {
$('#Ingredient_table').append('<tr><td><p>Ingredient</p></td><td><div class="input_container"><input type="text" id="ingredientid['+k+']" size="20" name="ingredient['+k+']" value="'+k+'" placeholder="Input Value" /><ul id="ingredient_list_id['+k+']" tabindex="-1"></ul></div></td><td><a href="#" class="remove_field"><p style="font-size:50%;">Remove</p></a></td></tr>');
...
..
.
$('.input_container').click(function(){
alert('Click');
})
But it only works on the first -> Ingredient: (input box) (which i add in the .php script)
but not the ones i add with the button??? (that i add in the js)
Edit:
when i print_r $_POST on submit it seems like all ingredients and allergens i add in the fields are posted correctly (as an array) so atleast that part seems to be working

I suspect its enough to name the fields like name=ingredient[] and it will store all the fields in an array so no need to write name=ingredient['+k+'].. so I guess i can remove the id field from these since I don't really need it...
Ok so the $_post is working (i tried to remove id= and name=blabla['+k+'] and it still works.. )