Take Input values and insert into Onclick

Asked

Viewed 1,925 times

0

have a form and need that when clicking the button, I send parameters of what was entered in the input fields within the function url of onclick:

<form action="whatsapp.php" id="send-whatsapp" target="_blank" method="get"> 
    <input name="login" type="hidden" value="logindousuario">
    <input name="numero" type="hidden" value="numero">
    <input type="text" name="nome"  placeholder="Nome"> 
    <input type="text" name="telefone" class="telephoneMask"  placeholder="(00) 0000-0000"> 
    <input type="submit" value="" class="enviar" onclick="return gtag_report_conversion('https://site.com.br/whatsapp.php?login=valordoinput&numero=valordoinput&nome=valordoinput&telefone=valordoinput')">
</form>

Can you help me?

Thank you!

javascript onclick

  • Does it have to be in onclick? You can take input values by placing a class or id. If you can, there is an answer that can help you at this link: https://answall.com/questions/21860/como-peg-input-usando-html-e-javascript

2 answers

1

If I understand your code, you want to send parameters to an external link at the same time you post form data to the internal page Whatsapp.php. You can try this with jquery, first access the link, and if you get a return, post the form. Here’s an example:

<script
  src="https://code.jquery.com/jquery-3.4.0.min.js"
  integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
  crossorigin="anonymous"></script>

<form action="whatsapp.php" id="send-whatsapp" target="_blank" method="POST"> 
	<input name="login" id="login" type="hidden" value="logindousuario">
	<input name="numero" id="numero" type="hidden" value="numero">
	<input type="text" id="nome" name="nome"  placeholder="Nome"> 
	<input type="text" id="telefone" name="telefone" class="telephoneMask"  placeholder="(00) 0000-0000"> 
	<input type="button" onclick="enviarFormulario()">
</form>

<script type="text/javascript">
function enviarFormulario(){
var dados = {
login: $("#login").val(),
numero: $("#numero").val(),
nome: $("#nome").val(),
telefone: $("#telefone").val()
};
$.ajax({
    url: 'https://site.com.br/whatsapp.php',
    type: 'GET',
    data: dados,
    datatype: 'text'
})
.done(function (data) { 
	 $("#send-whatsapp").submit();
})
.fail(function (jqXHR, textStatus, errorThrown) { 
//Tratar o erro
});
}

</script>

Now, if your link is internal (I saw that the two pages share the same name), you can think of something simpler, send the form using the POST method and let the Whatsapp.php page read the data (using $_POST)

1

Make that logic inline seems to me impractical and difficult to read... the best is to use a function that calls this function

That is, for example:

function onSubmit(form, btn) {

  btn.disabled = true; // bloquear o botão para não enviar multiplas vezes

  const campos = ['login', 'numero', 'nome', 'telefone'];
  const queryString = campos
    .map(campo => `${campo}=${form[campo].value}`)
    .join('&');
    
  gtag_report_conversion('https://site.com.br/whatsapp.php?' + queryString)
  return false;
}

function gtag_report_conversion(url) {
  console.log('url:', url);
}
<form action="whatsapp.php" id="send-whatsapp" target="_blank" method="get">
  <input name="login" type="hidden" value="logindousuario">
  <input name="numero" type="hidden" value="numero">
  <input type="text" name="nome" placeholder="Nome">
  <input type="text" name="telefone" class="telephoneMask" placeholder="(00) 0000-0000">
  <input type="submit" value="Enviar" class="enviar" onclick="return onSubmit(this.form, this)">
</form>

Browser other questions tagged javascript onclick

You are not signed in. Login or sign up in order to post.