1

I am wondering if any of you guys can help me with the issue I am having. Basically, I have a table which has a button to add dynamic rows with a index from 0- to the last row number.

I have added a JS fiddle here: jsfiddle.net/mfbcvprc/4

What I am looking for, is when a new table row is added to the dynamic table, the dropdown menu which is present in the first row of the table, gets copied so it can be used in the next new row which has been added.

Would someone kindly be able to show me an example of how this would be done? At this stage I have exhausted my knowledge of Javascript and HTML, so seek a bit of guidance!

Russell664
  • 13
  • 5
  • Its impossible to figure out what your problem is.. what exactly do you want to do? what is the end result you want? so much code.. for what? it looks like a bunch of questions muddled into one - can you create a jsfiddle. I have started it for you: https://jsfiddle.net/mfbcvprc/ tidy it up - hit update and send on the new URL and i might be able to help. – JF it Feb 25 '16 at 15:37
  • Hi JF aplogies, got myself into a bit of a pickle. I have edited the JS fiddle here: https://jsfiddle.net/mfbcvprc/4/ with tided up code, how it is in my document. So what I am looking for is, on the row which is present first there is a drop down menu present for three entries. When a new table row is added, I am looking for that dropdown to be available. At the moment, a new row is appended as expected, but the dropdown menu does not get transferred with it. I would like it so, when a new row is added, the drop down box can be selected on the new row. Thank you for any help in advance. – Russell664 Feb 25 '16 at 15:44
  • when i select something in that dropdown box it is the only selectable item after - is that by design? or a bug? – JF it Feb 25 '16 at 15:52
  • 1
    I can confirm that there is only one dropdown, it should contain three options: Plants Rooms, Attic and Cleaning cupboard. Latest JS Fiddle: http://jsfiddle.net/mfbcvprc/6/ – Russell664 Feb 25 '16 at 16:03

1 Answers1

0

Check this answer first: https://stackoverflow.com/a/17378538/1800668

I have updated jsfiddle.. but was having wierd issues with jquery that I havent seen before so see this codepen instead:

https://codepen.io/anon/pen/YqKEJq

Basically the change I made was this: 

$(document).ready(function() {
  $('.btnAdd').click(function() {
    addRow();
    var newDropDown = $('#table1 tr:last').find('input[name*=area]');
    newDropDown.attr('list', 'areaList').removeAttr('type');
  });

It adds the new row, as you have done, and then finds the newly entered input, and updates its attributes so that it's identical to the previous one. Ive never worked with your datalist types of control so not sure if this approach is good.. but it works in the pen.

Community
  • 1
  • 1
JF it
  • 2,403
  • 3
  • 20
  • 30
  • Hi JF, you are a genius. That is grand, never thought that it would be a little code as that, I was expecting AJAX calls and everything. Bare with me, I am still fairly new to all this, but feel i'm picking it up as I go. I have updated the Codepen to work with the remove button as well. However, another question, at some stage I will add another drop down list to this table, would I be able to include it in the existing code, or would I need to create a copy and change the variables from there? Thanks again! – Russell664 Feb 25 '16 at 16:58
  • Just had a play around with it, and have added a test 'reason' drop down with three entries with the following code on the Codepen: https://codepen.io/anon/pen/aNoEyN Am I along the right lines? – Russell664 Feb 25 '16 at 17:07
  • @Russell664 Yep that looks okay.. you are overcomplicating it grossly in your first try but its okay.. check out JQuery Clone for more ideas.. you could use that instead of addRow function - it may replace all of it actually.. too early in the morning. – JF it Feb 25 '16 at 17:13
  • 1
    Hi JF, thank you again, and sorry for my late response on this. I am going to add more dynamic tables to this form, along with more dropdowns so wish me luck! – Russell664 Feb 26 '16 at 09:43
  • Sure thing, glad I could help. Good luck. – JF it Feb 26 '16 at 20:37