I want to split the below code to two pages instead of one page.

The code you see is inside to page-1.html.

When you click the link "set to val1" the dropdown changing the option to val1.

When you click the link "set to val2" the dropdown changing the option to val2, an so on.

Is there a way to have the links in page-1.html and the dropdown to page-2.html?

When the user click the link which inside in page-1.html, then to redirect him directly to page-2.html and to change the option of dropdown menu automatically base of the choice of link from the page-1.html?

Any ideas about that it's welcoming

<script>
function selectElement(id, valueToSelect) {
  let element = document.getElementById(id);
  element.value = valueToSelect;
}
</script>

<select id="myDropDown">
  <option>Select a val</option>
  <option value="val1">val1</option>
  <option value="val2">val2</option>
  <option value="val3">val3</option>
</select>

<div><a href="#" onclick="selectElement('myDropDown','val1')">set to val1</a></div>
<div><a href="#" onclick="selectElement('myDropDown','val2')">set to val2</a></div>
<div><a href="#" onclick="selectElement('myDropDown','val3')">set to val3</a></div>

CodePudding user response：

A simple example using view, controller and route would be as follows:

page-1.html

<div class="selection">    
    <a href="{{url("/page-2/{$val}")}}">Set to val1</a>
    <a href="{{url("/page-2/{$val}")}}">Set to val2</a>
    <a href="{{url("/page-2/{$val}")}}">Set to val3</a>
</div>

Web.php file

Route::get('/page-2/{$val}', '\App\Http\Controllers\HomeController@page2');

HomeController

public function page2($val){
    
      return view('page2')->with(['val' => $val]);                                        
}

View page2 (html file)

<select id="myDropDown" name="DropDown_Values">
  <option>Select a val</option>
  <option value="val">val1</option>
  <option value="val">val2</option>
  <option value="val">val3</option>
</select>

CodePudding user response：

I suggest you use data attributes

CODE ON YOUR SERVER:

Page-1

HTML

<div id="nav">
  <div><a href="#" data-id="myDropDown" data-value="val1">set to val1</a></div>
  <div><a href="#" data-id="myDropDown" data-value="val2">set to val2</a></div>
  <div><a href="#" data-id="myDropDown" data-value="val3">set to val3</a></div>
</div>

JavaScript

/// ONLY CHANGE page-2.html to whatever your page2 is called

window.addEventListener("load", function(e) {
  document.getElementById("nav").addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.tagName == "A") {
      e.preventDefault()
      const loc = `page-2.html?id=${tgt.dataset.id}&val=${encodeURIComponent(tgt.dataset.value)}`;
      location = loc; 
    }
  })
})

---

Page-2:

HTML

<select id="myDropDown">
  <option>Select a val</option>
  <option value="val1">val1</option>
  <option value="val2">val2</option>
  <option value="val3">val3</option>
</select>

JavaScript

window.addEventListener("load", function(e) {
  const url = new URL(location.href); 
  const id = url.searchParams.get("id");
  const val = url.searchParams.get("val");
  console.log(url,id,val)
  if (id && val) document.getElementById(id).value=val;
})

---

Working examples using TEST urls!

Page 1

Show code snippet

window.addEventListener("load", function(e) {
  document.getElementById("nav").addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.tagName == "A") {
      e.preventDefault()
      const loc = `page2.html?id=${tgt.dataset.id}&val=${encodeURIComponent(tgt.dataset.value)}`;
      console.log(loc)
      // location = loc; // remove comment on your server
    }
  })
})

<div id="nav">
  <div><a href="#" data-id="myDropDown" data-value="val1">set to val1</a></div>
  <div><a href="#" data-id="myDropDown" data-value="val2">set to val2</a></div>
  <div><a href="#" data-id="myDropDown" data-value="val3">set to val3</a></div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Page2:

Show code snippet

window.addEventListener("load", function(e) {
  // const url = new URL(location.href); // UNCOMMENT THIS ON SERVER AND DELETE THE NEXT LINE 
  const url = new URL("https://yourserver.com/page2.html?id=myDropDown&val=val2"); // DELETE THIS LINE
  const id = url.searchParams.get("id");
  const val = url.searchParams.get("val");
  console.log(url,id,val)
  if (id && val) document.getElementById(id).value=val;
})

<select id="myDropDown">
  <option>Select a val</option>
  <option value="val1">val1</option>
  <option value="val2">val2</option>
  <option value="val3">val3</option>
</select>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>