Обновить форму для привязки после отправки

Question

У меня есть большая форма в PHP с несколькими таблицами, каждая из которых вычисляет сумму (цены и количества), а затем в конце вычисляется сумма.
Структура, более или менее, это:

<form action="" id="purchase_form"> 
    <div id="purchase_1"> 
     <table> 
      <input id="price_1"> 
      <input id="quantity_1"> 

      <input type="submit" name="calculate" value="Click here to calculate the partial"> 
     </table> 
    </div> 
    <div id="purchase_2"> 
     <table> 
      <input id="price_2"> 
      <input id="quantity_2"> 

      <input type="submit" name="calculate" value="Click here to calculate the partial"> 
     </table> 
    </div> 

    <tr> 
     <td id="price_sum"><?php *script* ?></td> 
     <td id="quantity_sum"><?php *script* ?></td> 
    </tr> 
</form> 

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

Что я хочу, когда я нажимаю кнопку отправки, чтобы перезагрузить страницу, показывая форму, на которую я нажал. Например, если я нажму на отправку из таблицы # purchase_1, я хочу, чтобы страница перезагрузилась в таблице # purchase_1 и так далее.

Можно ли это сделать с помощью javascript?

Answer 1

Если я хорошо вас понял, это невозможно. Вы можете делать вычисления на стороне клиента, при условии, что они не являются сложными. Если вы выполняете некоторые магические вещи на бэкэнде, и вы не можете подсчитать цену на стороне клиента, вы можете сделать запрос xhr в форме submit (ПРИМЕЧАНИЕ: форма не будет отправляться, как обычно, поэтому страница выиграла не перезагружаться).

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

var form = document.getElementById("purchase_form"); 
form.addEventListener("submit", function(e) { 
    e.preventDefault(); // we prevent the default action, which is a submit for the form element 

    var xhr = new XMLHttpRequest(); // create a new XHR object. 
    xhr.open("GET", form.action, true); // open the async connection 
    xhr.addEventListener("load", function() { 
    var doc = document.implementation.createHTMLDocument(""); // you could use DOMParser aswell, but parsing html via DOMParser is not supported in in Safari < 7.1 and IE < 10. 
    doc.documentElement.insertAdjacentHTML("afterbegin", xhr.response); 

    // now you would have to retrieve the element where the partial price is displayed and insert that value to desired element. 
    // you can do it like document.querySelector(desiredElement).textContent = doc.querySelector(selectorToElementToGetValueFrom).textContent 

    }); 
    xhr.addEventListener("error", function() { 
    // error happened... you can handle the action for exception here 
    }); 
    xhr.send(new FormData(form)); 
}); 

Если у вас есть какие-либо дополнительные вопросы, не стесняйтесь спрашивать меня.