How input and remove field with javascript?

i would like to create two buttons, one where the user can press it and then appears a drop drown and a input text field and another to remove this one, if the user wishes.

I already searched it i开发者_开发知识库n Google but can't find it.

Best regards, Valter Henrique.

[working demo here: http://jsfiddle.net/GNnSw/1/][1]

your html

<div id="box" style="display:none;">
        <select>
        <option value="test">Test</option>
    </select>
    <input type="text" value="" id="text1" />
    <input type="text" value="" id="text2" />
</div>
<input type="button" value="show" id="show" />
<input type="button" value="hide" id="hide" />

in jQuery:

$('#show').live('click', function(){
    $('#box').show();
});

$('#hide').live('click', function(){
    $('#box').hide();
});

http://jsfiddle.net/GNnSw/4/

using jquery it would take something like:

<button onclick="$('form').show();">press it</button>

<form>
 //input elements
</form>

Search harder in google btw.

Do it with jQuery.

HTML

<button id="buttonid" value="Click on me!">

jQuery

$("#buttonid").click(function(){
    var $input = '<input id="inputid" type="text" value="value">';
    // make the input field
    var $select = '<select id="selectid"></select>';
    // make the select
    var $opt1 = '<option name="one">one</option>';
    var $opt2 = '<option name="two">two</option>';
    // make two options
    $select.append($opt1).append($opt2);
    // append to select the options
    $(this).after('<form action="url" method="POST"></form>').append($input).append($select);
    // append input and the select after the button
});

Oh yeah. :) Btw you need jquery library.

Create a "placeholder" for your fields:

<div id="placeholder"></div>

Add the buttons / links:

<a onClick="add()">Add Form</a><a onClick="remove()">Remove Form</a>

And this to your javascript-file:

function add() {
document.getElementById('placeholder').innerHTML = "Code for your form...";
}

function remove() {
document.getElementById('placeholder').innerHTML = "";
}

I guess the best way of achieving flexible and user friendly HTML layout it by using external JavaScript library, such as jQuery or mootools. The reason is - in traditional web frameworks after you send HTML content to web browser, server cannot manipulate with it. Also, I guess good principle is to use Java only for serving content, and using client-side framework to do all the magic with User Interface. Moreover, You will find plenty of examples how to work with those libraries like this one.

If you would really like to stick to plain Java, since you might know anything about JavaScript, I suggest checking out Google Web Toolkit and Vaadin. You can write Java code almost without any restrictions, and it will be "converted" (compiled) to JavaScript automatically. But that decision should be considered deeply, since learning GWT or Vaading might be more time consuming and not always applicable.