2013-03-01 44 views
5

Tôi muốn sử dụng giá trị tùy chọn do người dùng chọn mà không gửi biểu mẫu. Đây là mã HTML của tôiNhận giá trị tùy chọn mà không cần gửi biểu mẫu

Combo Box<br> 
<select name="select1"> 
<option value="IVP" selected>IVP</option> 
<option value="SURTEK">SURTEK</option> 
<option value="GUITARTUNER">GUITARTUNER</option> 
<option value="OTHER">OTHER</option> 
</select> 

Tôi muốn đưa giá trị tùy chọn đã chọn vào biến php, để theo giá trị tùy chọn, một tập dữ liệu mới có thể được hiển thị. Cảm ơn

+0

mà không cần javascript của nó không thể, –

+0

gì bạn cố gắng làm là đồng bằng không thể với PHP. Bạn có chắc là bạn không tìm kiếm mã Javascript thay thế không? – aaaaaa123456789

+0

Kiểm tra điều này có thể giúp bạn http://stackoverflow.com/questions/9170453/display-dropdown-values-based-on-previous-dropdown – Hkachhia

Trả lời

1

Bạn không thể nhận giá trị tùy chọn trong biến php, mà không yêu cầu http vì giá trị được chọn nằm trong ứng dụng khách và php - trong máy chủ.

Bạn có thể sử dụng ajax nhưng vẫn gửi biểu mẫu. Nếu bạn không muốn thực hiện truy vấn tới máy chủ, bạn phải tải tất cả dữ liệu trong ứng dụng khách và sử dụng JavaScript để quản lý dữ liệu đó

+0

Tôi có thể làm điều này bằng ajax bằng cách nào? và trang có phải tải ngay cả khi tôi sử dụng ajax không? – Harsh

1

Sử dụng AJAX, trong khi chọn tùy chọn trong trình đơn thả xuống kích hoạt hàm jQuery và gửi giá trị trang máy chủ bằng AJAX

trang HTML:

<html> 
<head> 
<script> 
function showUser(str) 
{ 
if (str=="") 
    { 
    document.getElementById("txtHint").innerHTML=""; 
    return; 
    } 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("GET","getuser.php?q="+str,true); 
xmlhttp.send(); 
} 
</script> 
</head> 
<body> 

<form> 
<select name="users" onchange="showUser(this.value)"> 
<option value="">Select a person:</option> 
<option value="1">Peter Griffin</option> 
<option value="2">Lois Griffin</option> 
<option value="3">Glenn Quagmire</option> 
<option value="4">Joseph Swanson</option> 
</select> 
</form> 
<br> 
<div id="txtHint"><b>Person info will be listed here.</b></div> 

</body> 
</html> 

trang PHP (getuser.php):

<?php 
$q=$_GET["q"]; 

$con = mysql_connect('localhost', 'peter', 'abc123'); 
if (!$con) 
    { 
    die('Could not connect: ' . mysql_error()); 
    } 

mysql_select_db("ajax_demo", $con); 

$sql="SELECT * FROM user WHERE id = '".$q."'"; 

$result = mysql_query($sql); 

echo "<table border='1'> 
<tr> 
<th>Firstname</th> 
<th>Lastname</th> 
<th>Age</th> 
<th>Hometown</th> 
<th>Job</th> 
</tr>"; 

while($row = mysql_fetch_array($result)) 
    { 
    echo "<tr>"; 
    echo "<td>" . $row['FirstName'] . "</td>"; 
    echo "<td>" . $row['LastName'] . "</td>"; 
    echo "<td>" . $row['Age'] . "</td>"; 
    echo "<td>" . $row['Hometown'] . "</td>"; 
    echo "<td>" . $row['Job'] . "</td>"; 
    echo "</tr>"; 
    } 
echo "</table>"; 

mysql_close($con); 
?> 

Ref: http://www.w3schools.com/php/php_ajax_database.asp

+0

Đây là ví dụ javascript, nhưng tôi sẽ khuyên bạn sử dụng jquery AJAX –

+0

'$ .ajax' của jQuery co lại nhiều dòng xuống từ 2 đến 3 dòng. – asprin

+0

@asprin: Yup Chính xác :) –

5

như những người khác đã đề xuất, bạn nên sử dụng AJAX. Tôi muốn khuyên bạn nên xem xét javascript/Jquery ví dụ về một cuộc gọi AJAX.

Tôi đoán bạn muốn sửa đổi một phần của web tùy thuộc vào tùy chọn người dùng chọn, cách tốt nhất để làm điều này là có một tập lệnh PHP riêng biệt nhận tùy chọn đã chọn (được chụp trong javascript/JQuery) và trả về HTML mới bạn muốn hiển thị.

Ví dụ trong jquery để có được những lựa chọn chọn:

var selected_option_value=$("#select1 option:selected").val(); 

Cũng trong jquery để làm một cuộc gọi AJAX, đi qua các giá trị sử dụng POST:

$.post("script_that_receives_value.php", {option_value: selected_option_value}, 
     function(data){ //this will be executed once the `script_that_receives_value.php` ends its execution, `data` contains everything said script echoed. 
      $("#place_where_you_want_the_new_html").html(data); 
     } 
); 

Hope this helps!

EDIT: chúng ta hãy đưa ra hơn chút chi tiết để ví dụ trên:

giả sử bạn có một trang index.html, nơi bạn có <select name="select1"> đưa ra trong câu hỏi của bạn:

bước đầu tiên sẽ là để liên kết một sự kiện khi ai đó chọn một trong các tùy chọn, làm thế nào để làm điều này:

1- cách đầu tiên để làm điều đó:

<select name='select1' id='select1' onchange='load_new_content()'> 

Bằng cách này khi ai đó thay đổi giá trị đã chọn của danh sách <select>, chức năng javascript load_new_content() sẽ được thực hiện. Chú ý tôi đã thêm id='select1' vào thẻ, điều này được sử dụng để tìm kiếm phần tử này trong javascript/JQuery, bạn nên luôn sử dụng thuộc tính id nếu bạn cần sử dụng thẻ đó trong javascript/JQuery.

2- cách Thứ hai, liên kết các sự kiện sử dụng JQuery:

Để làm điều này, bạn nên có một thẻ <script> bên trong <head> của index.html. Bên <script> thẻ này bạn nên có:

$(document).ready(function(){ 
     // everything here will be executed once index.html has finished loading, so at the start when the user is yet to do anything. 
     $("#select1").change(load_new_content()); //this translates to: "when the element with id='select1' changes its value execute load_new_content() function" 
}); 

Bất kể các tùy chọn mà bạn muốn sử dụng bây giờ bạn cần load_new_content() chức năng này. Nó cũng phải được khai báo bên trong thẻ <script> của thẻ <head>, giống như hàm $.

function load_new_content(){ 
    var selected_option_value=$("#select1 option:selected").val(); //get the value of the current selected option. 

    $.post("script_that_receives_value.php", {option_value: selected_option_value}, 
     function(data){ //this will be executed once the `script_that_receives_value.php` ends its execution, `data` contains everything said script echoed. 
       $("#place_where_you_want_the_new_html").html(data); 
       alert(data); //just to see what it returns 
     } 
    ); 
} 

Bây giờ điều duy nhất còn lại là này script_that_receives_value.php:

<?php 
    $selected_option=$_POST['option_value']; 

    //Do what you need with this value, then echo what you want to be returned. 

    echo "you have selected the option with value=$selected_option"; 
?> 
+0

Hi Naryl, Bạn có thể giải thích điều này một chút không. Tôi mới sử dụng Jquery và AJAX – Harsh

+0

hmm ok, hãy để tôi chỉnh sửa để cung cấp thêm một chút thông tin. – Naryl

+0

Cảm ơn Naryl này, nhưng tôi bị mắc kẹt là "// Làm những gì bạn cần với giá trị này, sau đó lặp lại những gì bạn muốn được trả lại." $ selected_option = $ _ POST ['option_value']; \t $ q = "CHỌN * TỪ sản phẩm WHERE id = '2'"; \t $ r = mysqli_query ($ dbc, $ q); \t $ data = mysqli_fetch_assoc ($ r); \t \t nếu ($ selected_option = '1') { \t \t $ price = $ data ['cost1']; \t} else { \t \t \t if ($ selected_option == '2') { \t \t \t $ giá = $ data [ 'cost2']; \t \t} else { \t \t \t if ($ selected_option == '3') { \t \t \t $ giá = $ data [ 'cost3']; \t \t} else { \t \t \t if ($ selected_option == '4') { \t \t \t $ giá = $ data [ 'cost4']; \t \t}}}} \t \t trả lại $ price; – DeathGrip

0

Nếu bạn đang tìm kiếm nội dung web động Ajax là lựa chọn tốt nhất

Các vấn đề liên quan