[Resolvido] Enviar variáveis (serialize com outras)

[XicoXperto]

Ola outra vez malta!

Desta vez penso que seja uma reposta simples 😁

A questão é a seguinte, eu estou a fazer o seguinte:

Através da função .post() faço as adições necessárias ao formulário (ex. adição de contactos), para isso faço algo do género:

$.post('php/form.person.action.php' , { action : 'newContact' } ,
 function ( output ) {
// metodos
});

A variavel action serve para indicar o que é para ser feito no PHP.

A cena é que agora pretendo enviar o formulário completo, então para isso tenho que usar a função .serialize(), então queria:

$.post ( ajaxFile , { $( form ).serialize(), action : 'saveData' } ,
  function (output) {
  // metodos
});

mas a parte { $( form ).serialize(), action : 'saveData' } dá erro, alguem tem alguma ideia de como dar a volta?

Eu pensei em adicionar ao form um input (hidden) com o nome action, mas se possivel gostava de saltar esta opção.

______________________________________________________________

editado: (resposta)

-__-'

Esqueçam, já descobri, tenho que dar uma variavel ao serialize e de preferencia usar o serialize com serializeArray...

Andei tanto tempo à volta disto, e quando disse, "hmm, será que assim funciona? deixa testar" e funcionou.

Então para que fique aqui registado a solução é:

$.post ( ajaxFile , { variables : $( form ).serializeArray() , action : 'saveData' }  ,
function (output) {
// metodos
});

mudei para serializeArray para que este venha com as variaveis exactamente como se fosse um post.

Edited May 21, 2012 at 01:53 PM by XicoXperto

[HappyHippyHippo]

o mais simples era criares um input hidden no form que fazes serialize e dar-lhe o valor 'saveData'

desta forma, após o serialize do form, vai tambem o action ao barulho

depois é só adicionares o resultado do serialzie ou endereço url

$.ajax ( ajaxFile + "?" + $( form ).serialize()).done(function (output) {
});

Edited May 21, 2012 at 02:01 PM by HappyHippyHippo

[XicoXperto]

Boas HappyHippyHippo (isto é um bom trava linguas 😉 )

Depois de testar, vi que afinal isto não resolve o problema, pois as variaveis ficaram todas alteradas e não consigo aceder da mesma forma, isto é:

Array
(
[0] => Array
	(
		[name] => pessoa1[personal][name]
		[value] => Ze Codeas
	)
[1] => Array
	(
		[name] => pessoa1[personal][bornDate]
		[value] => 12-12-1212
	)	[2] => Array
	(
		[name] => pessoa1[personal][parentType]
		[value] => 2
	)
[3] => Array
	(
		[name] => pessoa1[document0][document]
		[value] => 1s34a33qs
	)	[4] => Array
	(
		[name] => pessoa1[document0][type]
		[value] => 2
	)
[5] => Array
	(
		[name] => pessoa1[pension0][type]
		[value] =>
	)	[6] => Array
	(
		[name] => pessoa1[pension0][value]
		[value] => Valor
	)
[7] => Array
	(
		[name] => pessoa1[pension0][start]
		[value] => Início
	)

e o que eu pretendia era algo:

Array
(
[pessoa1] => Array
	(
		[personal] => Array
			(
				[name] => Ze Codeas
				[bornDate] => 12-12-1212
				[parentType] => 2
			)
		[document0] => Array
			(
				[document] => 1s34a33qs
				[type] => 2
			)	   
               [pension0] => Array
			(
				[type] =>
				[value] => Valor
				[start] => Início
				[end] => Fim
			)
		[contact0] => Array
			(
				[contact] => 123
				[type] => 2
			)     
         	   [job0] => Array
			(
				[job] => Emprego
				[start] => Início
				[end] => Fim
				[value] => Valor
				[type] =>
			)
		[total] => Array
			(
				[contacts] => 0
				[documents] => 0
				[jobs] => 0
				[pensions] => 0
			)	   
    )
[pessoa1-comments] => Observações
)

O submit resolve estes problemas, mas eu não queria que isto reenvia-se para outro lado, penso que com o submit não vou muito longe nesse aspecto...

Para ser sincero ainda não tenho uma ideia definida, porque este fomulário, ora é para aparecer como popup, ora é para aparecer como conteúdo principal, e a minha ideia (neste momento, pois ainda não sei qual o melhor caminho a tomar) é submeter os dados por ajax, e se for popup, faço hide do form (para possível correcção posterior de dados), caso contrario fecho o form e redireciono para a página de opções.

[XicoXperto]

Malta, tive uma ideia que solucionou o problema, isto é, não ser obrigado a usar o submit para poder usar a função $.post(), que é converter todas as entradas de dados e assim adiciona-la ao $.post()

A função seria algo deste genero:

function convertAllFormInputsToAjaxString ( form ) {
var string = "";
$(  form + ' input[type="text"],' + 
 form + ' input[type="password"],' +
 form + ' input[type="hidden"],' +
 form + ' textarea,' +
 form + ' select,' +
 form + ' input[type="radio"],' +
 form + ' input[type="checkbox"]' ).each(function () {

  string+= '\'' + $(this).attr('name') + '\' : \'' + $(this).val() + '\' , ' + "\n" ;
});
return string;
} // convertAllFormInputsToAjaxString ( form )

no entanto, seria necessário alterar a linha marcada para que não seja apenas uma string, pois a função $.post espera

$.post( ajaxFile , { param1 : valor1 , param2 : valor2 , .... }  , function (output) {}

mas tenho que ter tanto os " : " como " , " não como string.

Alguma ideia?

[HappyHippyHippo]

função que cria o objecto de javascript para ser fornecido ao segundo parâmetro do $.post() de jquery

function buildPost(form) {
 var result;
 $(form+" input, "+form+" select, "+form+" textarea, ").each(function() {
   eval("result."+$(this).attr('name')+"="+$(this).attr('value')+";");
 }
}
...
$.post(url, buildPost("#form"), function(result) { });

[XicoXperto]

$(form+" input, "+form+" select, "+form+" textarea, ").each(function() {
   eval("result."+$(this).attr('name')+"="+$(this).attr('value')+";");
 }

Não entendi como funciona, exprimentei com um alert, e não devolveu nada.

Pelo que estive a ver o eval() avalia ou executa os argumentos, é isso?

[HappyHippyHippo]

epa ... esquecime do return 😄

necessita do return result ...

function buildPost(form) {
 var result;
 $(form+" input, "+form+" select, "+form+" textarea, ").each(function() {
   eval("result."+$(this).attr('name')+"='"+$(this).attr('value')+"';");
 }
return result;
}
...
$.post(url, buildPost("#form"), function(result) { });

Edited May 23, 2012 at 09:01 AM by HappyHippyHippo

[XicoXperto]

função que cria o objecto de javascript para ser fornecido ao segundo parâmetro do $.post() de jquery

function buildPost(form) {
 var result =
 $(form+" input, "+form+" select, "+form+" textarea, ").each(function() {
eval("result."+$(this).attr('name')+"="+$(this).attr('value')+";");
 });
return result;
}
...
$.post(url, buildPost("#form"), function(result) { });

pois, eu entendi que faltava por esquecimento, no entanto não funcionou.

Alterei o ";" para "=", fechei os parentesis que estavam esquecidos e pus o return, mesmo assim não deu em nada, exprimentei a função eval sozinha e não consegui obter nenhum valor.

E obrigado, tens ajudado bastante! 😉

[HappyHippyHippo]

o valha-me deus ... esqueci-me de declarar que result é um objecto !!!

código testado e a funcionar:

<!DOCTYPE html>
<html>
 <head>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript">
function buildPost(form) {
  var result = {};
  $(form+" input, "+form+" select, "+form+" textarea, ").each(function() {
	eval("result."+$(this).attr('name')+"='"+$(this).attr('value')+"';");
  });
  return result;
}
 </script>
 </head>
 <body>
<form id="myform">
  <input name="input1" value="input" />
  <select name="input2">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
  </select>
  <textarea name="input3">textarea</textarea>
  <input type="submit" onclick="buildPost('#myform'); return false;"/>
</form>
 </body>
</html>

Edited May 23, 2012 at 09:31 AM by HappyHippyHippo

[rumbafum]

Então mas não podes alterar o teu método para guardar num objecto e usar esse objecto no $.post?

deste tipo:

function convertAllFormInputsToAjaxString ( form ) {
var postData = {};
$(  form + ' input[type="text"],' +
 form + ' input[type="password"],' +
 form + ' input[type="hidden"],' +
 form + ' textarea,' +
 form + ' select,' +
 form + ' input[type="radio"],' +
 form + ' input[type="checkbox"]' ).each(function () {

  postData[$(this).attr('name')] = $(this).val();
});
return postData;
}

edit: Já vi que o HappyHippyHippo já te respondeu com uma opção válida portanto ignora 😉

Edited May 28, 2012 at 04:28 PM by brunoais
geshi

[XicoXperto]

function buildPost(form) {
	  var result = {};
	  $(form+" input, "+form+" select, "+form+" textarea, ").each(function() {
		    eval("result."+$(this).attr('name')+"='"+$(this).attr('value')+"';");
	  });
	  return result;
    }

Funciona sem problemas muito obrigado mesmo!

[XicoXperto]

Ola malta,

Estou de novo a responder neste tópico, porque não consigui entender como o eval() funciona, apesar de estar a funcionar, queria entender para usar futuramente.

Por aquilo que eu percebi, as strings que são passadas para dentro do eval() é como se fossem linhas de código, é isso?

function buildPost(form) {
 var result = {};
 $(form+" input, "+form+" select, "+form+" textarea, ").each(function() {
	  eval("result."+$(this).attr('name')+"='"+$(this).attr('value')+"';");
 });
 return result;
}

Então no caso acima estamos a criar elementos dentro da variavel result? ( result.novoElmento = valor)

Percebi bem?

[HappyHippyHippo]

como o @rumbafun disse podes fazer das duas maneiras:

eval("result."+$(this).attr('name')+"="+$(this).attr('value')+";");
result[$(this).attr('name')]=$(this).attr('value');

no que toca ao eval, é uma função que recebe uma string que será interpretada no motor de javascript, logo será como construir e executar javascript on-the-fly

[XicoXperto]

entendi! 👍

Obrigado!

[brunoais]

Eu sou completamente contra o uso do eval quando existe uma alternativa viável. Neste caso, existe uma alternativa viável, por isso, aconselho-te mais a seguir o conselho do rumbafum que o do HappyHippyHippo, desta vez.

[XicoXperto]

Eu sou completamente contra o uso do eval quando existe uma alternativa viável. Neste caso, existe uma alternativa viável, por isso, aconselho-te mais a seguir o conselho do rumbafum que o do HappyHippyHippo, desta vez.

"completamente contra" porque?

[HappyHippyHippo]

porque é uma sobrecarga para o browser que tem de criar uma segunda instância do motor de javascript

(alem de ser mais difícil de detectar erros de código)

Edited May 28, 2012 at 04:47 PM by HappyHippyHippo

[XicoXperto]

entendo.