Enviar resultado de uma função no botão submit do form

[Vitor Pereira dos Santos 0]

Salve galera,

 

Estou com um problema e queria a ajuda de vocês!!

 

Sou leigo em javascript, se puderem mandar uma resposta simples seria o ideal.

 

O problema é o seguinte:

 

Tenho um formulário em uma página HTML normal,

 

<form action="http://localhost/confRele?">
        Modulo: <input type="text" name="a">
        Tecnum: <input type="text" name="b">

      

        Gateway: <input type="text" name="c">
        LocalIP: <input type="text" name="d">
        Mascara: <input type="text" name="e">

        

        <input type="submit" value="Enviar" onclick="junta();">

</form>

 

Quando eu clico no botão submit, ele enviar estes dados do formulário para a página do action, certo? como não estou identificando o método de envio, ele automaticamente envia como GET. Na página que irá receber os dados, a URL ficará da seguinte forma: http://localhost/confRele?a=&b=&c=&d=&e=....

 

O que gostaria era que ao invés de enviar cada input, eu preciso que o input envia os dados desta forma:

 

http://localhost/confRele?x=a,b:&y=c,d,e:&

 

Eu sei que preciso fazer uma função no javascrip, ordenar do jeito que quero e em vez do submit enviar os dados do formulário, ele tem que enviar o resultado da função, esta foi minha lógica, mas eu não consigo fazer isso, eu coloquei um javascript desta forma:

 

<script type="text/javascript">
    function junta(){
        var x = document.getElementById('a').value;
        var y = document.getElementById('b').value;
        var z = x + "," + y + ":";
        return z;
    }
</script>

 

só que não funciona, alguém poderia me dar uma solução?

 

Abraços,

 

Vitor Pereira

[Edgard Hufelande 27]

Veja se isso te serve:

window.formSubmit = (form) => {
	let fd = new FormData(form);
    let serialized = formData.asJSON(fd);
    let ab = [serialized['a'], serialized['b']];
    let cde = [serialized['c'], serialized['d'], serialized['e']];
  
    let url = 'http://localhost/confRele?x='+ab.join(',')+':&y='+cde.join(',')+':&';
  
  	window.open(url);
}

window.formData = {
	asJSON: (fd) => {
      let json = {};
      Array.from(fd.entries()).map(item => {
          json[Object.values(item)[0]] = Object.values(item)[1];
      });

      return json;    
    }
}

 

<form id="form" method="POST" onSubmit="formSubmit(this); return false;">
  Modulo: <input type="text" name="a">
  Tecnum: <input type="text" name="b">

  Gateway: <input type="text" name="c">
  LocalIP: <input type="text" name="d">
  Mascara: <input type="text" name="e">

  <input type="submit" value="Enviar">
</form>

 

[Omar~ 87]

Qual a linguagem back-end, PHP?

Porque se fosse eu faria isso pelo servidor e não pelo navegador da pessoa, uma vez que ela pode manipular o javascript, então de nada adianta fazer isso antes de enviar os dados.

 

Outra questão a função em si está correta, pois você está pegando os values e inserindo como uma única string.

Um jeito fácil de ver como está é colocando onsubmit="return false" no form assim sendo ele não vai enviar os dados, e na função ao invés de return z você pode dar um alert na variável e ver que está correto a string.

Só que quando você submete o form a função deixa de existir junto a seus valores, pois a url é trocada apagando as variáveis criadas pelo javascript anterior.

Ou seja, de qualquer forma quem deve executar tal ação é o arquivo que recebe os dados e não o que envia, a não ser que opte por utilizar ajax

[Vitor Pereira dos Santos 0]

21 horas atrás, Edgard Hufelande disse:

Veja se isso te serve:

window.formSubmit = (form) => {
	let fd = new FormData(form);
    let serialized = formData.asJSON(fd);
    let ab = [serialized['a'], serialized['b']];
    let cde = [serialized['c'], serialized['d'], serialized['e']];
  
    let url = 'http://localhost/confRele?x='+ab.join(',')+':&y='+cde.join(',')+':&';
  
  	window.open(url);
}

window.formData = {
	asJSON: (fd) => {
      let json = {};
      Array.from(fd.entries()).map(item => {
          json[Object.values(item)[0]] = Object.values(item)[1];
      });

      return json;    
    }
}

 

<form id="form" method="POST" onSubmit="formSubmit(this); return false;">
  Modulo: <input type="text" name="a">
  Tecnum: <input type="text" name="b">

  Gateway: <input type="text" name="c">
  LocalIP: <input type="text" name="d">
  Mascara: <input type="text" name="e">

  <input type="submit" value="Enviar">
</form>

 

Funcionou certinho, fiz uns testes e era isso mesmo que queria, só não entendi o que a função window.formData faz, poderia explicar ou comentar cada linha por favor ?

21 horas atrás, Omar~ disse:

Qual a linguagem back-end, PHP?

Porque se fosse eu faria isso pelo servidor e não pelo navegador da pessoa, uma vez que ela pode manipular o javascript, então de nada adianta fazer isso antes de enviar os dados.

 

Outra questão a função em si está correta, pois você está pegando os values e inserindo como uma única string.

Um jeito fácil de ver como está é colocando onsubmit="return false" no form assim sendo ele não vai enviar os dados, e na função ao invés de return z você pode dar um alert na variável e ver que está correto a string.

Só que quando você submete o form a função deixa de existir junto a seus valores, pois a url é trocada apagando as variáveis criadas pelo javascript anterior.

Ou seja, de qualquer forma quem deve executar tal ação é o arquivo que recebe os dados e não o que envia, a não ser que opte por utilizar ajax

É PHP sim, o Edgard Hufelande me mostrou uma solução boa, deu certinho para o que precisava, vlw!!

[Edgard Hufelande 27]

1 hora atrás, Vitor Pereira dos Santos disse:

Funcionou certinho, fiz uns testes e era isso mesmo que queria, só não entendi o que a função window.formData faz, poderia explicar ou comentar cada linha por favor ?

 

Criei uma função formData para poder extrair e serializar os dados do formulário dinamicamente, caso você acrescente outro campo, automaticamente terá o valor dele. Por exemplo:

window.formSubmit = (form) => {
	let fd = new FormData(form); // Os campos e valores do meu form
    let serialized = formData.asJSON(fd); // Serializando os valores e convertendo em objeto
    let ab = [serialized['a'], serialized['b']];
    let cde = [serialized['c'], serialized['d'], serialized['e']];
  
    let url = 'http://localhost/confRele?x='+ab.join(',')+':&y='+cde.join(',')+':&';
  
  	window.open(url);
}

/**
 window.formData é um objeto que possui uma função chamada asJSON que fiz para serializar os valores do FormData
*/
window.formData = {
	asJSON: (fd) => {
      let json = {}; // Crio um objeto para armazenar os campos do meu form
      
      // fd = FormData que enviei como parametro lá em cima "let fd = new FormData(form); formData.asJSON(fd);"
      // fd.entries() são todas as minhas entradas de valores do formulário, faço uma conversão para Array para facilitar
      // a iteração com os valores.      
      // Depois de converter para array, o seguinte resultado: [["a", "valor do campo a"], ["b", "valor do campo b], ...]
      Array.from(fd.entries()).map(item => {
        
          // Aqui dentro terei acesso a cada Array que existe dentro da Array principal, se olhar bem, tenho várias Arrays dentro de uma Array.
          // Então como já tenho acesso as Arrays filhas, eu apenas pego os valores do Array utilizando seu index
          // Por exemplo ["a", "valor do campo a"] => index 0 = "a" | index 1: "valor do campo 1"
          json[Object.values(item)[0]] = Object.values(item)[1];
      });
      
	  // Depois de ter iterado sobre cada campo do form e adicionado no meu objeto json, retorno ele com os valores
      // pra utilizar basta usar json['name_do_campo'];
      return json;    
    }
}

Provavelmente não tenha sido claro o suficiente, isso se dá porque sou péssimo em explicar, meu raciocínio funciona melhor em implementação de códigos. rs