Сформировать массив данных и отправить его в PHP средствами JS
 

Привет всем! Я написал форму приема заказов на html, она обрабатывается скриптом JS.

var str;
	function showValues() {
      var fields = $(":input").serializeArray();
	  
      jQuery.each(fields, function(i, field){
	     fieldValue += field.value;
	 	 fieldName = field.name;
		   labelType += document.getElementById(fieldName).innerHTML;
		return $("#results").append(labelType + ' ' + fieldValue + ';');
	
      });
    }
	$(":checkbox, :radio").click(showValues);
    $("select, textarea, :text").change(showValues);
    showValues();

Это был первый (тестовый) файл, он работает по принципу: при заполнении формы все данные записываются в скрытый параграф с id="results", потом, после нажатия кнопки "отправить", при помощи скрипта проверяется правильность заполненности, считывается тот самый скрытый параграф и отправляется на страничку zakaz.php.

$(document).ready(function(){

	

$('#registerButton').bind('click',function(){
		if($('#formElem').data('errors')){
			alert('Пожалуйста, исправьте ошибки в форме!');
			return false;
		}else{
 str = document.getElementById('results').innerHTML + "<br>";
$.post("zakaz.php", { formString: str } );
alert('Спасибо, ваш заказ принят!');
return false;
}
 });
});

В файле zakaz.php все обрабатывается следующим кодом:

<?
$date = date('d M Y H:i:s');

list($company_name, $username, $tel_number, $emai) = explode(";", $_POST['formString']);

$mail = "
 $company_name
 $username
 $tel_number
 $email
 
Дата отправки: $date";
$theme = "Заявка";
$DerMail = 'mymail@mail';
mail($DerMail,$theme,$mail);

Мне нужно, чтобы значения, которые передавались в скрытый параграф, просто сохранялись в массиве(так как этот скрытый параграф занимает много места на сайте и его трудно обрабатывать в php) и этот массив передавался на страничку zakaz.php
Заранее спасибо за помощь!

1-ое

function showValues() {
  var objFields = {};
  jQuery.each(fields, function(i, field){
    labelType = document.getElementById(field.name).innerHTML;

    objFields[ labelType ] = field.value;
  });
}

2-ое

$(document).ready(function(){

	

$('#registerButton').bind('click',function(){
		if($('#formElem').data('errors')){
			alert('Пожалуйста, исправьте ошибки в форме!');
			return false;
		}else{
$.post("zakaz.php", { formString: objFields } );
alert('Спасибо, ваш заказ принят!');
return false;
}
 });
});

3-е

обрабатываете массив в пхп

Спасибо, сейчас попробую!

А он будет выдавать значения вида label => name?
то есть Название компании: Айсберг(например.P.S.:это то значение, которое введет пользователь в input)

Переменная? Не, не слышал..

У меня просто не получалось этого сделать, вы прочитайте, там написано, что это тестовая версия была:)

При отправке сообщения страничка просто перезагружается, все поля становятся пустыми, а все предыдущие значения убегают в адресную строку
Вот такого вида:
http://forma/?company_name=%D0%BF%D0...B2%D0%B0%D0%BF ....и так далее
В чем может быть проблема?

Так нужно предотвратить отправку формы.

$('#form').submit(function(e){

e.preventDefault(); //теперь форма не отправится

// тут обрабатываем отправку, например шлем $.post запрос.

});

$(document).ready(function(){
$('#registerButton').bind('click',function(){
		if($('#formElem').data('errors')){
			alert('Пожалуйста, исправьте ошибки в форме!');
			return false;
		}else{
		$('#formElem').submit(function(e){

e.preventDefault(); //теперь форма не отправится

// тут обрабатываем отправку, например шлем $.post запрос.
$.post("zakaz.php", { formString: objFields } );
alert('Спасибо, ваш заказ принят!');
return false;
});


}
 });
});

Вот так можно прописать?

Измененный код тоже почему-то не работает=( Но наверху(в адресной строке) этой строчки уже нет

может return false;

<form action="send.php" method="post">
...
<input type="submit" onsubmit="return function(){return false;}">
</form>

westnord, а зачем вам $('#formElem').submit(function(e)?

просто return false не помогает что ли?

$(document).ready(function(){
        $('#registerButton').bind('click',function(){
            if( $('#formElem').data('errors') ){
              alert('Пожалуйста, исправьте ошибки в форме!');
            } else {
              $.post("zakaz.php", { formString: objFields } );
                 alert('Спасибо, ваш заказ принят!');                 
            }
            return false;
        });
});

Кнопка "отправить" вообще не работает.

function showValues() {
	 var fields = $(":input").serializeArray();
  var objFields = {};
  jQuery.each(fields, function(i, field){
    labelType = document.getElementById(field.name).innerHTML;
   objFields[labelType] = field.value;
  });
}

	

$(document).ready(function(){
        $('#registerButton').bind('click',function(){
            if( $('#formElem').data('errors') ){
              alert('Пожалуйста, исправьте ошибки в форме!');
            } else {
              $.post("zakaz.php", { formString: objFields } );
                 alert('Спасибо, ваш заказ принят!');                
            }
            return false;
        });
});

Вот так выглядит код. Что в нем можно поменять?

покажите код формы

<div id="steps">
                    <form id="formElem" name="formElem">
                        <fieldset class="step">
                           <legend>О компании</legend>
                  <p>
                    <label id="company_name" for="company_name">Название компании:</label>
                    <input id="company_name" name="company_name" type="text" />
                  </p>
                  <p>
                    <label id="username" for="username">Контактное лицо:</label>
                    <input id="username" name="username" type="text" autocomplete=OFF />
                  </p>
                  <p>
                    <label id="tel_number" for="tel_number">Контактный телефон:</label>
                    <input id="tel_number" name="tel_number" type="text" autocomplete=OFF onkeyup="this.value = !isNaN(parseInt(this.value)) ? parseInt(this.value) : ''"/>
                  </p>
                   <p>
                    <label id="email" for="email">Контактный email:</label>
                    <input id="email" name="email" type="email" autocomplete=OFF />
                  </p>
                  <p>
                    <label id="com_description" for="com_description">Краткое описание компании:</label>
                    <textarea id="com_description" name="com_description" placeholder="Размер, основные услуги, география, деятельность"></textarea>
                  </p>
                  <p>
                    <label id="business_type" for="business_type">Отрасль бизнеса:</label>
                    <textarea id="business_type" name="business_type" placeholder="Какой сегмент рынка занимает компания"></textarea>
                  </p>
                  <p>
                    <label id="website" for="website">Веб-сайт компании:</label>
                    <input id="website" name="website" title="В случае редизайна" type="text" autocomplete=OFF />
                  </p>
                   <p>
                    <label id="slogan" for="slogan">Слоган компании или девиз:</label>
                    <input id="slogan" name="slogan" type="text" autocomplete=OFF />
                  </p>
                        </fieldset>

...
//Далее идет код в виде шагов с fieldset'ами, как и код выше
...
//Последний шаг выглядит так:
<fieldset class="step">
                            <legend>Заключительный этап</legend>
							<p>
                    <label id="worktime" for="worktime">Сроки разработки проекта:</label>
                    <input id="worktime" title="Минимум 24 дня" name="worktime" value="24" type="text" autocomplete=OFF onkeyup="this.value = !isNaN(parseInt(this.value)) ? parseInt(this.value) : ''"/>
                  </p>
                  <p>
                    <label id="work_price" for="work_price">Бюджет:</label>
                    <input id="work_price" value="75000"  name="work_price" type="text" autocomplete=OFF onkeyup="this.value = !isNaN(parseInt(this.value)) ? parseInt(this.value) : ''"/>
                  </p>
                   <p>
                    <label id="month_work_price" for="month_work_price">Бюджет, на обслуживание (ежемесячно):</label>
                    <input id="month_work_price" value="10000"  name="month_work_price" type="text" autocomplete=OFF onkeyup="this.value = !isNaN(parseInt(this.value)) ? parseInt(this.value) : ''"/>
                  </p>
                  <p>
                    <label id="extra_message" for="extra_message">Дополнительные пожелания:</label>
                    <textarea id="extra_message" name="extra_message"></textarea>
                  </p>
                  <p> Если каждый шаг отмечен зеленой подтверждающей иконкой, то в форме все поля заполнены правильно.
                    Красная иконка указывает на наличие ошибок в некоторых полях ввода.
                    На данном последнем шаге вы подтверждаете правильность ввода информации. </p>
                  <p class="submit">
                    <button id="registerButton" type="submit">Подать заявку</button>
                  </p>
                        </fieldset>
                        
                    </form>
                </div>

Вот код формы

вот простейший пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>123</title>
	</head>
<body>
	<form action="zakaz.php" method="post">
		<textarea id="extra_message" name="extra_message"></textarea>
		<button id="registerButton" type="submit">submit</button>
	</form>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script type="text/javascript">
	$('form').submit(function()
		{
		$.post('zakaz.php', function(data)
			{
			console.log(data);
			});
		return false;
		});
	</script>
</body>
</html>

Можно return false, можно event.preventDefault() - в jQuery оба способа работают. На мой взгляд event.preventDefault более интуитивен и понятен.

А нужно ли подключать какие-нибудь библиотеки?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 

    <script src="http://malsup.github.com/jquery.form.js"></script> 
<script type="text/javascript" src="sliding.form.js"></script>

Самый последний-это мой, остальные я подключил(взял из интернета)

Что по факту делает эта функция?

westnord, нужно конечно. Нужно еще пару-тройку версий jQuery!

// data - массив
req = new XMLHttpRequest;
req.open('handler.php', 'POST');
req.onload = function() { alert(this.response); }
req.send(JSON.stringify(data))
// ======================
<?php

var_dump(file_get_contents('php://input'));

?>