Form sent and another page display at the same html click

Question

Hi, I have a problem adapting a form. I found similar questions on the site, but since I’m a beginner in programming, I may not have detected the answer to my specific question.

I have the following form (it was not I who assembled, I took the plugin ready, and adapted some things already):

<div class="tnp tnp-subscription" style="margin: 0% 0% 0% 0%; padding: 1% 4% 4% 6%; border-width: px px  px px; box-shadow: 0px  0px  0px rgba(45,45,45,0.30); background: rgba(255, 255, 255, 0); display: block;"><form action="https://” method="post" name="nlang" type="hidden" value="" />
<div class="tnp-field tnp-field-firstname" style="width: 98%; margin-right: 2%; margin-top: -3%; display: inline-block;"><label></label><input class="tnp-firstname" name="nn" style="width: 99%;" required="" type="text" placeholder="Nome" /></div>
<div class="tnp-field tnp-field-email" style="width: 98%; margin-right: 2%; margin-top: -3%; display: inline-block;"><label></label><input class="tnp-email" name="ne" style="width: 99%;" required="" type="email" placeholder="E-mail" /></div>
<div class="tnp-field tnp-field-privacy" style="margin-right: 25px; display: block; line-height: 1.4em;"><label style="text-align: left; font-family: Bitter; font-size: 10px;"><input class="tnp-privacy" name="ny" required="" type="checkbox" />&nbsp;<span style="font-family: Bitter; font-size: 15px; text-align: left;">Sim, ao informar meu e-mail, aceito receber conte&uacute;dos do blog e compreendo que posso me descadastrar a qualquer momento.</span></label></div>
<div class="tnp-field tnp-field-button"><input class="tnp-submit" style="width: 100%; background: #f6836b; color: #fff; font-size: 19px; border: 0px solid #d9534f; border-radius: 6px; font-family: , sans-serif;" type="submit" value="Envie para meu e-mail!"/></div>
</form></div>

As you can see, the attribute action is setting the sending location of the collected form data, which leads to a standard plugin page. But actually, I don’t want the user to access this page, I want you to open another url for it, or at least it will be automatically redirected to the page I want after sending the form.

In short, I want single click, the form is sent, BUT the page displayed to the user is another.

I researched about double actions on the same button and also tried redirecting within the form itself, but I’m not able to adapt my need.

If anyone can help me, I’d appreciate it!

UPDATE OF THE QUESTION!

I managed to open the url I want on another page with the code below:

<div class="tnp tnp-subscription" style="margin: 0% 0% 0% 0%; padding: 1% 4% 4% 6%; border-width: px px  px px; box-shadow: 0px  0px  0px rgba(45,45,45,0.30); background: rgba(255, 255, 255, 0); display: block;"><form action="https://enviaform" method="post" name="nlang" type="hidden" value="" onsubmit="myFunction()" />
<div class="tnp-field tnp-field-firstname" style="width: 98%; margin-right: 2%; margin-top: -3%; display: inline-block;"><label></label><input class="tnp-firstname" name="nn" style="width: 99%;" required="" type="text" placeholder="Nome" /></div>
<div class="tnp-field tnp-field-email" style="width: 98%; margin-right: 2%; margin-top: -3%; display: inline-block;"><label></label><input class="tnp-email" name="ne" style="width: 99%;" required="" type="email" placeholder="E-mail" /></div>
<div class="tnp-field tnp-field-privacy" style="margin-right: 25px; display: block; line-height: 1.4em;"><label style="text-align: left; font-family: Bitter; font-size: 10px;"><input class="tnp-privacy" name="ny" required="" type="checkbox" />&nbsp;<span style="font-family: Bitter; font-size: 15px; text-align: left;">Sim, ao informar meu e-mail, aceito receber conte&uacute;dos do blog e compreendo que posso me descadastrar a qualquer momento.</span></label></div>
<div class="tnp-field tnp-field-button"><input class="tnp-submit" style="width: 100%; background: #f6836b; color: #fff; font-size: 19px; border: 0px solid #d9534f; border-radius: 6px; font-family: , sans-serif;" type="submit" value="Envie para meu e-mail!" /></div>
</form></div>
<script>
function myFunction() {
window.open("https://google.com")
}
</script>

The action page still opens, but no problem. What happens is that in the tests in w3schools works well, it opens the 2 url, but when I applied to my page, it does not run the myFunction().

What is missing?

Thank you!

Answer 1

If I understand your question correctly, you need to submit the data for a certain route however, redirect the user to another in the success of the submission, right?

If so, I think the appropriate context for the use of XHR API (Xmlhttprequest).

• First assign a unique identifier (id) to your form so that you can refer to it and obtain the data entered in it;
• Remove the action attribute from your form, since the request will be made in the background, we don’t need to explicitly define the attribute;
• Define the method that will perform the commit using the XHR API and assign it as the commit listener via the parameter onsubmit;

Would that be something:

<div class="tnp tnp-subscription" style="margin: 0% 0% 0% 0%; padding: 1% 4% 4% 6%; border-width: px px  px px; box-shadow: 0px  0px  0px rgba(45,45,45,0.30); background: rgba(255, 255, 255, 0); display: block;">

  <form id="myForm" method="post" name="nlang" type="hidden" value="" onsubmit="sendAndRedirect" />
    <div class="tnp-field tnp-field-firstname" style="width: 98%; margin-right: 2%; margin-top: -3%; display: inline-block;">
      <label>
      </label>
      <input class="tnp-firstname" name="nn" style="width: 99%;" required="" type="text" placeholder="Nome" />
    </div>

    <div class="tnp-field tnp-field-email" style="width: 98%; margin-right: 2%; margin-top: -3%; display: inline-block;">
      <label>
      </label>
      <input class="tnp-email" name="ne" style="width: 99%;" required="" type="email" placeholder="E-mail" />
    </div>

    <div class="tnp-field tnp-field-privacy" style="margin-right: 25px; display: block; line-height: 1.4em;">
      <label style="text-align: left; font-family: Bitter; font-size: 10px;">
        <input class="tnp-privacy" name="ny" required="" type="checkbox" />&nbsp;

        <span style="font-family: Bitter; font-size: 15px; text-align: left;">Sim, ao informar meu e-mail, aceito receber conte&uacute;dos do blog e compreendo que posso me descadastrar a qualquer momento.
        </span>
      </label>
    </div>

    <div class="tnp-field tnp-field-button">
      <input class="tnp-submit" style="width: 100%; background: #f6836b; color: #fff; font-size: 19px; border: 0px solid #d9534f; border-radius: 6px; font-family: sans-serif;" type="submit" value="Envie para meu e-mail!" />
    </div>
  </form>
</div>

<script>
  function sendAndRedirect() {
    var form = document.getElementById('myForm');
    var xhr = new XMLHttpRequest(),
        formData = new FormData(form);

    xhr.addEventListener('load', function(event) {
      location.href("https://google.com");
    });

    xhr.open('POST', 'https://enviaform');

    xhr.send(formData);
  }
</script>

I won’t debug the code, but it’s probably what you need.

I leave you some tips:

• When starting a question, look for the code to improve readability and facilitate understanding, which will reflect in more answers;
• Read through the reference link(s) I left in order to really understand what is being done;

I hope I’ve helped!

Answer 2

I will post here the form that worked (without the script), to help others in the future.

<div class="tnp tnp-subscription" style="margin: 0% 0% 0% 0%; padding: 1% 4% 4% 6%; border-width: px px  px px; box-shadow: 0px  0px  0px rgba(45,45,45,0.30); background: rgba(255, 255, 255, 0); display: block;">    
<form action="https://enviaform" method="post" name="nlang" type="hidden" value="" onsubmit= window.open("https://pagina-de-destino") />
    <div class="tnp-field tnp-field-firstname" style="width: 98%; margin-right: 2%; margin-top: -3%; display: inline-block;">
         <label>
         </label>
         <input class="tnp-firstname" name="nn" style="width: 99%;" required="" type="text" placeholder="Nome" />
    </div>
    
    <div class="tnp-field tnp-field-email" style="width: 98%; margin-right: 2%; margin-top: -3%; display: inline-block;">
     <label>
     </label>
     <input class="tnp-email" name="ne" style="width: 99%;" required="" type="email" placeholder="E-mail" />
    </div>
    
<div class="tnp-field tnp-field-privacy" style="margin-right: 25px; display: block; line-height: 1.4em;">
    <label style="text-align: left; font-family: Bitter; font-size: 10px;">
      <input class="tnp-privacy" name="ny" required="" type="checkbox" />&nbsp;

  <span style="font-family: Bitter; color: #000000; font-size: 1/px; text-align: justified;">Sim, ao informar meu e-mail, aceito receber conteúdo do blog e compreendo que posso me descadastrar a qualquer momento.
  </span>
 </label>
</div>

<div class="tnp-field tnp-field-button">
    <input class="tnp-submit" style="width: 100%; background: #f6836b; color: #ffffff; font-size: 19px; border: 0px solid #d9534f; border-radius: 6px; font-family: , sans-serif;" type="submit" value="Enviar"/>
    </div>
</form>
</div>

Really, for all the professionals who saw my question, it may have seemed like a very simple answer, but as I said, I’m just getting started and thank those who were willing to answer me and give me tips.

See you around!