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>

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

3 个答案: