Dynamically add dropdown and dropdown fields

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)

Jeremy Harris · Accepted Answer · 2016-06-17 13:40:59Z

2

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>

edited Jun 17, 2016 at 13:40

answered Jun 17, 2016 at 13:39

Jeremy Harris

24.7k13 gold badges84 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

M. Eriksson Over a year ago

If you add event.preventDefault() it doesn't matter if it is a button or an anchor. But if any script goes wrong on the page (and thereof stops rendering JS, then an anchor is better since it then won't accidently submit the form).

J. DKYSR Over a year ago

The form doesn't send now, but I don't get any extra fields neither :p

Jeremy Harris Over a year ago

Try doing some console.log statements in your snippet for adding code to make sure your selectors match what you think they need to be.

J. DKYSR Over a year ago

Looks like there are no errors (or I'm doing it wrong). Would it help to provide the whole PHP file? -- I'm doing all kinds of stuff and messing it up more then I should be doing :p

Jeremy Harris Over a year ago

I suspect it has something to do with you using detach() and then immediately afterwards trying to bind to an element within that template, which no longer exists in the DOM.

|

Collectives™ on Stack Overflow

Dynamically add dropdown and dropdown fields

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related