1

我目前在我的 Web 应用程序中有一个功能，您可以通过单击"Add a Skill"按钮来添加您的技能，非常简单并且一直在努力，直到我尝试将其他东西添加到组合中。错误是当我单击“添加技能”按钮时，它就像提交按钮一样，并尝试执行 php 脚本skills/add

我目前正在尝试这样做，以便我的应用程序不断检查用户输入的文本是否存在于数据库中，如果不存在，则用绿色勾号或红色叉号表示。

我要问的是，谁能明白为什么这不能正常工作？

看法

<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>

提前感谢您的帮助。

4

4 回答 4

1

你应该使用你的 php 脚本的绝对路径..

jQuery.ajax({
   type: "POST",
   url: "full-path-to-your-script",
于 2013-09-05T19:15:13.210 回答
1

如果您通过 AJAX 发送表单，您不希望这样：

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

你要这个：

 <input type="button" class="submitButton" value="Save Skills" onClick="SomeAJAXFunction()">
于 2013-09-05T19:16:36.210 回答
1

您可以将 return false 添加到您的功能之一。

 <input type="button" class="submitButton" value="Save Skills" onClick="return FunctionWithReturnFalse()">
于 2013-09-05T19:23:06.573 回答
0

正如您在上面的评论中指出的那样，您在页面上有一个 JS 错误。如果你正确地缩进你的代码，你会发现它可能是由于在你的调用之后没有}关闭：elseajax

<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>
于 2013-09-05T19:45:36.903 回答