Я хочу использовать выбранное пользователем значение параметра без отправки формы. Вот мой код HTML
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>
Я хочу взять значение выбранного параметра в переменную php, так что в соответствии с значением параметра может отображаться новый набор данных. благодаря
как предложили другие люди, вы должны использовать AJAX. Я бы рекомендовал заглянуть в javascript / Jquery примеры вызова AJAX.
Я предполагаю, что вы хотите изменить часть веб-страницы в зависимости от того, какой пользователь выбирает, лучший способ сделать это – иметь отдельный скрипт PHP, который получает выбранный параметр (захвачен в javascript / JQuery) и возвращает новый HTML-код, который вы хотите для отображения.
Например, в JQuery для получения выбранного варианта:
var selected_option_value=$("#select1 option:selected").val();
Также в JQuery для вызова AJAX, передавая значение с помощью 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); } );
Надеюсь это поможет!
EDIT: давайте подробнее рассмотрим приведенный выше пример:
скажем, у вас есть страница index.html, где у вас есть <select name="select1">
указанный в вашем вопросе:
первым шагом было бы связать событие, когда кто-то выбирает один из вариантов, как это сделать:
1- Первый способ сделать это:
<select name='select1' id='select1' onchange='load_new_content()'>
Таким образом, когда кто-то изменяет выбранное значение списка <select>
будет выполняться функция javascript load_new_content()
. Заметьте, что я добавил id='select1'
в тег, это используется для поиска этого элемента в javascript / JQuery, вы всегда должны использовать атрибут id, если вам нужно использовать этот тег в javascript / JQuery.
2- Второй способ, связать событие с помощью JQuery:
Для этого вы должны иметь <script>
внутри <head>
index.html. Внутри этого <script>
вы должны иметь:
$(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" });
Независимо от того, load_new_content()
вариант вы хотите использовать, вам нужна эта load_new_content()
. Он также должен быть объявлен внутри <script>
тега <head>
, как функция $ (document) .ready.
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 } ); }
Теперь осталось только это 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"; ?>
Вы не можете получить значение параметра в переменной php, не делая http-запрос, поскольку выбранное значение находится в клиенте, а php – на сервере.
Вы можете использовать ajax, но он все равно отправляет форму. Если вы не хотите выполнять запрос на сервер, вам необходимо загрузить все данные в клиенте и использовать JavaScript для управления им
Используйте AJAX, выбирая опцию выпадающего запуска функции jQuery и отправляя значения на страницу сервера AJAX
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>
Страница 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); ?>
Если вы ищете динамический веб-контент, Ajax – лучший вариант