Как заменить id на class в post запросах?

Question

[Азат Киберов]

Есть следующий код

<script type='text/javascript'>
            function sub(action){           
                if (action == 1)
                    window.document.getElementById('page').value = "Удалить";
                else
                    window.document.getElementById('page').value = "Сохранить";
 
                window.document.getElementById('form').submit();            
            }
        </script>

А вот форма отправки

<form id="form1" class="form" action="" method="POST" >
	<input  name="url"  value="" type="text">
	<input  type="text" name="nomer"  value="" >
 <input type='hidden' name="page" value='1' id='page'/>
   <input type="submit"  value="удалить" onclick="sub(1)"/>
   <input type="submit"  value="сохранить" onclick="sub(3)"/></form>
	  

<form id="form2" class="form" action="" method="POST" >
	<input  name="url"  value="" type="text">
	<input  type="text" name="nomer"  value="" >
 <input type='hidden' name="page" value='1' id='page'/>
   <input type="submit"  value="удалить" onclick="sub(1)"/>
   <input type="submit"  value="сохранить" onclick="sub(3)"/></form>

С одной формой данные отправляются а со второй уже нет.

Как заменить id='page' на class='page' чтобы с любой формы отправлять запросы?

Answer 1

[Павел Корнилов]

UPD


https://codepen.io/KorniloFF/pen/dabLEp

UPD-2
Азат Киберов, или вот Вам уже оптимизированный вариант для отправки любого числа форм. Единственное условие работы - у каждой формы должен быть уникальный id.
https://codepen.io/KorniloFF/pen/RvPOpd

Comments

[Азат Киберов]

Попробовал ..Не работает..

[Павел Корнилов]

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

[Павел Корнилов]

Азат Киберов, или вот Вам уже оптимизированный вариант для отправки любого числа форм. Единственное условие работы - у каждой формы должен быть уникальный id.
https://codepen.io/KorniloFF/pen/RvPOpd

[Азат Киберов]

Павел Корнилов, Спасибо второе мне как раз и понадобиться..Удачи..

[Азат Киберов]

А можете вот этот переделать?

$(document).ready(function () { 
    $("form").submit(function () { 
        // Получение ID формы 
        var formID = $(this).attr('id'); 
        // Добавление решётки к имени ID 
        var formNm = $('#' + formID); 
        $.ajax({ 
            type: "POST", 
            url: 'edit3.php', 
            data: formNm.serialize(), 
            success: function (data) { 
                // Вывод текста результата отправки 
                $(formNm).html(data);  
            }, 
            error: function (jqXHR, text, error) { 
                // Вывод текста ошибки отправки 
                $(formNm).html(error);          
            } 
        }); 
        return false; 
    }); 
});

Чтобы не ставить список всех id форм..

Нужно эту ajax технологию объединить с вашей чтобы был гибрид .Взять функцию подмены значений value и выводить в той же форме.

[Павел Корнилов]

Азат Киберов, чего-то я не понял. Посмотрите внимательно последнюю ссылку, что я дал выше.
Там все операции вынесены в отдельную функцию, что исключает дублирование кода. Достаточно вызвать эту функцию и передать в неё аргументом ссылку на форму, как всё на неё уже навесится.

Эту функцию можно редактировать по вашему усмотрению. Можете форкнуть прямо на Pen-е и поэкспериментировать с кодом.

[Азат Киберов]

Вот что то в этом роде нужно

$(document).ready(function () { 
    $("form").submit(function () { 
        // Получение ID формы 


 this.form.onsubmit = ()=>{return false};
  this.form.action.value = this.value;


        var formID = $(this).attr('id'); 
        // Добавление решётки к имени ID 
        var formNm = $('#' + formID); 
        $.ajax({ 
            type: "POST", 
            url: 'edit3.php', 
            data: formNm.serialize(), 
            success: function (data) { 
                // Вывод текста результата отправки 
                $(formNm).html(data);  
            }, 
            error: function (jqXHR, text, error) { 
                // Вывод текста ошибки отправки 
                $(formNm).html(error);          
            } 
        }); 
        return false; 
    }); 
});

Список этот не нужен

sendForm($("#form1"));
sendForm($("#form2"));
// ... etc.

Все будет выводится там же внутри id=form1 id=form2 и тд
Вот кусок этот
data: formNm.serialize(),
success: function (data) {
// Вывод текста результата отправки
$(formNm).html(data);

[Павел Корнилов]

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

[Азат Киберов]

Примерно такое нужно.И еще убрать костыли и об]единить и это полноценное приложение станет.

<script type="text/javascript">
 $(document).ready(function () { 
    $("form").submit(function () { 
        // Получение ID формы 
        var formID = $(this).attr('id'); 
        // Добавление решётки к имени ID 
        var formNm = $('#' + formID); 
        $.ajax({ 
            type: "POST", 
            url: 'edit3.php', 
            data: formNm.serialize(), 
            success: function (data) { 
                // Вывод текста результата отправки 
                $(formNm).html(data);  
            }, 
            error: function (jqXHR, text, error) { 
                // Вывод текста ошибки отправки 
                $(formNm).html(error);          
            } 
        }); 
        return false; 
    }); 
}); 


function sendForm($form) {
  $form.on('click', 'input[type="submit"]', function($e) 
  {
  this.form.action.value = this.value;
  // Send form to server
  $.post('url', $form.serialize(), (r)=>
  {
    // Get response from server
    console.log('Response = ', r);
  }, 'html');
});
}

sendForm($("#form201"));
sendForm($("#form301"));
</script>

Проверил работает.

Answer 2

[Андрей Охотников]

Что здесь вообще происходит? Не надо так делать.

Comments

[Азат Киберов]

Нужна ajax отправка post запроса.Только таким способом получается..Осталось только решить проблему написанную выше в тексте.Первая форма срабатывает вторая нет.Как решить?