CODEWITHSUNDEEP
javascriptjqueryhtmljsfiddle
WebWilliam
WebWilliam

Reputation: 37

How can I make this useful JSFiddle i found work on my site?

Okay, I found this JSfiddle to add another input field on click and when I copied the code from JSFiddle into my site, HTML, Javascript, and necessary Jquery. After much research, I can't seem to figure out why the result is always nothing. its quite depressing actually. Let me throw you the code and see if you can tell me where I'm being dumb. xD

here is the JSfiddle I want.

HTML:

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
    <p>
        <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    </p>
</div>





<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>    
<script src="js/custom.js"></script>

Javascript: 

$(document).ready(function() {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;

    $('#addScnt').live('click', function() {
            $('<p><label for="p_scnts"><input type="text" id="p_scnt"     size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a     href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
    });

    $('#remScnt').live('click', function() { 
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });
});

I made sure to put the jquery after the custom JS file, I wrapped my JavaScript with $(document).ready() I'm just not sure what to try next. Please help!!! thank you!

Upvotes: 1

Views: 110

Answers (4)

madalinivascu
madalinivascu

Reputation: 32354

Try this

1.remove: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

2.change the js like this and place it at the top of you custom.js file:

$(function() {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;

        $('body').on('click','#addScnt',function(e) {
         e.preventDefault();
                $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
                i++;

        });

        $('body').on('click','#remScnt',function(e) { 
        e.preventDefault();
                if( i > 2 ) {
                        $(this).parents('p').remove();
                        i--;
                }

        });
});

jsfiddle: http://jsfiddle.net/tZPg4/14890/

Upvotes: 0

Shivangi
Shivangi

Reputation: 3062

Seems like the website had a missing module, called "owl-carousel". Because of that, JS was encountering an error, and the events weren't binding to the link, which was responsible for creating input boxes.

Upvotes: 0

Solaiman Mansyur
Solaiman Mansyur

Reputation: 63

Instead of using $('#yourObjectId').live('click', function()); I recommend you to use:

$('#yourObjectId').on('click', function() { //put your codes here }); or $('#yourObjectId').click(function() { //put your codes here });

.live('click') is deprecated, because you are using jQuery1.11.3. If you only using jQuery1.4.3 or previous versions, it should be works.

Upvotes: 0

user5628722
user5628722

Reputation:

You have jQuery listed twice. You only need one of them. This will cause problems:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"</script>

Also, you mention <script src="js/bootstrap.min.js"></script> but is it uploaded to your server? If not you can use a CDN like this:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Upvotes: 2

Related Questions