How to display Option Value of Select Box to another html file as a placeholder field?

Question

So I have a fragment from a.html:

<div>
<select name="Address" id="address_search" style="width:282px; display:block;" required>
        <option value="DEFAULT">Select..</option>
        <option value="A">A</option>
        <option value="B">B</>option>
        <option value="C">C</option>
</select>
</div>       

And I also have a placeholer field in b.html:

<label><textarea id="add_info" rows="1" cols="36" placeholder="SELECTED OPTION DISPLAY HERE" readonly></textarea></label> 

How do I display the selected option value from a.html to the placeholer field in b.html? Thanks.

Answer 1

I have an idea, use jquery, and create a hidden div inside b.html , and let's say that hidden div's ID = "hddiv". use

 $("#hddiv").load("a.html", function(){
     var select_val = $( "#hddiv div select option:selected").val(); 
     $( "#add_info" ).attr( "placeholder" ,select_val);
 });

Answer 2

Two html files can not talk if they are in separate browser tabs (except when using localStorage). The only solution is to submit the data to the server and server uses that value in the second page. There are some workarounds using JavaScript as well which I have discussed in the end.

Server Side Solution

You have to submit the value on to the server from a.html and then use that value in b.html. My solution may not make any sense to you since I am not sure which technology you are using on the server side. But it is pretty forward with PHP. Here is a solution if you are using PHP

Modify your file a.html to have a form that will post the data to b.php (not b.html)

<div>
<form action="b.php" method="POST">
<select name="Address" id="address_search" style="width:282px; display:block;" 
        required>
        <option value="DEFAULT">Select..</option>
        <option value="A">A</option>
        <option value="B">B</>option>
        <option value="C">C</option>
</select>
</form>
</div>  

Now change the extension of your file b.html to b.php and

<label>
   <textarea id="add_info" rows="1" cols="36" 
             placeholder="<?php echo $POST['Address']?>" 
             readonly>
   </textarea>
</label>

You need to check whether the POST value is empty or not otherwise exceptions will be logged. Please refer [1] for that.

Complete JavaScript Solution

There are a couple of JavaScript Solutions that might work depending on your use case. The main limitation is that both your pages have to be served from the same domain. Read more about the same origin policy on MDN [2]

If b.html is loaded inside an iframe in a.html

A parent html page (a.html) can talk to another html page (b.html) if b.html is loaded in an iframe inside a.html. If that is not your case skip this part.

Listen on the change event of your select field using and then update the textarea in the iframe.

Sine the question mentions jQuery I am using jQuery in my answer. If you don't want a jQuery based solution I will edit it later.

$("#address_search").change(function() {
   $("iframe")[0].window.$("#add_info").attr("placeholder",$(this).val());
})
// here I have assumed that jQuery is loaded in both the pages (a.html and 
// b.html) and you have not used noConflict API [3].

Using localStorage

Browsers have now a concept of localStorage [4] which is present in almost all browsers [5] that support the placeholder attribute [6]

Again you have to listen to changes in your select field and this time update the localStorage using the setItem API. This time I am using the native browser API assuming you do not have jQuery present.

document.getElementById("address_search").addEventListener("change", 
      function() {
           localStorage.setItem("address_search_value_a_html",this.value);
      })

Now in your b.html handle the onLoad event and read the value from the localStorage

document.getElementsByTagName("body")[0].addEventListener("load", function() {
   document.getElementById("add_info").setAttribute("placeholder",
              localStorage.getItem("address_search_value_a_html"));
})

In this case a user has to reload the page b.html to get the correct value.

[1] Check whether $_POST-value is empty

[2] https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

[3] http://api.jquery.com/jquery.noconflict/

[4] https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage#localStorage

[5] http://caniuse.com/#search=localstorage

[6] http://caniuse.com/#search=placeholder

EDIT: As per your comment below, here is a simple solution for you. But I would recommend you to get an understanding of How the Web Works, JavaScript Event Listeners and any Server Side Technology if you want to work in this domain.

1. Add a change listener on the select element and update the local storage as suggested above.

2. I am assuming you have a button in your a.html file. Let's assume the id of that button is mybutton. Attach a click listener on that button.

   document.getElementById("mybutton").addEventListener("click"function() {
       window.location.href = "b.html"
   })
   

Here I have assumed a.html and b.html are inside the same directory, if not you need to provide that path of b.html.

3. In your b.html read the value from localStorage and change the placeholder attribute as suggested above.

Answer 3

You can use the onchange()

Assuming a.html is loaded into b.html you can do this

<div>
<select name="Address" id="address_search" onchange="document.getElementById('add_info').value = this.value;" style="width:282px; display:block;" required>
        <option value="DEFAULT">Select..</option>
        <option value="A">A</option>
        <option value="B">B</>option>
        <option value="C">C</option>
</select>
</div>