Re: Adding successive input fields - best practices?

On Mar 28, 4:52 pm, Tom Cole <tco...@xxxxxxxxx> wrote:
On Mar 28, 4:04 pm, J Y <ricky...@xxxxxxxxx> wrote:



Hi,

I'm writing a Rails app that uses some Javascript to allow users to
click a button to add more input fields to the page. I have the code
working, but it's very unelegant, with the HTML forms packed into the
Javascript code.

I don't want to do any server-side stuff for something this simple.
I'd like to be able to put most of the HTML somewhere in a hidden div,
but can't think of a way to make that work, since I need to increment
the index of the "name" field for each new input field.

What is the best practice for doing this? Surely not the way I have
done it.

A snippet of my code is below.

function add_new_link_fields(new_count){
new_fields = '<li><span class="newlink_label">New link:</span><span
class="field_label">URL:</span><span class="r"><input id="site_url"
type="text" name="site[' + new_count + '][url]"/></span></li><li><span
class="field_label">Title:</span><span class="r"><span
class="r1"><input id="site_title" type="text" name="site[' + new_count
+ '][title]"/></span><span class="r2">Tags: <input id="site_tag_list"
type="text" name="site[' + new_count + '][tag_list]"/></span></span></
li><li><span class="field_label">Description:</span><span
class="r"><input type="text" id="site_description" name="site[' +
new_count + '][description]"><span class="controls" id="controls' +
new_count + '"></span></span></li>';
saved_values = Form.getElements('ajax_submit_form')
$('new_link_fields').innerHTML += new_fields
if (new_count > 1) {
// Restore saved values
for (i in saved_values) {
e = saved_values[i]
if (e.value && e.type != 'submit') {
$('ajax_submit_form').elements[e.name].value = e.value
}
}

old_count = new_count - 1;
$('controls' + old_count).innerHTML = "";
$('in_place_create_submit_button').value = "Add links";
}
$('controls' + new_count).innerHTML = $('controls_source').innerHTML;

}

Well assuming you didn't have the forms packed into the javascript
code:

<form id="myForm" action="..." method="...">
<input type="button" onclick="addInput();"/>
...
</form>

The the javascript:

function addInput() {
var form = document.getElementById("myForm");
var newInput = document.createElement("input");
newInput.type = "text";
var newId = "input" + form.elements.length;
newInput.id = newId;
newInput.name = newId;
form.appendChild(newInput);

}

This will create new input elements with name and ids of the type
"inputX" with each new input field being one index larger than the
previous.

HTH

Thank you! This is exactly what I was looking for... I have been
programming in Basic, C, PHP, and Rails for close to 10 years now, but
Javascript is still such a mystery to me. Do you have any sites to
recommend to me for a crash tutorial in Javascript? I see so many
pages out there that are more focused on quick copy/paste scripts for
script kiddies, not programmers.

Also, your example makes perfect sense to me, but my form is quite a
bit more complicated. How would I go about incrementing the index on
a form of this size? Ideally, I'd like to keep the styled form hidden
in HTML and then only copy/edit its properties in Javascript to keep
separation between presentation and logic, but I'm having trouble
figuring out how to navigate the DOM to edit the nodes nested so deep.

<span id="form_source" style="visibility: hidden; position:
absolute;">
<li>
<span class="newlink_label">New link:</span>
<span class="field_label">URL:</span>
<span class="r">
<input id="site_url" type="text" name="site[0][url]" />
</span>
</li>
<li>
<span class="field_label">Title:</span>
<span class="r">
<span class="r1">
<input id="site_title" type="text" name="site[0][title]" />
</span>
<span class="r2">Tags:
<input id="site_tag_list" type="text" name="site[0][tag_list]" />
</span>
</span>
</li>
<li>
<span class="field_label">Description:</span>
<span class="r">
<input type="text" id="site_description" name="site[0]
[description]" />
<span class="controls" id="controls0"></span>
</span>
</li>
</span>

JY
.