我想在窗口中显示图像，并且单击图像时，我想在新窗口中运行代码

Question

我想要显示下面的图像。

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

比单击图像时它应该运行下面的代码。我该如何正确编码，以便只显示图像，点击后将运行下面的其余代码以打开表单。

<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> 

Answer 1

这听起来像你想，当你点击图像和HTML和JavaScript传递给新窗口中打开一个新窗口。

要做到这一点，你会增加点击动作的图像，像这样：

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

，然后创建一个函数打开一个新页面，像这样的东西甩掉你的html：

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>'); 
}; 

这里是一个工作演示的链接：

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

更新：</script>标记是我最初的问题。新方法<\/scr'+'ipt>已经在Microsoft浏览器中测试过，我也更新了codepen。希望这对你有用！

此外，我删除验证器的东西，因为你说没关系。

Answer 2

如果我理解正确，您想在点击图片后运行一段代码？在这种情况下，您想使用onclick属性。

<img src="IMAGE_URL" alt="" border="0" onclick="goToPage()" /> 

Answer 3

您想先隐藏表单元素，然后单击图像时显示它们。您将不得不通过javascript更改元素的.style属性。

// 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>