Блог

Главная - Вопросы по программированию - Кнопка не работает, когда AJAX используется для отображения данных на основе выбора из выпадающего меню

Кнопка не работает, когда AJAX используется для отображения данных на основе выбора из выпадающего меню

#php #html #mysql

#php #HTML #mysql

Вопрос:

У меня есть страница «Мы» (index.html ), где пользователь может выбрать опцию из выпадающего меню. На основе выбора данные будут извлечены из базы данных и отображены на той же странице с использованием AJAX (вызывается второй файл getParameter.php ). Все работает нормально. Теперь я попытался добавить кнопку, чтобы открылась новая страница, и пользователь мог редактировать и отправлять новое значение в базу данных. Но нажатие кнопки ничего не делает. Я пробовал это с другими HTML-файлами. Это работает везде. Любая помощь, пожалуйста

Index.html

 //AJAX
 <script>

        function showParameterData(str) {
            if (str == "") {
                document.getElementById("txtHint").innerHTML = "";
                return;
            } else {
                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 (this.readyState == 4 amp;amp; this.status == 200) {
                        document.getElementById("txtHint").innerHTML = this.responseText;
                    }
                };
                xmlhttp.open("GET","getParameterData.php?q=" str,true);
                xmlhttp.send();
            }
        }
</script>



//drop down option selection

<body>

//showParameterData() is the function
<form>
            <select name="Device" onchange="showParameterData(this.value)">
              <option value="">Select</option>
              <option value="1">Device A </option>
              <option value="2">Device B </option>
              <option value="3">Device C </option>
              <option value="4">Device D </option>
              <option value="5">Device E </option>
              <option value="6">Device F </option>
            </select>
            </form>





//bitton to edit and  send data

<div class="edit_button_class" style= "float:right;">
  <form action="edit.html" method="get" target="_blank">
    <input type="submit" name="submit" id ="mybutton1" value="Click to Edit" />
  </form>
</div>


<div id="txtHint"></div>

</body>

//getParameter.php

 
<?php
$q = intval($_GET['q']);
include ("DBconnect.php");

$conn= mysqli_connect( $dbhost, $dbuser, $dbpass, $db ) or die("Could not connect: " .mysqli_error($conn) );
$sql="SELECT * FROM parameter WHERE ID = '".$q."'";
$result = mysqli_query($conn,$sql);

while($row = mysqli_fetch_array($result)) {
$price = $row['price'];
$version = $row['version'];}

echo '<table>';
echo "<tr>
        <th>Price of the Device :</th>
        <td > $price </td>
</tr>";

echo "<tr>
        <th>version of the Device :</th>
        <td > $version </td>
</tr>";
echo '</table>';
echo '</div>';

Когда я нажимаю кнопку, URL меняется на что-то странное. Это не приведет к edit.html. Даже если я обновлю страницу, странный URL-адрес все еще там. Даже если он показывает index.html добавьте некоторые дополнительные данные в URL

Ответ №1:

Материал, который вы видите в URL, — это параметры get. Вы, используя method =’get’, указываете форме на отправку таким образом.

Что это сделает, так это отправит все имена входных данных и их значения в URL и «прикрепит» их к выбранной вами странице действий.

Например, нажатие кнопки отправит вас в edit.html с полученными параметрами отправки и значением этого, которое является «Нажмите, чтобы отредактировать». Все, что имеет атрибут name, будет отправлено в качестве параметра get. Вам не нужно имя для ввода отправки.

Если вы поместите свой выбор в форму с помощью кнопки отправки, он отправит параметр для выбора, и это означает, что вы можете использовать его на своей странице редактирования.

 <div class="edit_button_class">
  <form action="edit.html" method="get" target="_blank">
    <select name="Device" onchange="showParameterData(this.value)">
      <option value="">Select</option>
      <option value="1">Device A </option>
      <option value="2">Device B </option>
      <option value="3">Device C </option>
      <option value="4">Device D </option>
      <option value="5">Device E </option>
      <option value="6">Device F </option>
    </select>
    <input type="submit" id ="mybutton1" value="Click to Edit" />
  </form>
</div>

Я удалил имя из входных данных, поскольку это приводит к отправке его в качестве параметра GET. Используя вышеуказанное, вы будете отправлены в /edit.html?submit =Click to Edit, который вы затем можете использовать на своей странице редактирования, чтобы получить то, что вам нужно.

Надеюсь, это поможет.

Комментарии:

1. Это работает. отлично, спасибо. Что делать, если у меня есть два выпадающих списка. Допустим, Список 1 — Механические устройства. Список 2- Электрические устройства. Я хочу только одну кнопку редактирования для двух списков. В edit.html страница, на которую я хочу предоставить возможность снова выбрать, является ли она электрической или механической, а затем название устройства.