Как отправить из html формы только часть данных

Бывает ситуация, когда нужно отправить форму с данными, которая уже вложена в другую форму. Обычно потребности могут быть при написании админской части web-приложения. Но вложенные формы стандартом HTML не допускаются. Вложенная форма при этом не работает. Предлагаем два метода решения данной проблемы.

Первый способ

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


<form action="process.php" method="post"> 
 
<input type="text" name="text1" value="text1"> 
<input type="checkbox" name="box1" value="box1"> 
<input type="submit" name="submit1" value="Отправить 1 блок"> 
 
<input type="text" name="text2" value="text2"> 
<input type="checkbox" name="box2" value="box2"> 
<input type="submit" name="submit2" value="Отправить 2 блок"> 
 
<input type="submit" name="all" value="Отправить"> 
</form>

Второй способ

Этот способ заключается в том, что из формы берутся нужные поля, затем динамически формируется новая форма и отправляется на сервер. Для этого придется сделать несколько вспомогательных действий. Разметка страницы может разная, мы укажем такую:


<div id="wrapper0"> 
  <div id="wrapper1"> 
  Текст 1: <input type="text" name="text1"> 
  <input type="checkbox" name="chk1" value="1"> 
  <input type="button" value="Сохранить" onclick="ds('wrapper1');"> 
  </div> 
 
  <div id="wrapper2"> 
  Текст 2: <input type="text" name="text2"> 
  <input type="checkbox" name="chk2" value="2"> 
  <input type="button" value="Сохранить" onclick="ds('wrapper2');"> 
  </div> 
 
  <div>Глобально: <input type="text" name="global"> 
    <select name="sel"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    </select> 
  </div> 
 
  <input type="button" value="Сохранить" onclick="ds('wrapper0');"> 
</div>

Обращаю внимание, что <div id="wrapper2"></div> - это и есть код вложенной формы. При этом <div id="wrapper0"> </div> - можно заменить на код реальной html формы, т.е. тег:

использовать.


   <script type="text/javascript">
//-------------------------------------------------------------------- 
// Создать временную форму и перенести в нее все элементы 
//-------------------------------------------------------------------- 
function ds(f) { 
  var e=document.getElementById(f); 
  if (!e) return false; 
 
  // Создать временную форму 
  var tmp_form = document.createElement("form"); 
  tmp_form.method='get'; 
  tmp_form.action='process.php';   // Адрес скрипта-обработчика формы 
  tmp_form.style.display='none'; 
  document.getElementsByTagName('body')[0].appendChild(tmp_form); 
 
  // Перенести в нее все элементы 
  cf(e,tmp_form); 
 
  // Отправить созданную форму 
  tmp_form.submit(); 
}


//-------------------------------------------------------------------- 
// Перенести значения полей в форму 
//-------------------------------------------------------------------- 
function cf(e,f) { 
  for (var i=0; i<e.childNodes.length; i++) { 
    var el = e.childNodes[i]; 
    var elName = el.nodeName.toLowerCase(); 
    // Обработка input 
    if (elName=='input' && el.name!='') { 
      var type = el.type.toLowerCase(); 
      switch (type) { 
        // Текстовое поле 
        case 'text': { 
          var tmp_el = document.createElement("input"); 
          tmp_el.name=el.name; 
          tmp_el.type='hidden'; 
          tmp_el.value=el.value; 
          f.appendChild(tmp_el); 
          break; 
        } 
        // Флажок checkbox 
        case 'checkbox': { 
          if (el.checked) { 
            var tmp_el = document.createElement("input"); 
            tmp_el.name=el.name; 
            tmp_el.type='checkbox'; 
            tmp_el.value=el.value; 
            f.appendChild(tmp_el); 
            tmp_el.checked=true; 
          } 
          break; 
        } 
        // Флажок radio 
        case 'radio': { 
          if (el.checked) { 
            var tmp_el = document.createElement("input"); 
            tmp_el.name=el.name; 
            tmp_el.type='radio'; 
            tmp_el.value=el.value; 
            f.appendChild(tmp_el); 
            tmp_el.checked=true; 
          } 
          break; 
        } 
        // Текстовое поле 
        case 'hidden': { 
          var tmp_el = document.createElement("input"); 
          tmp_el.name=el.name; 
          tmp_el.type='hidden'; 
          tmp_el.value=el.value; 
          f.appendChild(tmp_el); 
          break; 
        } 
        // Поле ввода пароля 
        case 'password': { 
          var tmp_el = document.createElement("input"); 
          tmp_el.name=el.name; 
          tmp_el.type='hidden'; 
          tmp_el.value=el.value; 
          f.appendChild(tmp_el); 
          break; 
        } 
        // Любые другие input'ы 
        default: { 
          break; 
        } 
      } 
    } 
    // Обработка textarea 
    else if (elName=='textarea' && el.name!='') { 
      var tmp_el = document.createElement("textarea"); 
      tmp_el.name=el.name; 
      tmp_el.value=el.value; 
      f.appendChild(tmp_el); 
    } 
    // Обработка select 
    else if (elName=='select' && el.name!='') { 
      var tmp_el = document.createElement("input"); 
      tmp_el.name=el.name; 
      tmp_el.type='hidden'; 
      tmp_el.value=el.value; 
      f.appendChild(tmp_el); 
    } 
    else { 
      // Обработать вложенный тег (рекурсия) 
      cf(el,f); 
    } 
  } 
}