Search code examples
formsajaxform

Form field functionality - Preview button will open the given url in new tab

I need help for a new form functionality for me. In the form field, what url is given, on the preview button when it's clicked will open in a new tab with that url. I am not understanding how to do this. Please click the url of image for better understanding. https://i.sstatic.net/cDVQD.jpg

Thanks in advance.

Solution

  • Your html would look something like this:

    <input id="myurl" value="" onchange="updatePreview();" />
<a href="#" id="mybutton" target="_blank">Preview</a>

    And then you would simple have to create the js function that would change the a tag's destination:

    function updatePreview() {
  document.getElementById('mybutton').href = document.getElementById('myurl').value ;
}

    Note: the ids of your elements can be whatever you want, you will just need to update them in the script.

    If you are using Bootstrap styling the link to look like a button would be accomplished by setting the class to btn, but if you are not then something along the lines of this would make it look like a button:

    .button {
  display: block;
  width: 75px;
  height: 15px;
  background: #000;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  text-decoration:none;
}

    Obviously, you would adjust the style to fit you site but this should point you in the right direction.