HTML link to open form without causing refresh on page

Asked

Viewed 1,333 times

1

I created a button of a form, but when clicking it gives refresh in the index page where it is and I don’t want it, I don’t want you to update the page, I just want you to open the popup with the form, as I correct?

a href="#" onclick="window.open('form.html', 'Pagina', 'STATUS=NO, TOOLBAR=NO, LOCATION=YES, DIRECTORIES=NO, RESISABLE=YES, SCROLLBARS=YES, TOP=90%, LEFT=280%, WIDTH=485, HEIGHT=545');"><img src='imagens/button-contato.png'></a>

Form data.html

<!DOCTYPE html>
<html>
<head lang="PT-BR">
    <meta charset="UTF-8">
    <title>Formulário de Contato</title>
</head>
<body>
<!-- Do not change the code! -->
<a id="foxyform_embed_link_181315" href="http://br.foxyform.com/">foxyform</a>
<script type="text/javascript">
    (function(d, t){
        var g = d.createElement(t),
                s = d.getElementsByTagName(t)[0];
        g.src = "http://br.foxyform.com/js.php?id=181315&sec_hash=e727220c0f2&width=445px&heigth=525px";
        s.parentNode.insertBefore(g, s);
    }(document, "script"));
</script>
<!-- Do not change the code! -->
</body>
</html>
javascript html

  • you want the page not to refresh, and do what ?

  • Try using an "Event.preventDefault() followed by Return false" at the end of onclick.

3 answers

0

I had to change the part of the script that was not taking the form data but the script that generates the form. Then follow the changes that worked.

Change the tag to not call another page but the function:

<a id="foxyform_embed_link_181315" href="#" onClick="abrirForm(document)">foxyform</a>

change the script part to name the function:

    <script type="text/javascript">

    function abrirForm(d){
           var l = d.getElementById("foxyform_embed_link_181315");
      i = d.createElement('IFRAME');
  i.src = "http://br.foxyform.com/form.php?id=181315&sec_hash=e727220c0f2";
  i.width = "445px";
  i.height = "524px";
  i.frameborder = 0;
  i.setAttribute('style', 'border: none;');
  i.setAttribute('frameborder', '0');
  l.setAttribute('style', 'display: block; width: 445px; font-size: 0.7em; color: grey; text-align: right; text-decoration: none;');
  l.parentNode.insertBefore(i,l);
}(document);

</script >

Loaded form formulário teste carregado

  • Didn’t work, stopped the refresh but the page still rolls to the top, and does not open the popup.

  • I’m still beginner in javascript, I do not understand very well I need that by clicking the button opens a popup window for the customer to send their data if interested in the product, so the customer clicks on the button and opens the window where will insert their data, And if it were possible, I wanted the code to take the name of the product that he was interested in, because I will put a button on each product, as if it were a pgto button, but since they are expensive machines and need modifications for each customer, there is no way to place a pgto button directly. I need him to send me the data and to get in touch.

  • I had entered this code for the popup

  • <script type="text/javascript"> Function Popupcenter(pageURL, title, w, h) { var left = (screen.width / 2) - (w / 2); var top = (screen.height / 2) - (h / 2); var targetWin = window.open(pageURL, title, 'Toolbar=no, Location=no, Directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=40%' + top + ', left=' + left); } </script>

  • Our friend Dvdsamm’s solution worked perfectly. Thank you all for your help.

  • Now if I want to click on the button to fill the form the code take which product the customer was interested in, because there will be a button for each item, when the customer click on the button that in the image this contact is informed in the form which item he was interested in, where the arrows are, you can do without php, I haven’t studied yet, follow the print of the site I’m doing http://prntscr.com/ghgf8p

Show 1 more comment

0

When you trigger an element, the browser assumes that you want to go to a new address. As you assigned "#" to the href of the element, it loads the page again by adding "#" to the end of the url.

You will need to run the script like this:

0


Change the href for javascript:void(0):

<a href="javascript:void(0)" onclick="window.open('form.html', 'Pagina', 'STATUS=NO, TOOLBAR=NO, LOCATION=YES, DIRECTORIES=NO, RESISABLE=YES, SCROLLBARS=YES, TOP=90%, LEFT=280%, WIDTH=485, HEIGHT=545');"><img src='imagens/button-contato.png'></a>

Browser other questions tagged javascript html

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