-2

I want to display the image below.

<img src="http://gfx.myview.com/MyView/skins/livesample/image/livesample.gif" alt="" border="0"><a/>

Than when the image is clicked it should run the code below. How do I code this properly so that only the image is displayed and when clicked it runs the remaining code below to open the form. 

<script type="text/javascript">
function goToPage() {
    var s1 = document.getElementById('s1').value;
    var s2 = document.getElementById('s2').value;
    var s3 = document.getElementById('s3').value;
var s4 = document.getElementById('s4').value;

    window.location = "http://igaintrk.com/?E=BjcJU6NSsab3xCmBOyZgJw%3d%3d&s1=" + s1 + "&s2=" + s2 + "&s3=" + s3 + "&s4=" + s4 ;
}
</script>

Please Enter Your

<label for="s2">First Name:</label>
<input type="text" id="s2" />

<label for="s3">Last Name:</label>
<input type="text" id="s3" />

<label for="s1">E-mail:</label>
<input type="text" id="s1" />

<label for="s4">Zipcode:</label>
<input type="number" id="s4" />

<a href="JavaScript:goTOPage()"><img src="http://gfx.myview.com/MyView/skins/livesample/image/livesample.gif" alt="" border="0"><a/>

<script  type="text/javascript">
var frmvalidator = new Validator("myform");
frmvalidator.addValidation("FirstName","req","Please enter your First Name");
frmvalidator.addValidation("FirstName","maxlen=20",
     "Max length for FirstName is 20");

frmvalidator.addValidation("LastName","req");
frmvalidator.addValidation("LastName","maxlen=20");

frmvalidator.addValidation("Email","maxlen=50");
frmvalidator.addValidation("Email","req");
frmvalidator.addValidation("Email","email");

frmvalidator.addValidation("Zipcode","maxlen=5");
frmvalidator.addValidation("Zipcode","req");


</script>
Dr. Roggia
  • 1,095
  • 3
  • 16
  • 40
E Mussey
  • 3
  • 3

3 Answers3

1

It sounds like you want open a new window when you click on the image and pass the html and JavaScript to that new window.

To achieve this you would add a click action to the image like so:

<img src="http://gfx.myview.com/MyView/skins/livesample/image/livesample.gif" onclick="openNewPage()">

And then create a function to open a new page and dump your html with something like this:

var goToPage2 = function() {
  var w=window.open();
  w.document.write('Please Enter Your<br /><label for="s2">First Name</label><input type="text" id="s2" /><label for="s3">Last Name:</label><input type="text" id="s3" /><label for="s1">E-mail:</label><input type="text" id="s1" /><label for="s4">Zipcode:</label><input type="number" id="s4" /><a href="JavaScript:goToPage()"><img src="http://gfx.myview.com/MyView/skins/livesample/image/livesample.gif" alt="" border="0"><a/><scr'+'ipt type="text/javascript">function goToPage() {    var s1 = document.getElementById("s1").value;    var s2 = document.getElementById("s2").value;    var s3 = document.getElementById("s3").value; var s4 = document.getElementById("s4").value; window.location = "http://igaintrk.com/?E=BjcJU6NSsab3xCmBOyZgJw%3d%3d&s1=" + s1 + "&s2=" + s2 + "&s3=" + s3 + "&s4=" + s4 ;}<\/scr'+'ipt>');
};

Here is a link to a working demo:

http://codepen.io/egerrard/pen/gLEVjK

UPDATE: the </script> tag was the problem with my initial way. The new method <\/scr'+'ipt> has been tested in Microsoft browsers and I have updated the codepen too. Hopefully this works for you!

Also I remove the validator stuff since you said that doesn't matter.

Eric G
  • 2,577
  • 1
  • 14
  • 21
  • using these two suggestions allows me to click the image and open a new window but the submit button appears adjacent to the image. it should appear at the end of the zip code box. – E Mussey Dec 21 '16 at 19:23
  • Eric G could you expand on adding the rest of the code to the .write line as you stated above. Thanks. – E Mussey Dec 23 '16 at 14:26
  • @EMussey I updated my answer. I am not completely clear of your new problem but hopefully this updated answer will help. You will need to paste in your scripts separate from your html. Also you will need to add the validation script if you want validation on this form (I didn't see it referenced anywhere in your current code). – Eric G Dec 27 '16 at 19:25
  • I followed the link you posted but when you click the image it just opens a blank page ? Can I e-mail you the code for you to take a look at and maybe tell me or show me how to fix it? – E Mussey Dec 27 '16 at 20:52
  • It is working for me in Chrome. This link might answer why it is not working for you: http://stackoverflow.com/questions/38591575/jquery-append-into-new-window-not-working-with-microsoft-edge . – Eric G Dec 27 '16 at 21:37
  • Form validation is not critical I was using gen_validatorv4.js. – E Mussey Dec 29 '16 at 17:10
  • @ ERIC G. Form validation is not critical I was using gen_validatorv4.js Can you post the entire code that you have working.?. I am using internet explorer 11 and still get a blank page when the image is clicked. I am composing the code in notepad, also have tried visual studio 2015. Thanks for all your help. – E Mussey Dec 29 '16 at 17:16
  • @EMussey the codepen link has the entire working code. The link above applies to Internet Explorer 11 as well. If you want the code at the codepen link to work you'll have to use a non-Microsoft browser. For a solution that works with Microsoft browsers you'll have to do some reading on that other question I posted. – Eric G Dec 29 '16 at 21:22
  • @EMussey I updated the code with a more simplified version that works in IE 11. Check it out at the codepen link. I also updated my answer with the changes I made and a description. Hopefully this solves the problem for you! – Eric G Dec 30 '16 at 19:37
  • @ Erik G. Thanks for updating the code that's what I needed. I used a submit button instead of using the image to submit on click. Thank you Sir. – E Mussey Jan 04 '17 at 17:26
0

If I understand correctly, you want to run a piece of code after clicking the image? In that case, you want to use the onclick property.

<img src="IMAGE_URL" alt="" border="0" onclick="goToPage()" />
Bryant Makes Programs
  • 1,493
  • 2
  • 17
  • 39
  • The goToPage () is the function that is used to pass the s1;s2;s3;s4 variables to the window location. – E Mussey Dec 21 '16 at 20:25
0

You want to hide the form elements first, and when the image is clicked show them. You will have to change the .style attribute of your elements via javascript.

// Javascript
function show(){
  var elem = document.getElementById("form_elements");
  elem.style.display = "block";
  
  var btn = document.getElementById("btn");
  btn.style.display = "none";
}

function goToPage() {
    var s1 = document.getElementById('s1').value;
    var s2 = document.getElementById('s2').value;
    var s3 = document.getElementById('s3').value;
var s4 = document.getElementById('s4').value;

    window.location = "http://igaintrk.com/?E=BjcJU6NSsab3xCmBOyZgJw%3d%3d&s1=" + s1 + "&s2=" + s2 + "&s3=" + s3 + "&s4=" + s4 ;
}
/* CSS */
label {
  display: block;
}

input {
  width: 200px;
}

#form_elements {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: #fff;
  border: 1px solid #aaa;
  box-shadow: 0px 0px 20px 0px #000;
  padding: 20px;
  text-align: center;
}
<!-- HTML -->
<form>
  <button onclick="show()" id="btn">
    &darr; 
    Open
    &darr; 
  </button>
  <!--
    OR
    <img src="http://puu.sh/sWGF2/95a272a86e.png" style="height: 30px;" onclick="show()" id="btn">
  -->
  <div id="form_elements">
    <h3>Please Enter Your:</h3>

    <label for="s2">First Name:</label>
    <input type="text" id="s2" />

    <label for="s3">Last Name:</label>
    <input type="text" id="s3" />

    <label for="s1">E-mail:</label>
    <input type="text" id="s1" />

    <label for="s4">Zipcode:</label>
    <input type="number" id="s4" />
    <br>
    <a href="#" onclick="goToPage(); return false;"><img src="http://gfx.myview.com/MyView/skins/livesample/image/livesample.gif" alt="" border="0" width="120"></a>
  </div>
</form>
Stephan Stanisic
  • 815
  • 7
  • 15