2017-10-09 7 views
-2

を使用しては..私は私はそれが1つのモーダルポップアップを開くボタンをクリックするとボタンは、ユーザーの何と呼ばれていないjqueryのモーダルポップアップ

をフォームを送信するので、私は何をしようとしていますが、私はトンインサートをしようとしていますモーダルポップアップであります一つのフィールドを持つフォーム彼らは私がデータベースここ

にそれらの値を格納したい提出クリックしたときにnumber..andを入力するには、私のボタンのコードです:ここ

<button type="button" class="btn btn-success"style="float:right; margin:3px 0px 3px 3px" id="btnShow">No Of Users</button> 

は私のモーダルdailogコードです:

<script type="text/javascript"> 
$(function() { 
$("#btnShow").click(function(){ 
$('#demoModal').modal('show'); 
}); 
}); 

<div style="text-align:center; margin-top:10%"></div> 

<div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h4 class="modal-title" id="myModalLabel">Bootstrap Modal Popup</h4> 
     </div> 
     <div class="modal-body">Hi, Welcome to Aspdotnet-Suresh.com</div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
</div> 

は、誰もが最初にあなたのモーダルポップアップフォームとAjaxを作成する必要が

事前に感謝..については

答えて

4

、例を実行する方法を私を助けることができますスクリプトindex.phpファイル

--Modalポップアップフォームが=================

<div style="text-align:center; margin-top:10%"></div> 

<div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title" id="myModalLabel">Bootstrap Modal Popup</h4> 
    </div> 
    <div class="modal-body"> 

    <form method="post"> 
     <input type="text" name="name1" id="name1" placeholder="name"> 
     <br> 
     <input type="text" name="age1" id="age1" placeholder="age"> 
     <br> 
     <div id="myCont"></div> 
     <br> 
     <input type="submit" id="btn" class="btn" value="SUBMIT"> 
    </form> 

    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
    </div> 
</div> 

--script Code--

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("#btn").click(function (e){ 
       e.preventDefault(); 
       $.ajax({ 
        type: "POST", 
        async: false, 
        url:"page1.php", 
        dataType: 'json', 
        cache: false, 
        success: function (result) { 
          $("#myCont").html(result); 
        }, 
        error: function() { 
         alert("server error"); 
        } 
       }); 
      }); 
     }); 
    </script> 

をcode-- ========================================== =====

Page1.phpという名前の別のページを作成し、データベースの挿入コードを格納します。

<?php 
if(isset($_POST)) 
{ 
    $name = $_POST['name1']; 
    $age = $_POST['age1']; 

    $servername = "localhost"; 
    $username = "username"; 
    $password = "password"; 
    $dbname = "myDB"; 

    // Create connection 
    $conn = mysqli_connect($servername, $username, $password, $dbname); 
    // Check connection 
    if (!$conn) { 
    die("Connection failed: " . mysqli_connect_error()); 
    } 

    $sql = "INSERT INTO user_details (name, age) 
    VALUES ($name, $age)"; 

    if (mysqli_query($conn, $sql)) { 
    echo "New record created successfully"; 
    } else { 
    echo "Error: " . $sql . "<br>" . mysqli_error($conn); 
    } 

    mysqli_close($conn); 
} 
?> 

私は以前これを試して、非常にうまいです。

これがうまくいくと思います。

+0

ここではmodalpopupが来ていません。モーダルポップアップコードを追加してください。 – user200

+0

モーダルポップアップフォームの代わりにフォーム部分を追加しました。これは説明的なコードであり、プログラム全体ではありません。 –

+0

私は自分のフォームのコードをあなたのモダルコードで編集しています。 –

関連する問題