Tak wygląda formularz w js
function gui_addArea(id) {
//var id = props.length;
//id = 1;
props[id] = document.createElement('DIV');
document.getElementById('form_container').appendChild(props[id]);
props[id].id = 'img_area_' + id;
props[id].aid = id;
props[id].className = 'img_area';
//hook ROW event handlers
myimgmap.addEvent(props[id], 'mouseover', gui_row_mouseover);
myimgmap.addEvent(props[id], 'mouseout', gui_row_mouseout);
myimgmap.addEvent(props[id], 'click', gui_row_click);
var temp = '<input type="text" name="img_id" class="img_id" value="' + id + '" readonly="1"/>';
//temp+= '<input type="checkbox" name="img_active" class="img_active" id="img_active_'+id+'" value="'+id+'">';
//could be checkbox in the future
temp+= '<input type="radio" name="img_active" class="img_active" id="img_active_'+id+'" value="'+id+'">';
temp+= '<select name="img_shape" class="img_shape">';
temp+= '<option value="rect">rectangle</option>';
if (document.getElementById('dd_output').value != 'css') {
temp+= '<option value="circle">circle</option>';
temp+= '<option value="poly">polygon</option>';
temp+= '<option value="bezier1">bezier</option>';
}
temp+= '</select>';
temp+= 'Współrzędne: <input type="text" name="img_coords" class="img_coords" value="">';
temp+= 'URL: <input type="text" name="img_href" class="img_href" value="#">';
temp+= 'Alt: <input type="text" name="img_alt" class="img_alt" value="">';
temp+= 'Sektor: <input type="text" name="img_sektor" class="img_sektor" value="">';
temp+= 'Rząd <input type="text" name="img_rzad" class="img_rzad" value="">';
//temp+= 'Sektor <select name="img_sektor" class="img_target">';
//temp+= '<option value=""><not set></option>';
//temp+= '<option value="_self" >this window</option>';
//temp+= '<option value="_blank" >new window</option>';
//temp+= '<option value="_top" >top window</option>';
//temp+= '</select>';
props[id].innerHTML = temp;
//hook more event handlers to individual inputs
myimgmap.addEvent(props[id].getElementsByTagName('input')[1], 'keydown', gui_cb_keydown);
myimgmap.addEvent(props[id].getElementsByTagName('input')[2], 'keydown', gui_coords_keydown);
myimgmap.addEvent(props[id].getElementsByTagName('input')[2], 'change', gui_input_change);
myimgmap.addEvent(props[id].getElementsByTagName('input')[3], 'change', gui_input_change);
myimgmap.addEvent(props[id].getElementsByTagName('input')[4], 'change', gui_input_change);
myimgmap.addEvent(props[id].getElementsByTagName('select')[0], 'change', gui_input_change);
//myimgmap.addEvent(props[id].getElementsByTagName('select')[1], 'change', gui_input_change);
if (myimgmap.isSafari) {
//need these for safari
myimgmap.addEvent(props[id].getElementsByTagName('select')[0], 'change', gui_row_click);
//myimgmap.addEvent(props[id].getElementsByTagName('select')[1], 'change', gui_row_click);
}
//set shape as nextshape if set
if (myimgmap.nextShape) {props[id].getElementsByTagName('select')[0].value = myimgmap.nextShape;}
//alert(this.props[id].parentNode.innerHTML);
gui_row_select(id, true);
}
I jak wypełnię pierwsze pola w input to dodają się kolejne, bo to generator jest do map