Been playing with this all day, in need of a direction please. I am trying to add and remove items from a dynamic list when a button is clicked next to a field. Total newb with html js & css, this is day 3 so any pointers would be appreciated and well received. Thanks in advance for any help.
dialog = UI::HtmlDialog.new(
{
:dialog_title => 'dynamic form',
:scrollable => true,
:resizable => true,
:width => 600,
:height => 300,
:left => 200,
:top => 200,
:min_width => 50,
:min_height => 50,
:max_width =>600,
:style => UI::HtmlDialog::STYLE_DIALOG
})
html = "
<style>
.button {
border: none;
color: black;
padding: 3px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Fields</title>
</head>
<body>
<h1>DC Attributes List  <button class='button' onclick='add()'>Add</button><button class='button' onclick='remove()'>Remove</button></h1>
<div class='container'>
<form action='' method='POST'>
<div id='dc_att_list'>
</div>
<input name='submit' type='Submit' value='Submit'>
</form>
</div>
<script>
var dc_att_list = document.getElementById('dc_att_list');
function add(){
//add the dc attribute feild
var input_tags = dc_att_list.getElementsByTagName('input');
var att_no = (input_tags.length/2) + 1;
var new_dc_att = document.createElement('input');
new_dc_att.setAttribute('type','text');
new_dc_att.setAttribute('name','att_text');
new_dc_att.setAttribute('class','text');
new_dc_att.setAttribute('value',att_no);
new_dc_att.setAttribute('size',50);
dc_att_list.appendChild(new_dc_att);
//add the remove button
var new_att_remove = document.createElement('input');
new_att_remove.setAttribute('name','remove');
new_att_remove.setAttribute('type','button');
new_att_remove.setAttribute('class','button');
new_att_remove.setAttribute('onclick','remove()');
new_att_remove.setAttribute('value','Remove');
// set id to get line num somehow?
new_att_remove.setAttribute('id','variable');
//set a variable with line num for removal of clicked line?
new_att_remove.addEventListener('click', function handleClick() {
var line_id = line_num;
});
dc_att_list.appendChild(new_att_remove);
}
//how do I determine which line the button being clicked is on
//to remove that line from the list and not the last?
function remove(){
var input_tags = dc_att_list.getElementsByTagName('input');
if(input_tags.length > 0) {
dc_att_list.removeChild(input_tags[(input_tags.length - 2)]);
dc_att_list.removeChild(input_tags[(input_tags.length)-1]);
}
}
</script>
</body>
</html>
"
dialog.set_html(html)
dialog.show
