Instead Of Adding Another Element It Is Landing To A Another Page

I have created a modal list using bootstrap and Actually I have a form list created and when entered details, it will land me to a desired page. Register button performs this funct

Solution 1:

Your jsfiddle is messed up, you should load external CSS and scripts using the "external" feature on the left. And obviously your local files will not be accessible, so use absolute paths. I took the time to set it up properly this time.

Your HTML also looks messy, but browsers still understand it.

As for your unexpected behaviour, I think this post applies to your situation: Form is submitted when I click on the button in form. How to avoid this?

In essence: you just need to specify a type attribute (with value different from "submit" obviously) so that your "Add" button stops acting as a submit button.

<button id="add" type="button">add</button>

You also have a problem with attaching event listener on your "Add" button: your code must be executed after your button exists in DOM.

2 simple methods:

• Put your script tag after your button HTML.
• Have your code executed after DOM is ready / loaded (e.g. use jQuery(document).ready(function() { /** your code **/}) to request jQuery to execute it once DOM is ready).

jQuery(document).ready(function() {
    $( "#add" ).click(function() {
        var row = $("#wrapper-1").clone();
        // You should change the id to avoid multiple elements
        // with same id in your DOM...
        $('#wrapper').append(row);
    });
});

Updated jsfiddle: http://jsfiddle.net/qc3tu1f1/4/