Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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 PereiraQual 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>
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!!>
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
Veja se isso te serve:
window.formData = {