Hi,
I was wondering what would be the best approach for the following
situation:
I have a form that has some fixed input fields. In addition there are
fields the use can add or remove dynamically.
Is there a way to do this using form or custom form, or do I need to write
all the code myself.
Currently I wrote the form manually, but this means that I need to write
all the validation and error display as well. Am I right?
Here is a snippet of an example code showing my use-case:
<pre>
{{extend 'layout.html'}}
<form enctype="multipart/form-data" method="POST" action="{{=URL()}}">
<fieldset>
<LABEL for="value1">value1</LABEL><INPUT type="text" id="value1"
name="value1"><BR>
<ol>
<li>
<LABEL for="value2">value2</LABEL><INPUT type="text" id="value2"
name="value2">
</li>
<div id="middle_stations"></div>
<a class="btn" id="add_station_btn">Add a Stop</a>
<li>
<LABEL for="value3">value3</LABEL><INPUT type="text" id="value3"
name="value3"><BR>
</li>
</ol>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</fieldset>
</form>
<div id="middle_template" class="hidden">
<li>
<LABEL for="value_middle">value_middle</LABEL><INPUT type="text"
id="value_middle" name="value_middle"><BR>
<a class="btn" id="remove_station_btn">Remove</a>
</li>
</div>
<script>
$(document).ready(function(){
$('#add_station_btn').on('click',function(){
$('#middle_stations').append($('#middle_template').html());
var index=$('#middle_stations li:last').index();
var newname=index+'_value_middle';
$('#value_middle').attr('id',newname);
$('#'+newname).attr('name',newname);
var newname=index+'_remove_station_btn';
$('#remove_station_btn').attr('id',newname);
$('#'+newname).on('click', function() {
$(this).closest('li').remove();
});
});
});
</script>
</pre>
Thanks
--
---
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/groups/opt_out.
