0

Имеется форма, в которой необходимо выбрать условие поиска (искать по фамилии или по номеру карточки), и чтоб при нажатии на кнопку "поиск" под формой загружалась форма с результатом.

В результирующей форме указывались параметры и сохранялись (записывались в базу). Как это сделать без перезагрузки страницы. Понятно, что на аяксе, но как?

Форма выбора параметров поиска

<table width="305" height="161" border="1">
  <tr>
    <td width="144"><input type="radio" name="radio" id="radio" value="radio" />
    Номер карточки</td>
    <td width="145"><input type="radio" name="radio2" id="radio2" value="radio2" />
      Фамилия</td>
  </tr>
  <tr>
    <td><input type="text" name="textfield" id="textfield" /></td>
    <td><input type="text" name="textfield2" id="textfield2" /></td>
  </tr>
  <tr>
    <td colspan="2"><div align="center">
      <input type="submit" name="button" id="button" value="      Поиск      " />
    </div></td>
  </tr>
</table>

Форма ввода параметров (результирующая)

<table width="325" border="1">
  <tr>
    <td width="142">Номер карточки</td>
    <td width="167"><input type="text" name="textfield" id="textfield" /></td>
  </tr>
  <tr>
    <td>ФИО</td>
    <td><input type="text" name="textfield2" id="textfield2" /></td>
  </tr>
  <tr>
    <td>Пол</td>
    <td><select name="select" id="select">
    </select>
    </td>
  </tr>
  <tr>
    <td>Образование</td>
    <td><select name="select2" id="select2">
    </select>
    </td>
  </tr>
  <tr>
    <td><div align="center">
      <input type="submit" name="button" id="button" value="Сохранить" />
    </div></td>
    <td><div align="center">
      <input type="submit" name="button2" id="button2" value="Отменить" />
    </div></td>
  </tr>
</table>

3 ответа 3

2

Читаем описание функции $.ajax() тут.
Если кратко, то вешаем эту функцию на отправку формы, указывает в ней все необходимые параметры. В success обрабатываем принятый ответ (вашу результирующую форму).
Не забудьте указать return false; после функции $.ajax() - это предотвратит отправку формы стандартными средствами(с перезагрузкой страницы).

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

1
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <style type="text/css">
        #big_form {
            display: none;
        }
    </style>
</head>

<body>

<table width="305" height="161" border="1">
<form action="/myscript.php" id="small_form">
  <tr>
    <td width="144"><input type="radio" name="radio" id="radio1" value="radio" />
    номер карточки</td>
    <td width="145"><input type="radio" name="radio" id="radio2" value="radio2" />
      Фамилия</td>
  </tr>
  <tr>
    <td><input type="text" name="textfield1_name" id="textfield1" /></td>
    <td><input type="text" name="textfield2_name" id="textfield2" /></td>
  </tr>
  <tr>
    <td colspan="2"><div align="center">
      <input type="submit" name="button" id="search_button" value="      Поиск      " />
    </div></td>
  </tr>
</form>
</table>

<table width="325" border="1" id="big_form">
  <tr>
    <td width="142">Номер карточки</td>
    <td width="167"><input type="text" name="textfield" id="textfield" /></td>
  </tr>
  <tr>
    <td>ФИО</td>
    <td><input type="text" name="textfield3" id="textfield3" /></td>
  </tr>
  <tr>
    <td>Пол</td>
    <td><select name="select" id="select">
    </select>
    </td>
  </tr>
  <tr>
    <td>Образование</td>
    <td><select name="select2" id="select2">
    </select>
    </td>
  </tr>
  <tr>
    <td><div align="center">
      <input type="submit" name="button" id="button" value="Сохранить" />
    </div></td>
    <td><div align="center">
      <input type="submit" name="button2" id="button2" value="Отменить" />
    </div></td>
  </tr>
</table>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#small_form").submit(function(event) {
                event.preventDefault();
                var url = $(this).attr("action");
                if ($("#radio1").is(':checked')) {
                    $.post (
                        url, {
                            textfield1_name: $("#textfield1").val()
                        }, function(response) {
                            //response - это то, что выдаст сервер на такой пост
                            //запрос, следовательно тут должен быть скрипт вставляющий
                            //ответы в форму, это делается так:
                            //$("#textfield3").val("часть ответа");
                            $("#big_form").fadeIn(1000);//затем отображаем форму
                        }
                    );
                } else {
                    $.post (
                        url, {
                            textfield1_name: $("#textfield2").val()
                        }, function(response) {
                            //аналогично
                        }
                    );
                }
            });
        });
    </script>
</body>

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

0

это что еще за переключатель radio с разными именами? ну ИДшники разные - понимаю(и то если честно то искать отмеченный легче если один ИД у одной группы радио - сделай его тоже например id='radio'). разные value - само собой. но name? если хочешь чтобы форма правильно работала и радио был именно радио а не чекбоксом то ставишь одно имя и по определение чека идет через

rad=$("#radio").is(':checked').attr('value');
textfield2=$("#textfield2").attr('value');
textfield=$("#textfield").attr('value');
и передавай себе все эти поля а в пхп разбирайся что в радио пришло по тому и ищи. зачем мучать яваскрипт проверками если-то. а если ты еще захочешь вариант поиска то опять писать еще раз если то???

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.