0

ページのリンクは次のとおりです：localhost / mysite / create-user

これはコードです：

        <form class="form-horizontal" name = "signUp1F" id = "signUp1F">
            <input class="input-xlarge focused" name="pskil" id ="pskil" type="text" placeholder = "Doctor, Trainer, Human Resource etc.">
            <input type="hidden" name="neoid" id="neoid" value="<?php echo $neoid; ?>" />
            <span><button id = "plus" class="btn btn-success">Plus</button></span>
            <div id="skillsAdded"></div>
        </form>

jqueryコード：

<script type="text/javascript">
    $('#plus').click( function(event){
        var pskil = $('#pskil').val();
        var neoid = $('#neoid').val();
        if( !pskil){
            alert( "Please write a skill.");
            return false;
        }

        $.ajax({
            type: 'post',
            url: "localhost/mysite/add-skill",
            data: { pskil: pskil, neoid: neoid},
            success: function( response){
                $('#skillsAdded').append( pskil + "<br>");
                return false;
            }
        });
    });
</script>

目的は次のとおりです。ユーザーが入力にスキル値を入力し、[プラス]ボタンをクリックすると、ajaxリクエストが送信されてスキルがデータベースに追加されます。そして、このリクエストを処理するコードはlocalhost / mysite/add-skillにあります。

しかし、物事はうまくいきません。「プラス」ボタンをクリックすると、localhost / mysite / create-user？pskil = php＆neoid=53ページに移動します。何がこの方向に進むことができるでしょうか？私はこの問題に2時間近く取り組んできましたが、なんとか対処できません。

4

1 に答える 1

1

問題は、ボタンタグがフォームを送信することです。これが、使用できる更新されたJavaScriptソースです。jQueryには、イベント用の組み込みのpreventDefault（）メソッドがあります。これにより、たとえば、ボタンがフォームを送信できなくなります。

<script type="text/javascript">
    $('#plus').click( function(event){
        event.preventDefault();

        var pskil = $('#pskil').val();
        var neoid = $('#neoid').val();
        if( !pskil){
            alert( "Please write a skill.");
            return false;
        }

        $.ajax({
            type: 'post',
            url: "localhost/mysite/add-skill",
            data: { pskil: pskil, neoid: neoid},
            success: function( response){
                $('#skillsAdded').append( pskil + "<br>");
                return false;
            }
        });
    });
</script>

試してみる：http ：//jsfiddle.net/3A7Mg/1/

于 2012-11-17T23:58:44.843 に答える