I am seeking to showcase an image in a window, and upon the image being clicked, execute the code in a separate window

I am looking to showcase the image provided below.

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

Once the image is clicked, I want it to execute the following code. How can I ensure that only the image is visible initially, and when clicked, the remaining code opens up a form as intended?

<script type="text/javascript>
function navigateToPage() {
    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 provide the following information:

<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:navigateToPage()"><img src="http://gfx.myview.com/MyView/skins/livesample/image/livesample.gif" alt="" border="0"><a/>

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

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

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

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


</script> 

Answer №1

If you're looking to open a new window upon clicking an image and transfer HTML and JavaScript to that new window, here's how you can do it:

Simply add a click action to the image like this:

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

Create a function to open a new page and display your HTML as follows:

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

For a working demo, check out this link:

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

UPDATE: By replacing the </script> tag with <\/scr'+'ipt>, the issue with Microsoft browsers has been resolved. The codepen has also been updated accordingly. Hopefully, this solution works well for you!

I have also removed the validator component since you mentioned it is not relevant to your needs.

Answer №2

It seems like you are looking to execute a code snippet once an image is clicked. To achieve this, you can make use of the onclick attribute.

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

Answer №3

To start, the form elements should be hidden, and upon clicking the image, they should become visible. This will require modifying the .style attribute of your elements using 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for personalizing the sidebar on your WordPress site and incorporating a collapsible menu feature

Is there a way to customize the sidebar in WordPress so that all the categories and their children are easily accessible? For example, on https://www.w3schools.com, clicking on the header category "HTML" displays all related links in the left sidebar. I&a ...

Obtain the ID of element 1 by clicking on element 2 using JQuery

In the world of javascript/jquery, When button1 is clicked, we can get its id like this: var button1id = $(this).attr("id"); If button2 is clicked, how do we retrieve button1's id? This brings us to the question: How does button2 access the i ...

Creating dynamic class fields when ngOnInit() is called in Angular

I am trying to dynamically create variables in a class to store values and use them in ngModel and other places. I understand that I can assign values to variables in the ngOnInit() function like this: export class Component implements OnInit{ name: st ...

Learn how to eliminate all text characters from a string using jQuery, leaving only the numerical values behind

My webpage features a variety of different products, each with their own values. When trying to calculate the total sum of these products and display it in the shopping cart, I encountered an error displaying NaN. How can I remove this NaN from the strin ...

Choosing a combination of classes

For my web application, I created checkboxes that control the visibility of windows by toggling classes on elements. My JavaScript code successfully achieves this functionality. $(document).ready(function(){ $('#field').change(function(){ ...

It appears that using JQuery's .when and .done functions may result in the code executing before the script has finished loading

Since updating the hard-coded <script> with JQuery promises, I have been encountering these errors frequently: https://i.stack.imgur.com/xkWAk.png The issue seems to be inconsistent in replicating. Sometimes, the error occurs while loading the page ...

Images are suddenly encircled by a mysterious border

On my wordpress website, I encountered a strange issue with some photos. Specifically, an image of a cross in a circle is getting a weird border around it, but only on certain resolutions (such as width:1506). Despite inspecting the element, I couldn' ...

Methods to prompt a user to select an option using Bootstrap

I have been struggling with this problem for hours and it's really starting to frustrate me! Currently, I am incorporating Twitter Bootstrap along with bootstrap-min.js. This is the code snippet in question: <select id="assettype" name="assettyp ...

Challenges with handling Ajax responses in Ruby on Rails

I'm currently facing an issue with the Ajax response in my Rails application, and I'm unsure of how to troubleshoot it. Here is the code that is functioning correctly: View <div id="<%= dom_id(comment) %>_count"> <%= Like.wh ...

Secure your Express.js session cookies for enhanced protection

Struggling to figure out how to set a secure cookie in the expressjs framework. Any suggestions on where I can find an option for this? ...

Is there a way to circumvent the eg header along with its contents and HTML code using JavaScript?

I have a script in JavaScript that is designed to replace the content of data-src attribute within each img tag with src. However, I am facing an issue where this script interferes with the functionality of a slider located in the header section. The sli ...

Interactive Javascript Dropdown Selection

I'm currently developing a registration page for a website and I've added a drop-down box that explains to users why we need their birthday. However, I seem to be having issues with my code. Take a look at the script below: <script language=& ...

Tips on managing JavaScript pop-up windows with Selenium and Java

There have been numerous solutions provided on Stack Overflow for handling JavaScript windows, but my situation is quite unique. I am currently working on automating a process for our web-based application. The development team recently implemented a MODA ...

What is the way to modify the contents of a div using ajax?

I have blade files in both list and image formats. There are two span buttons here, and I would like to display a list in different formats when each button is clicked. How should I go about writing the code for this? <span id="penpal-image-view" ...

How can I determine the width of a Bootstrap Column on a smartphone?

Currently, I am utilizing Photoshop to design a sequence of Wireframes for a forthcoming eCommerce website. I have a solid grasp on Bootstrap functioning based on a '12 column' structure, where the width of each column varies depending on the vi ...

Encountering an issue while trying to pass hidden value data in array format to the server side

I am currently learning how to use Handlebars as my templating engine and encountering an issue with passing over data from an API (specifically the Edamam recipe search API). I am trying to send back the array of ingredients attached to each recipe card u ...

Converting a string representing time to a date object in Angular

Converting a string representation of time to a Date object var timeString = "09:56 AM"; this.audit_time = new Date(timeString); // Error: Invalid date I'm facing an issue with this conversion. Any suggestions on how to correct it? Please help me s ...

Moving data from the bottom of the page to the top

I am facing a situation where I have several foreach loops on a page that calculate the sum of variables. By the end of these loops, a specific variable contains data. However, I now need to display this data at the top of my page before the foreach loop. ...

An error was encountered: Unable to assign value to the property "once" of [object Object] because it only has a

`Encountering an Uncaught TypeError: Cannot set property 'once' of [object Object] which has only a getter at HTMLDivElement.addEventListener (polyfills.js:1:146664). This issue is being faced during the process of upgrading the Angular version. ...

Tips for clearing a textbox value in JQuery after a 5-second delay

I attempted the following: <script type="text/javascript"> $(function() { $("#button").click( function() { alert('button clicked'); // this is executed setTimeout(function() ...