CODEWITHSUNDEEP
javascripthtmlcss
StackGuru
StackGuru

Reputation: 133

How do to make edits on a webpage that change display on another webpage

I am trying to create two webpages. One that works as a customization page where I can upload images to the customize page and they display on the display page, and where I can type input on the customization page and it will display in a specific area on the display page. Can this be done via css and html and if so how would I go about this.

This is the code I currently have to display upload and display images, but it only uploads to the custom page so how would I connect the two so when I upload an image it uploads to the display page as well.

Images code Javascript:

window.addEventListener('load', function() {
  document.querySelector('input[type="file"]').addEventListener('change', function() {
      if (this.files && this.files[0]) {
          var img = document.querySelector('img');  // $('img')[0]
          img.src = URL.createObjectURL(this.files[0]); // set src to blob url
          img.onload = imageIsLoaded;
      }
  });
});

function imageIsLoaded() { 
  alert(this.src);  // blob url
  // update width and height ...
}

Image code HTML:

<input type='file' />
<br><img id="myImg" src="#" alt="your image" height=200 width=100>

This is the code I currently have to display text, but it only uploads to the custom page so how would I connect the two so when I upload an image it uploads to the display page as well. Thanks!

Text code Javascript: 

$(document).ready(function() {
  $(".preview").on('keyup', function() {
    $($(this).data('copy')).html($(this).val());
  });
});

Text code HTML: 

<div class="field">
  <label class="paddingleft" for="fullname">Full Name</label>
  <div class="center">
    <input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required>
  </div>
</div>

<br>

Your name is:
<div id="name"></div>

A simpler method I also used: 

 <input onkeyup="$('#name').html(this.value)" ... />
 <p id='name'></p>

Upvotes: 1

Views: 145

Answers (1)

Majed Badawi
Majed Badawi

Reputation: 28434

To set the values on the first page:

<body>
     <input type='file' />
     <br><img id="myImg" src="#" alt="your image" height=200 width=100>
     <input type='text' id="text" placeholder="Enter text"/>
     <button id="submitBtn">Submit</button>
</body>
<script>
     window.addEventListener('load', function() {
          document.querySelector('input[type="file"]').addEventListener('change', function() {
               if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    var baseString;
                    reader.onloadend = function () {
                         baseString = reader.result;
                         console.log(baseString); 
                         localStorage.setItem('image',baseString)
                         document.getElementById("myImg").setAttribute('src',localStorage.getItem("image"));
                    };
                    reader.readAsDataURL(this.files[0]);
               }
          });
          document.getElementById('submitBtn').addEventListener('click', function(){
               var text = document.getElementById('text').value;
               console.log(text)
               if(!text)
                    alert("Please enter input");
               else
                    localStorage.setItem('text',text);
          });
     });
</script>

And to retrieve it in the other page:

<body>
     <img src="" id="image"/>
     <img src="" id="image1"/>
     <p id="text"></p>
</body>
<script>
     window.onload = function(){
               if(localStorage.getItem("image")){
                    document.getElementById("image").setAttribute('src',localStorage.getItem("image"));
                    document.getElementById("image1").setAttribute('src',localStorage.getItem("image"));
               }
               if(localStorage.getItem("text"))
                    document.getElementById('text').innerHTML = localStorage.getItem("text");
     }
</script>

Note that this is not the optimal solution as there are better techniques using a modern framework, however, this will serve you purpose given the technologies you are using.

Upvotes: 1

Related Questions