Wayne,
Hi! I'm quite new to JQuery myself ( 2 days), and also primarily a Java
developer. I'm doing something very similar to yourself!
The JQuery validator plugin has an example (in the dynamic form examples)
that has helped me.
I'm playing with the final tweaks to get this to work... but in essence this
is what I've done so far. (CODE at end)
What I've noticed is that this method requires the "dynamic" portion to be
within a textarea.
I couldn't get it to work if I included it any other way, such as a table,
or tr or even a div tag. I was probably doing something wrong.
What this code will do is dynamically replicate a particular field and have
it be renamed as
codeID-0, codeID-1, codeID-2, etc as the user "adds" another field of that
type. The key is that
the code will dynamically add what is in the textarea to the blank
<tbody></tbody> area. I've
hidden the text area so it is never shown; otherwise a textarea is shown on
the screen.
Upon re-reading your request, you may just want to hide a specific set of
input types.
If that is the case, I did that as well. Let me know and I'll update to
include that information
CODE
<script type="text/javascript">
$(document).ready( function() {
//Taken from the JQuery Validation example
var template = jQuery.format($("#codeDetail").val());
function addRow() {
$(template(i++)).appendTo("#codeDetailTable tbody");
}
var i = 1;
// start with one row
addRow();
// add more rows on click
$("#add").click(addRow);
//hide the initial text area
$('#codeDetail').hide();
});
</script>
<other html crap>
<tr align="left">
<td align="center" colspan="3">
<button id="add">
Add another code
</button>
</td>
</tr>
<other html crap>
<table width="765" border="0" align="left" id="codeDetailTable">
<tbody>
</tbody>
</table>
<other html crap>
<textarea id="codeDetail" cols="1" rows="1" disabled="disabled">
<tr>
<td>
<input name="codeID-{0}" id="codeID-{0}" value="" type="text" />
</td>
</tr>
</textarea>
<other html crap>
On Tue, Feb 3, 2009 at 12:15 AM, Wayne <[email protected]>wrote:
>
> Hi there,
>
> very new to jquery so any help is appreciated - I posted this before
> in the wrong forum (dev)
>
> We're wanting to create a form that initial shows say 3 fields. This
> form is positioned within a page and is shown using the slide effect.
> We have a link saying "Add Contact", when the user clicks on this the
> 3 field (first, last name, email) form slides down underneath. Ok so
> far so good.
>
> However we want to give the user options of other fields (such as
> multiple addresses, etc) - what I'd like to do is be able to either:
> 1) expand this form to fill the current page/main div using a
> transition, so that the user knows what is happening without
> performing a page refresh. This may be tricky to get the layout to
> work.
> 2) Alternatively I was thinking that we could slide in from the left/
> top/bottom/right the complete full form to cover the whole page/main
> div. Once they submit the form we'll refresh the page back to where
> they where.
>
> Any ideas of how I can do this? I've looked at the documentation and
> I'm aware fo the basic UI effects etc. However I'm not really a
> javascript person (java I'm afraid) so not sure how I can do this. I
> can figure things out generally if I know the basic pattern I need to
> apply, so any pointers would be really appreciated.
> many thanks
> Wayne
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
