1

私は現在、"Add a Skill"ボタンをクリックしてスキルを追加できる Web アプリケーションの機能を持っています。非常にシンプルで、ミックスに何か他のものを追加しようとするまでうまくいきました。エラーは、「スキルの追加」ボタンをクリックすると、それが送信ボタンであるかのように機能し、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

If you are sending the form via AJAX you don't want this:

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

You want this:

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

関数の 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 に答える