Получение значения поля формы отдельно в AJAX при использовании метода serialize

Question

Я использую AJAX для обработки данных формы. Я должен написать несколько функций для нескольких форм. Но я подумал, смогу ли я использовать одну функцию ajax для нескольких форм с разных страниц. Например, в настоящее время я использую это так:

// Update Password
$('#updPass').click(function() {
  var form = document.updPass;
  var dataString = $(form).serialize();
  $.ajax({
    type: 'POST',
    url: 'processes/settings.php',
    data: dataString,
    cache: true,
    beforeSend: function(){
      $('.message').hide();
      $("#updPass").val('Please wait...');
    },
    success: function(html){
      $("#updPass").val('Save');
      $('.message').html(html).fadeIn();
    }
  });
  return false;
});

// Add New Room
$('#addRoom').click(function() {
  var form = document.addRoom;
  var dataString = $(form).serialize();
  $.ajax({
    type: 'POST',
    url: 'processes/rooms.php',
    data: dataString,
    cache: true,
    beforeSend: function(){
      $('.message').hide();
      $("#addRoom").val('Please wait...');
    },
    success: function(html){
      $("#addRoom").val('Save');
      $('.message').html(html).fadeIn();
    }
  });
  return false;
});

Но я хочу использовать это так:

// Perform action
$('#addNew').click(function() {
  var form = document.addNew;
  var dataString = $(form).serialize();
  var formFieldToIdentify = "Take input from 1 hidden form field and store here";
  $.ajax({
    type: 'POST',
    if(formFieldToIdentify == 'password'){
      url: 'processes/settings.php',
    }else{
      url: 'processes/rooms.php',
    }
    data: dataString,
    cache: true,
    beforeSend: function(){
      $('.message').hide();
      $("#addNew").val('Please wait...');
    },
    success: function(html){
      $("#addNew").val('Save');
      $('.message').html(html).fadeIn();
    }
  });
  return false;
});

Как получить эту переменную formFieldToIdentify из формы здесь ? Если я в состоянии получить это, я могу использовать это легко. Если бы я собирал значения формы отдельно, работа была бы сделана. Но здесь я использую метод сериализации и, следовательно, не могу отдельно получить значение этого поля формы.

Answer 1

Предыдущий ответ тоже хорош, я просто хотел пояснить, что вы не можете отправлять данные на несколько URL с помощью одной функции.

Для отправки данных на несколько страниц вам необходимо создать вложенные функции в ajax, которые все функции будут запускаться при нажатии одной и той же кнопки.

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

$('#updPass').click(function(e){
    e.preventDefault();
    var url = $(this).attr('action'); //auto detect action url
    var results = [];
    $('form').each(function(){
        results.push($(this).serialize());
        // serializeArray(); is much more suitable
        //results.push($(this).serializeArray());
    });
    $.ajax({
        'url': url,
        'type': 'POST', // type not method
        'data': {data: JSON.stringify(results)},
        'dataType': 'html',
        'success': function (data) {
            console.log(data);
        }
    });
});

Обратите внимание необходимо указать URL в форме действия

Сторона сервера в php части,

var_dump(json_decode($_POST));
var_dump($_POST);

Answer 2

Итак, вы сказали мне, что не поняли моего представления о том, что мне сказали.
Так что это краткий ответ моей идеи.
Предположим, у вас есть три формы на разных страницах или в * 1003. * та же страница как это -

<form id='registration_form'>
    form fields like input, radio buttons, checkboxes, textareas etc
    <input type='submit' class='form_btn'>
</form>

//***************************
<form id='login_form'>
    form fields like input, radio buttons, checkboxes, textareas etc
    <input type='submit' class='form_btn'>
</form>
//***************************
<form id='update_form'>
    add form fields like input, radio buttons, checkboxes, textareas etc
    <input type='submit' class='form_btn'>
</form>
//****************************  

Каждая форма имеет уникальный атрибут id и общий класс для кнопки.

<script>
    // create variables
    let process_url, method, form, dataString;
    // for submit button.
    let form_btn = document.getElementsByClassName('form_btn');

    // AJAX code to process the form data.
    function your_ajax_function(){
       $.ajax({
    type: method,
    url: process_url,
    data: dataString,
    cache: true,
    beforeSend: function(){
      // fetch those ID's and classes in function set_dynamic_variables()
      // and then use here.
    },
    success: function(html){
      // fetch those ID's and classes in function set_dynamic_variables()
      // and then use here.
    }
  });

    }

    function set_dynamic_variables(e){
        form = //write your own code to fetch the form-ID in which e is present.

        switch (form) {

            case 'registration_form':
                process_url = './process/registration_form.process.php';
                method = 'POST';
                dataString = $('#' + form).serialize();    
                break;

            case 'login_form':
                process_url = './process/login_form.process.php';
                method = 'POST';
                dataString = $('#' + form).serialize();               
                break;

            case 'update_form':
                process_url = './process/update_form.process.php';
                method = 'POST';
                dataString = $('#' + form).serialize();                
                break;

                default:
                // statements_def
                break;
        } // switch()
        } // if

// adding the event-listener for all the submit button of forms
for(let i=0; i< submit_btn.length; i++){
    submit_btn[i].addEventListener('click', function(e) {
        e.preventDefault();
        set_dynamic_variables(e);
        your_ajax_function();
    }, false);


</script>

@ Сайт золотой дружбы Итак, это то, что я сказал вам в обсуждении.
и мой код сможет работать правильно, даже если Вы кладете все формы на одной странице.

Answer 3

В качестве опции вы можете создать объект, в котором вы сохраните свои URL, а затем выбрать нужный URL по ключу:

var urls = {
    addNew: 'processes/rooms.php',
    someUrl: 'processes/file1.php',
    //...
};

$('#addNew').click(function() {
  var form = document.addNew;
  var dataString = $(form).serialize();
  $.ajax({
    type: 'POST',
    url: urls.addNew,
    data: dataString,
    cache: true,
    beforeSend: function(){
      $('.message').hide();
      $("#addNew").val('Please wait...');
    },
    success: function(html){
      $("#addNew").val('Save');
      $('.message').html(html).fadeIn();
    }
  });
  return false;
});

Другой вариант: вы можете определить URL в атрибуте form action. :

<form action="/file.php" method="POST">

В вашем скрипте:

$('#addNew').click(function() {
  var form = document.addNew;
  var dataString = $(form).serialize();
  $.ajax({
    type: 'POST',
    url: $(form).attr("action"),
    data: dataString,
    cache: true,
    beforeSend: function(){
      $('.message').hide();
      $("#addNew").val('Please wait...');
    },
    success: function(html){
      $("#addNew").val('Save');
      $('.message').html(html).fadeIn();
    }
  });
  return false;
});