Forum Moderators: open
Now, what I need to do is create a form where each section has an "Add"/"Remove" button that lets the user add or remove a new section of the form. Each section is a popup button, a text field and of course the add/remove buttons.
Luckily for you guys I've managed to, with a few online examples, do the majority of what I need to do. I'm able to, with a button add a pop-up button, the buttons and a text field. I currently only have the Add button working but I'm going to later work on numerically naming the buttons/fields so that I can read them in a server-side script and use the numbers to help my client-side script remove any section the user wants.
Before I get there though, I've run into two very simple problems. First of all I need to be able to generate <label>s on the fly. I can create them but I don't know what the correct code is to populate them. I've tried mylabel.text = 'mytext' but that doesn't appear to work. Does anyone know how I can accomplish this?
Secondly, one of the properties, onclick, for a button I am generating contains JavaScript. Specifically:
onclick="addField(this.form, 'blah');"
How should I mangle this to work in the JavaScript? I tried just escaping the apostrophes but that doesn't seem to work:
myfield.value = 'addField(this.form, \'blah\');';
And also just keeping the string as is but using double quotes, neither seem to work.
I appreciate any help you guys might be able to give me. If it helps you can see the HTML+script below:
<html>
<head>
<script type="text/javascript" language="JavaScript">
var i = 2;function addField (form, fieldName) {
if (document.getElementById) {
var select = document.createElement('select');
select.name = fieldName;
var appselect = document.createElement('option');
var toolselect = document.createElement('option');
var intselect = document.createElement('option');
var compselect = document.createElement('option');
var otherselect = document.createElement('option');
appselect.text = 'Application Icon';
toolselect.text = 'Toolbar Icon';
intselect.text = 'Interface Icon';
compselect.text = 'Company Logo';
otherselect.text = 'Other';
select.appendChild(appselect);
select.appendChild(toolselect);
select.appendChild(intselect);
select.appendChild(compselect);
select.appendChild(otherselect);
var remicon = document.createElement('input');
var addicon = document.createElement('input');
remicon.type = 'button';
remicon.value = '-';
remicon.disabled = 'disabled';
addicon.type = 'button';
addicon.value = '+';
addicon.onclick = "addField(this.form, 'blah');";
var quantfield = document.createElement('input');
quantfield.type = 'text';
quantfield.size = '8';
quantfield.value = 'Icon ' + i++;
form.appendChild(document.createElement('br'));
form.appendChild(select);
form.appendChild(quantfield);
form.appendChild(remicon);
form.appendChild(addicon);
}
}
</script>
</head>
<body>
<form name="formName">
<label>Type:</label><select name="icontype" size="1"><option value="applicationicon" selected="selected">Application Icon</option><option value="toolbaricon">Toolbar Icon</option><option value="interfaceicon">Interface Icon</option><option value="companylogo">Company Logo</option><option value="other">Other</option></select>
<label>#:</label><input type="text" name="fieldName" value="Icon 1" size="8" />
<input type="button" value="-" disabled="disabled"><input type="button" value="+" name="addfield" onclick="addField(this.form, 'blah');">
</form>
</body>
</html>
It's mostly repetitive but I hope it shows you what I am trying to do.
Also, I will undoubtedly come up with a problem once I go on further in the script. Should I just continue this thread or create a new one? Thanks :)
Secondly: It looks like you've done the right thing with the quotes:
onClick="addField(this.form, 'blah');"
As long as the attribute quotes (the ones for the onClick) are a different kind to the string quotes (the ones for blah) it should be fine. That's what you've got, so the problem is something else.
HTH
Anyways, like I said... I'd probably later have problems and I do :)
My script has been updated and now each element.. label, popup menu, label, text field, button, button in that order is numbered. So each "set" on elements is given one number like "type 3" "select 3" "quantfield 3" etc... This lets me, know what set of elements to delete when the user presses the delete button.
Originally I was just going to, one the user presses delete, take the number of current set and then do something like:
removeElement('select ' + thenumber);
removeElement('quantfield ' + thenumber);
But apparently it doesn't work like that I have to use removeChild and pass it a number? Is this correct? Is there any way to reference the elements I want to delete by name?
Anyways I set up a temporary example where it will delete the first child in the form. The weird thing is that on the first click... it doesn't delete anything... then subsequent clicks it finally does. Anyone know what's wrong with this? Also in my code if I try and copy and paste my deleteChild line twice.. to try and delete multiple elements at the same time... that doesn't seem to work.
Sorry for the barrage of questions but I really want to get this working and it is quite a learning experience... Again, thanks for any help :)
You can find an example here [s88199767.onlinehome.us].
Here's the remField function:
function remField(number) {
thevalue = number.form.getElementsByTagName('select')[1].name;
thevalue = thevalue.split(' ')[1];
// increment by 4
number.value = thevalue;
number.form.removeChild(number.form.childNodes[0]);
}
The actual remove button itself is passed with "this" like this:
<input type="button" value="-" onclick="remField(this);" name="rem 1">
then I work from there...
