动态添加下拉列表和下拉字段

Question

EDIT 001:

added: - event.preventDefault(); and anchors instead of buttons

<div class="edit-area">
 <div class="controls">
    <a href="#" class="add">+</a>
    <a href="#" class="rem">-</a>
 </div>
</div>

Now the page + or - won't make the page send the form, but now it does nothing :s

---

I'm working on a contact form, but I have a few problems/questions.

• I want to dynamically add fields when they press a button (+)
• And off course they need to be able to delete this when needed... (-)

When I press the + button now, it tries to act like a submit button and sends the form...

Script

<script>
        (function($) {
            "use strict";

            var itemTemplate = $('.example-template').detach(),
                editArea = $('.edit-area'),
                itemNumber = 1;

            $(document).on('click', '.edit-area .add', function(event) {
                var item = itemTemplate.clone();
                item.find('[project]').attr('project', function() {
                return $(this).attr('project') + '_' + itemNumber;
            });
            ++itemNumber;
            item.appendTo(editArea);
        });

        $(document).on('click', '.edit-area .rem', function(event) {
            editArea.children('.example-template').last().remove();
        });

        $(document).on('click', '.edit-area .del', function(event) {
            var target = $(event.target),
            row = target.closest('.example-template');
            row.remove();
        });

    }(jQuery));
</script>

HTML

<form action="<? echo $_SERVER['PHP_SELF']; ?>" method="POST" name="contact">
    <div class="row uniform 50%">
        <div class="6u 12u(mobilep)">
            Your personal card number
            <input type="text" name="card2" id="card" value="<?php echo $_SESSION['username']; ?>" placeholder="Card Number" readonly/>
        </div>
        <div class="6u 12u(mobilep)">
            Your name
            <input type="text" name="name2" id="name" value="<?php echo $_SESSION['realName']; ?>" placeholder="Your name" readonly/>
        </div>
    </div>
    <div class="row uniform 50%">
            <div class="6u 12u(narrower)">
                Order tickets for a project.
            </div>
    </div>
<div class="example-template">
    <div class="row uniform 50%" id="readroot">
            <div class="4u 12u(narrower)">
            <select name="project" id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
            <option disabled selected>Select a project</option>
                <option value="Smile">Project Smile</option>
                <option value="Sand">Project Sand</option>
                <option value="Schmuck">Project Schmuck</option>
            </select>
            </div>
            <div class="4u 12u(narrower)">
            <select id="ddl2" name="date">
                    <option disabled selected>Select a date</option>
            </select>
            </div>
            <div class="2u 12u(narrower)">
            <input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' name="amount" id="currentamount" value="" placeholder="Amount" />
            </div>
        </div>  
        <div class="edit-area">
        <div class="controls">
            <button class="add">+</button>
            <button class="rem">-</button>
        </div>
    </div>
    <div class="row uniform 50%">
        <div class="6u 12u(mobilep)">
            <input type="hidden" id="currentprice" value="10" />
        </div>
    </div>          
        <div class="6u 12u(mobilep)">
            <input type="hidden" id="nextprice1" value="10" placeholder="" />
        </div>
    </div>
    <div class="row uniform">
        <div class="12u">
        </div>
    </div>
        <div class="4u 12u(mobilep)">   
        Total price.(In EUR)
        <input type="text" name="total2" id="total" value=""  readonly/>
    </div>

    <div class="row uniform">
        <div class="12u">
            <ul class="actions align-center">
                <li><input type="submit" name="submit"value="Place Order"/></li>
            </ul>
        </div>
    </div>
</form>

Image of the form (id and name are not shown here)

Answer 1

Change your buttons to anchors:

<a href="#" class="add">+</a>
<a href="#" class="rem">-</a>

And then in your javascript, when clicked, be sure to call preventDefault() to stop it from behaving like a standard link.

$(document).on('click', '.edit-area .rem', function(event) {
    event.preventDefault();
    editArea.children('.example-template').last().remove();
});

$(document).on('click', '.edit-area .del', function(event) {
    event.preventDefault();
    var target = $(event.target),
    row = target.closest('.example-template');
    row.remove();
});

I think alternatively, you can add a type to the button so it doesn't default to a submit type (but don't quote me on that):

<button type="button" class="add">+</button>