Prefill Formfield using Javascript/Jquery and Labels from URL

Question

I'm having difficulties prefilling a form using it's Labels in front of the formfields.

The ID's of my formfiels are randomly generated, so also the for="fieldID" for the labels.

An example:

<td>
<label class="required" for="ebc2566ad1c3793b">
name:
<font class="error">*</font>
</label>
<span>
<input id="_ebc2566ad1c3793b" class="form-control" type="text" value="" name="ebc2566ad1c3793b" placeholder="" maxlength="30" size="16">
</span>
</td>

I'm able to use javascript to fill the fields using the ID from the URL, but not using the identifier "name:" which is between the label.

As I'm also using jQuery in soem scripts I'm also not sure which DOM to use.

Examples are very welcome.

Answer 1

I'm not sure I understand the problem 100%, you want to access form labels based on its content yes? If so:

Using the :contains() selector you can grab the form labels like this:

var nameLabel = $("label:contains('name:')");

From there you could use the .next() method to grab the sibling element which in this case will be the span containing the input field. So to access the input you would do something like this:

var nameInput = nameLabel.next().find('input');

From there use .val() to set its content like so:

nameInput.val('John doe')