2016-09-24 16 views
1

こんにちは、私はPHPとajaxを初めて使用しています。ドロップダウンリストを選択すると、別のdiv関数が表示され、両方の値を挿入する必要があります。私は選択されたオプションを意味し、入力データも別のdivになります。私の英語は良くありません。私の友人を助けてください。 は、事前にデータベースに選択した値をドロップダウンリストに追加するにはどうすればよいですか?

AJAXとPHPを使用してphpmyadminのデータベースでこれを格納するための方法を
<p><label>Affiliate Type</label></p> 
<p><select class="inp authInput" id="id_affiliate_type" name="affiliate_type"> 
<option value="" selected="selected" disabled="disabled" style="display: none;">Select</option> 
<option value="I">Individual</option> 
<option value="O">Organisation</option> 
<div id="errorselect"></div> 
</select></p> 
<b button type="submit" class="btn btn-primary" onclick="return sendaccountData();" id="updateaccount" name="updateaccount">Update Account Information</b></button> 

をありがとう。..

答えて

0

それは非常に簡単です。 ajax呼び出しを行い、呼び出しが成功したときに値を取得し、そのDIVに値を挿入することができます。 select_org_type.php

例:select_org_type.php

<?php 
if(!empty($_GET['affiliate_type'])){ 
    //use mysqli commands to connect to database and fetch result and store in $result. 
    header();//This is very important, it will set your output as pure JSON object and javascript will find it easy to integrate 
    echo json_encode($result); 
} 

さて、ここであなたのページに

あなたは、たとえば、データベースをチェックし、出力を与えるために、1 PHPファイルが必要になります例えば、あなたはこれがどのように私は(私はAJAX呼び出しを実装するのは簡単だろう示唆)jQueryの

<script type="text/javascript"> 
    var affiliate_type = $('#id_affiliate_type').val(); 
    $('#updateaccount').on('click',function(){ 
     $.get('select_org_type.php',{affiliate_type:affiliate_type},function(data){ 
      $('#errorselect').text(data['column-name']); 
     }); 
    }); 
</script> 

を使用していますajaxを呼び出して任意の選択肢を入力するか、divに結果を与えます。

+1

こんにちは、こんにちはjson ..なしで可能ですか?コード全体で私はajaxとphpを使用しています。あなたは別のPHPファイルを作成したと言っています。私はmysqlと他のファイルのデータを挿入するためのクエリを挿入するコードを書いています –

+0

はい、任意のDIV(Dom要素)にHTMLコードを直接挿入できます。あなたの出力はhtmlでなければならず、ヘッダをapplication/jsonとして置かないでください。 –

1

オプションが選択されたときに反応するには、JavaScriptリスナーを実装する必要があります。次に、このリスナーで、選択したオプション値をポスト/取得変数としてサーバーに送信する必要があります。サーバー上では、ajaxリクエストを処理するために、対応するphpファイルを実装する必要があります。このPHPファイルはpost/get変数(選択されたオプション値)を取得してSQLデータベースに挿入する必要があります。これは一般的な考えです。

あなたはjQueryのを使用していると仮定すると、リスナーは自分のWebページではJavaScriptファイルでなければなりませんし、次のようになります。あなたのPHPファイル(your_php_file.php)あなたが「選択」変数にアクセスすることができて

// react when the select list changes 
$('#id_affiliate_type').on('change', function(e) { 

    // get the selected option value 
    var selected = $(this).find(':selected').text(); // or val(), need to confirm this... 

    // send the ajax request to your server 
    $.ajax({ 

     // url of your php script which insert data into database 
     url: 'your_php_file.php', 

     type: 'get' // or 'post' if you prefer 

     // variables passed to the script 
     data: {selected : selected}, 

     // callback, request is successful 
     success: function(result) { 
      console.log('success ' + result); 
      // do whatever you need to do after the call 
     } 

     // callback, something wrong happened 
     error: function(result) { 
      console.log('error ' + result); 
      // do whatever you need to do after the call 
     } 

     // process completed (success or error) 
     complete: function(result) { 
     } 
    } 
} 

$selected = $_GET['selected'] // (or $_POST) 

...を呼び出して、必要に応じてデータベースを変更します。

これも一般的な考えです。上のコードは一般的なデザインであり、そのままではなく、インスピレーションとして使用されています。

選択リストにオン(変更)リスナーを実装し、サーバーで変数を使用してajaxリクエストを送信し、PHPのデータベースをこれらの変数から更新することに関する多くの例があります。

幸運

+0

私はそれに "組織"と "個人"のような2つのオプションがあり、組織 "会社"を表示し、企業の入力ボックスにデータを入力すると、データベースに更新する必要があります。私はコードで上記のようにイベントコールを行っている。私はユーザーがオプションを選択せず​​に続行しないように検証を行っています。しかし、私がINDIVIDUALオプションを選択し、更新機能をクリックしてphpmyadminで更新することを許可していないときです。 –

+0

より多くのコード(サーバーとクライアント側)とより正確なエラーメッセージが必要です。 – Flo

+0

'$(文書).on( '準備'、機能(){\t \t \t \t \t \t \t $( "#のid_affiliate_type")。変更(機能(){\t \t \t \t \t \t \tするvar selected_option = $( '#id_affiliate_type2')。attr( 'pk'、 'I')。show(); if(selected_option === 'O')if(selected_option === 'O' !( '#id_affiliate_type')。( 'change'、function( ')'); $ {'id'}} ){ if(this.value == 'O') \t \t \t \t \t \t \t \t // .....................^....... \t \t \t \t \t \t \t \t { \t (32)他 \t \t \t \t \t \t \t \t} \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t { \t \t \t \t \t \t \t \t \t $( "#detailcompany")。hide(); \t \t \t \t \t \t \t \t} \t \t \t \t \t \t \t \t})。 ' –

1

file1.php

<html> 
<select class="opt"> 
    <option value="option1">option1</option> 
    <option value="option2">option2</option> 
</select> 
<div id="msg"> 
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script> 
$(".opt").change(function(){ 
    var data1 = $(".opt").val(); 
    $.ajax({ 
     type:"GET", 
     cache:false, 
     url:"file2.php", 
     data : { foo:data1}, // multiple data sent using ajax 
     success: function (html) { 

      $('#msg').html(html); 
     } 
     }); 
}); 
</script> 
</html> 

file2.php

<?php 
$data=$_GET['foo']; 
if($data=="option1") 
{ 
    echo "selected value is option1"; // add sql operation here if option 1 
} 
else if($data=="option2") 
{ 
    echo "selected value is option2"; // add sql operation here if option2 
} 
?> 

あなたはFILE2内の選択ドロップダウンに応じてデータを表示することができます。php、

+0

も私はあなたのアイデアを提案することができます電子商取引のためのWebチャットボックスの顧客サポートを作っている? –

+0

エラー修正が必要な場合は、私はあなたを助けることができるあなた自身を試してみることができます – vipz

関連する問題