Hi,
I have a bit of a weird webform on my page. I've made the form for clients so they can submit changes to videos that I create. The idea is that the client can input a timecode in the video, add a change to that specific time in the video, then add another row of input fields with timecode and change. The form itself is working perfectly, but after building it into couch I get a few problems.
Have a look at the form here:
http://agoberg.tv/ridefreeclient.php
See the "Add one" and "Remove one" buttons.
The code behind this is as follows:
html:
JS:
The main problem I have is the little [] characters in the timecode and change input fields, Couch doesn't seem to like these characters. The JS is supposed to dynamically add new input fields and change their name by adding a number at the end of it.
Any idea how I could dynamically change the name of the two input fields when I click the "Add one" button?
I have a bit of a weird webform on my page. I've made the form for clients so they can submit changes to videos that I create. The idea is that the client can input a timecode in the video, add a change to that specific time in the video, then add another row of input fields with timecode and change. The form itself is working perfectly, but after building it into couch I get a few problems.
Have a look at the form here:
http://agoberg.tv/ridefreeclient.php
See the "Add one" and "Remove one" buttons.
The code behind this is as follows:
html:
- Code: Select all
<div id="input1" class="clonedInput">
<input type="text" name="timecode[]" id="timecode" value="" />
<input type="text" name="change[]" id="change" value="" />
</div>
<div>
<input type="button" id="btnAdd" value="Add one" style="width:20%" />
<input type="button" id="btnDel" value="Remove one" style="width:20%" />
</div>
JS:
- Code: Select all
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
// manipulate the name/id values of the input inside the new element
newElem.children(':eq(0)').attr('id', 'timecode' + newNum).val('').attr('name', 'timecode' + newNum);
newElem.children(':eq(1)').attr('id', 'change' + newNum).val('').attr('name', 'change' + newNum);
// insert the new element after the last "duplicatable" input field
$('#input' + num).after(newElem);
// enable the "remove" button
$('#btnDel').attr('disabled','');
// business rule: you can only add 25 names
if (newNum == 25)
$('#btnAdd').attr('disabled','disabled');
});
$('#btnDel').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
$('#input' + num).remove(); // remove the last element
// enable the "add" button
$('#btnAdd').attr('disabled','');
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$('#btnDel').attr('disabled','disabled');
});
$('#btnDel').attr('disabled','disabled');
});
The main problem I have is the little [] characters in the timecode and change input fields, Couch doesn't seem to like these characters. The JS is supposed to dynamically add new input fields and change their name by adding a number at the end of it.
Any idea how I could dynamically change the name of the two input fields when I click the "Add one" button?