AJAX不能在表单中工作并立即将我发送到PHP脚本？ PHP / AJAX

Question

I've currently got a feature on my web application where you can add your skills by clicking the "Add a Skill" button, very simple and worked up until I tried to add something else into the mix. The error is the fact that when I click the "Add a Skill" button it acts as if that were the submit button and try's to execute the php script skills/add

I'm currently trying to make it so that my application constantly checks whether the text which the user is typing exists within the database which is represented with a green tick or red cross if it doesn't exist.

What I'm asking is can anyone see why this is not working as it should be?

VIEW

<form method="post" action="skills/add" id="container">  

<script>

$.fn.addSlide = function () {
return this.each(function () {
    var $this = $(this),
        $num = $('.slide').length++,
        $name = $('<input type="text" class="inputField" id="autoskill-' + $num + '" name="skill-' + $num + '" placeholder="What\'s your skill?"></div><img id="tick" src="/images/tick.png" width="16" height="16"/><img id="cross" src="/images/cross.png" width="16" height="16"/>');
        $slide = $('<br><div class="slide" id="slider-' + $num + '"></div><br>'),
        $amt = $('<input name="amount-' + $num + '" id="amount-' + $num + '" class="inputField" readonly placeholder="Slide to select this skill level..."/><br>');
    $this.append($name).append($amt).append($slide);
    console.log($('#autoskill'));
    $slide.slider({
        value: 0,
        min: 0,
        max: 5,
        step: 1,
        slide: function (event, ui) {
            $amt.val(ui.value); 
        }
    });
});
}

$('body').on('click', '.addNew', function(event) {
event.preventDefault();
$('#newFields').addSlide();
}); 

var count = 0;  

$(document).ready(function(){   

$('.inputField').keyup(skill_check);

function skill_check(){
    var skill = $('.inputField').val();
    if(skill == "" || skill.length < 4){
    $('.inputField').css('border', '3px #CCC solid');
    $('#tick').hide();
}else{
    jQuery.ajax({
       type: "POST",
       url: "skills/auto",
       data: 'name='+ skill,
       cache: false,
       success: function(response){
            if(response == 1){
                $('.inputField').css('border', '3px #C33 solid');   
                $('#tick').hide();
                $('#cross').fadeIn();
            }else{
                $('.inputField').css('border', '3px #090 solid');
                $('#cross').hide();
                $('#tick').fadeIn();
             }
        }
    });

}

$('.addNew').click( function(event){
    event.preventDefault();
    $('#length').html(count);       
    count++;
});

$('.submitButton').click( function(event){
    $('#container').append('<input type="hidden" name="count" value="' + count + '">');
});

});

</script>

<button class="addNew submitButton"> Add a Skill </button><br>

<div id="newFields"></div>

<input type="submit" class="submitButton" value="Save Skills">

</form>

Thanks for your help in advance.

Answer 1

As you pointed out in your comment above, you have a JS error on the page. If you were to indent your code correctly, you would discover that it is probably due to a missing } to close the else after your ajax call:

<script>

$.fn.addSlide = function () {
    return this.each(function () {
        var $this = $(this),
            $num = $('.slide').length++,
            $name = $('<input type="text" class="inputField" id="autoskill-' + $num + '" name="skill-' + $num + '" placeholder="What\'s your skill?"></div><img id="tick" src="/images/tick.png" width="16" height="16"/><img id="cross" src="/images/cross.png" width="16" height="16"/>');
            $slide = $('<br><div class="slide" id="slider-' + $num + '"></div><br>'),
            $amt = $('<input name="amount-' + $num + '" id="amount-' + $num + '" class="inputField" readonly placeholder="Slide to select this skill level..."/><br>');
        $this.append($name).append($amt).append($slide);
        console.log($('#autoskill'));
        $slide.slider({
            value: 0,
            min: 0,
            max: 5,
            step: 1,
            slide: function (event, ui) {
                $amt.val(ui.value); 
            }
        });
    });
}

$('body').on('click', '.addNew', function(event) {
    event.preventDefault();
    $('#newFields').addSlide();
}); 

var count = 0;  

$(document).ready(function(){   

    $('.inputField').keyup(skill_check);

    function skill_check(){
        var skill = $('.inputField').val();
        if(skill == "" || skill.length < 4){
            $('.inputField').css('border', '3px #CCC solid');
            $('#tick').hide();
        } else {
            jQuery.ajax({
               type: "POST",
               url: "skills/auto",
               data: 'name='+ skill,
               cache: false,
               success: function(response){
                    if(response == 1){
                        $('.inputField').css('border', '3px #C33 solid');   
                        $('#tick').hide();
                        $('#cross').fadeIn();
                    }else{
                        $('.inputField').css('border', '3px #090 solid');
                        $('#cross').hide();
                        $('#tick').fadeIn();
                     }
                }
            });
        // MISSING } HERE
    }

    $('.addNew').click( function(event){
        event.preventDefault();
        $('#length').html(count);       
        count++;
    });

    $('.submitButton').click( function(event){
        $('#container').append('<input type="hidden" name="count" value="' + count + '">');
    });

});

</script>