0

Хочу сделать так, чтобы пользователь мог ввести цифры, например $sum1 = 1500; $sum2 = 100; и т.д. Все это реализовал через форму. Эти переменные должны сложится и получится результат: $resilt = $sum1+$sum2;

Это то все реализовал. но у меня получается что вывод результата происходит в отдельном файле. Форма :

<form action="result.php" method="POST" enctype="multipart/form-data">
тут поля для ввода
<input class="calculate" type="submit" name="calc" value="Сложить" />
</form>

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

Вот есть небольшой код, он выполняет ссылку без перезагрузки страницы, но как сделать это для формы я не совсем понимаю:

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

2 ответа 2

2

Вам нужно в ajax запросе передать данные data из формы. Данные из формы можно получить например по id формы

var formData = new FormData(document.getElementById("myform"));

В результате. Допустим у вас есть форма

<form id="myform" method="POST" action="#">
// тут поля формы
</form>

ajax:

 $("#link").click(function(e){
        e.preventDefault(); // отмена дефолтного действия для ссылки

        var formData = new FormData(document.getElementById("myform"));
        $.ajax({
            url: "result.php",
            type: "GET",
            data: formData,
            dataType: "html",
            success: function(response){
                $("#content").html(response);
            }
        });
    });

Большинство правда передают данные так:

var sum1 = $('id первого инпута').val();
var sum2 = $('id второго инпута').val();

Т.е. берут данные из каждого элемента формы и заносят в отдельные переменные, а потом эти переменные уже заносят в поле data, которое отсылают серверу при аякс запросе

data: {sum1: sum1, sum2: sum2}

2
  • получается что при нажатии на кнопку страница обновляется, и к ссылке добавляет #
    – iKey
    21 окт 2015 в 8:55
  • Так вы и не сабмитьте форму. Вы обрабатывайте клик по кнопке. Или у вас там link это ссылка? Тогда добавьте e.preventDefault(); в начале функции. Подправил ответ для вас...... Сами данные с формы отправились-то хоть? 21 окт 2015 в 9:09
1

Используйте preventDefault для отмены стандартного события:

$("#link").click(function(e){
   e.preventDefault();

   // ...
});

Ваш ответ

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

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