0

Хочу без обновления страницы получить данные из формы.

Форма:

<form id="myform" action="#" method="POST" enctype="multipart/form-data">
        Персонаж
        <select id="pers" name="personaj">
            <option value="бэтмен">Бэтмен</option>
            <option value="супер-мен">Супер мен</option>
        </select>
<span id="contentST">Персонаж:</span>
<input id="link" type="button" name="calc" value="Выбрать" />
</form>

ajax:

$(document).ready(function(){
    $("#link").click(function(){
        $.ajax({
            url: "1.php",
            type: "GET",
            dataType: "html",
            success: function(response){
                $("#contentST").html(response);
            }
        });
    });
});

Код 1.php:

echo '<span id="contentST">Выбранный персонаж: '.$_POST['personaj'].'</span>';

Получается при нажатии кнопки без обновления страницы слово Персонаж заменяется на Выбранный персонаж но при этом не выводит выбранного персонажа, то есть код $_POST['personaj'] не работает.

Буду благодарен за помощь.

6
  • а где тело запроса передается? Commented 21 окт. 2015 в 9:21
  • @NumminorihSF это весь код формы. видимо у меня чего то не хватает
    – iKey
    Commented 21 окт. 2015 в 9:22
  • Вы отправляете ajax методом GET, а ловите его в $_POST?
    – Visman
    Commented 21 окт. 2015 в 9:35
  • + кто за вас будет отправлять data в ajax? Думаете скрипт знает откуда данные брать для запроса?
    – Visman
    Commented 21 окт. 2015 в 9:36
  • изменил на POST , но все равно не работает. А как data правильно отправить?
    – iKey
    Commented 21 окт. 2015 в 9:37

3 ответа 3

3

в ajax запросе необходимо добавить параметр .data, значение - что-нибудь типа: document.getElementById('pers').value.

т.е. должно получиться что-то вроде:

$(document).ready(function() {
  $("#link").click(function() {
    $.ajax({
      url: "1.php",
      type: "POST",
      dataType: "html",
      data: {
        personaj: $('#pers').prop('value')
      },
      success: function(response) {
        $("#contentST").html(response);
      }
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" action="#" method="POST" enctype="multipart/form-data">
  Персонаж
  <select id="pers" name="personaj">
    <option value="бэтмен">Бэтмен</option>
    <option value="супер-мен">Супер мен</option>
  </select>
  <span id="contentST">Персонаж:</span>
  <input id="link" type="button" name="calc" value="Выбрать" />
</form>
и не стоит вставлять весь ответ, если в нем у вас болтается <span id='..'>...</span> потому что .html(), судя по документации, меняет содержимое тега, т.е. будет спан в спане, и у обоих один и тот же ид. Либо со стороны PHP отдавать просто нужно содержимое тега, и оставить как есть замену содержимого.

2
  • А если добавиться еще одно поле в форму?
    – korytoff
    Commented 21 окт. 2015 в 9:59
  • Не совсем понимаю, что может случиться, учитывая, что у автора вопроса все обращения к DOM по id. А, вы про то, что будет, если нужно отправить еще одно поле. тогда да, ваш пример лучше. Commented 21 окт. 2015 в 10:10
1

пример при клике на input c текстом

$inputs.on('keydown', function (event) {
    if (isEnter(event)) {
        send(this.id, this.value);
        var $next = $inputs.eq($inputs.index(this) + 1);
        setTimeout(function () {
            $next.focus();
        }, 200);
        event.preventDefault();
    }
});
function send(id, value)
{
    var arr = id.split('|');
    id = arr[0];
    var time = arr[1];
    var template_id = arr[2];
    var temp_name = arr[3];
    var id_analiz = arr[4];
    var id_record = arr[5];

    $.ajax({
        type: 'POST',
        url: '<?php echo Yii::app()->createAbsoluteUrl("analiz/analizCreate/ajaxinsert"); ?>',
        data: {id: id, value: value, time: time, template: template_id, temp_name: temp_name, id_analiz: id_analiz, id_record: id_record},
        success: function (data) {
            $('#table2').html(data);

        },
        error: function (data) { // if error occured
            alert("Error occured.please try again");
            alert(data);
        },
        dataType: 'html'
    });
}
function isEnter(e)
{
    var res = false;
    if (e.keyCode == 13)
        res = true;
    return res;
}

ты не передаешь параметр data

2
  • Ужас какой-то, в ajax я не силен, поэтому ничего почти не понимаю в этом коде
    – iKey
    Commented 21 окт. 2015 в 9:38
  • Не могли бы вы мне добавить нужный пункт мой ajax код?
    – iKey
    Commented 21 окт. 2015 в 9:42
1

Если уж вы используйте форму, то и отправляйте ее полностью с помощью AJAX:

HTML

<form id="myform" action="1.php" method="POST" enctype="multipart/form-data">
    <label for="pers">Персонаж</label>
    <select id="pers" name="personaj">
        <option value="бэтмен">Бэтмен</option>
        <option value="супер-мен">Супер мен</option>
    </select>
    <span id="contentST">Персонаж:</span>
    <input type="submit" name="calc" value="Выбрать" />
</form>

JS

$(document).ready(function(){
    $("#myform").on('submit', function(e){
        e.preventDefault();
        $.ajax({
            url: $(this).attr('action'), // action формы
            type: $(this).attr('method'), // метод формы
            dataType: "html", // тип получаемых данных
            data: $(this).serialize(), // сериализуем данные формы
            success: function(response){
                $("#contentST").html(response); // успех
            },
            error: function(){
                // не забываем обрабатывать ошибки
            }
        });
    });
});

PHP

echo 'Выбранный персонаж: '.$_POST['personaj']; // span не нужен

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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