AjaxでPHPに入力を投稿する

私は一連の入力フィールドを持っています。処理するために値をPHPページに投稿してから、ページを再読み込みせずにデータを返すことをお勧めします。ここまでは私がこれまで持っていたことはありますが、データは通過していないようです。AjaxでPHPに入力を投稿する

HTML：

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    $("form").submit(function(form) { 
    $.ajax({ 
     type:"POST", 
     url:"catch.php", 
     data: $(this).serialize(), 
     success: function(data) { 
     $('#result').html(data); 
     console.log(data); 
     } 
    }); 

    form.preventDefault(); 
    }); 
}); 
</script> 
</head> 
<body> 
<form method="post" name="form"> 
<input type="submit" name="event" value="1" /> 
<input type="submit" name="event" value="2" /> 
<input type="submit" name="event" value="3" /> 
<input type="submit" name="event" value="4" /> 
</form> 
<div id="result"></div> 
</body> 
</html>

PHP：

<?php 

if(isset($_POST["event"])) 
{ 
    echo $_POST["event"]; 
} 

?>

出典

2016-10-17 user6368630

何を変更した場合、 ''データにdata'：$（ 'フォーム'）EQ（0）.serialize（） '？ – jonathanGB

提出型入力のシリーズですか？同じ名前の各ボタン？ – Farhan

あなたは入力フィールドについて言及しましたが、これらはすべてボタンです。 input type = "text"を使用し、入力ごとに固有の名前に変更します。 – Netham

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script> 


    $(document).ready(function() { 

    $('.event').on('click', function(){ 
    $('#event').val($(this).val()); 
    $('#event_form').submit(); 
    }); 
    $("form").submit(function(form) { 
    $.ajax({ 
     type:"POST", 
     url:"catch.php", 
     data: $(this).serialize(), 
     success: function(data) { 
     $('#result').html(data); 
     console.log(data); 
     } 
    }); 

    form.preventDefault(); 
    }); 
}); 
</script> 
</head> 
<body> 
    <form method="post" name="form" id="event_form"> 
<input name="event" id="event" value="" type="hidden"> 
    <input type="button" class="event" value="1" /> 
    <input type="button" class="event" value="2" /> 
    <input type="button" class="event" value="3" /> 
    <input type="button" class="event" value="4" /> 
    </form> 
<div id="result"></div> 
</body> 
</html>

出典

2016-10-17 19:51:12 Chris

大変感謝しています！ – user6368630

問題ありません。コーディング中にユーザーエクスペリエンスを念頭に置いているような気がします。 – Chris

AjaxでPHPに入力を投稿する

答えて

関連する問題