0

I have 2 pages and the main page. the total 3 pages. I want to access the first and second pages after changing the dropdown list. I try this code by Jquery in my HTML called main.html.

    <html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-git1.min.js"></script>
     <script>
      $(document).on('change','.fx',function(){
        document.getElementById('content').src = "firstpage.html";
        document.getElementById('content').style.display = "block";
       });
</script>
<style>
  iframe{
    height:700px;
    width:700px;
    display:none;
  }
</style> 
  </head>
  <body>
   <select name="fx" class="fx">
              <option value="empty"></option>
              <option value="firstPage">1</option>
              <option value="secondPage">2</option>
</select>
<iframe src="firstpage.html" id="content" >

</iframe>
  </body>
</html>

I want to use the if statement.

If select 1 load firstPage.html

If select 2 load secondtPage.html

Any Edition of this code.

john vansdis
  • 13
  • 6
  • 1
    Does this answer your question? [Redirect form to different URL based on select option element](https://stackoverflow.com/questions/12388954/redirect-form-to-different-url-based-on-select-option-element) – Picard Feb 19 '22 at 19:10

2 Answers2

0

Whenever the change handler is called, it gets passed an event with relevant information about the event itself. It includes a event.target.value property which you can use to get the option that was clicked. You can just add '.html' to the value and set the src of your iframe accordingly.

 <script>

  $(document).on("change", ".fx", function (event) {
    document.getElementById("content").src = event.target.value + ".html";
    document.getElementById("content").style.display = "block";
  });

</script>
Simon Leroux
  • 447
  • 2
  • 5
  • I would add event.target.value check to make cross-scripting impossible. Otherwise one can easily replace the selector values with a link to another site ( – Sputnik Feb 19 '22 at 19:31
  • it's work bro, can I add value from this dropdown list example after selecting 2 the value is firstPage, I want to add firstPage text to page HTML firtpage.html – john vansdis Feb 19 '22 at 19:41
  • Can I add it without using frame in `main.html` – john vansdis Feb 19 '22 at 20:18
  • Yes, of course. But since IFRAME is a "page in page" and every page has its own HTML, HEAD, BODY tags, a page in IFRAME will be using its own CSS and JS connections. If you don't want to use IFRAME, the loaded pages should not have the above tags. And in this case the styles and scripts of the main.html page will be applied. To make it, replace IFRAME tag with another tag (i.e. DIV) and in the script replace $("#content").attr("src", "firstpage.html") with $("#content").load ("firstpage.html"). – Sputnik Feb 19 '22 at 22:56
  • A great advantage of the load function is that it allows for a callback function. For example, $("#content").load ("firstpage.html", function () {$("#content").show ()}); which ensures that the #content will become visible only when the firstpage.html page is fully loaded. An asynchronous page may take time to load and if it does and you're not using a callback, the empty #content will become visible first and then the content itself will appear which is not very beautiful. – Sputnik Feb 19 '22 at 23:00
0

Please note that values and file names are case sensitive, so 'firstpage' and 'firstPage' are not the same!

Try this jQuery code:

$(document).on ("change", "select.fx[name='fx']", function () {
   var $select = $(this);
   if ($select.val () == "firstPage") {
      $("#content").attr ("src", "firstpage.html");
      $("#content").show ();
   }
   else if ($select.val () == "secondPage") {
      $("#content").attr ("src", "secondpage.html");
      $("#content").show ();
   }
   else {
      $("#content").hide ();
      alert ("Page not found!");
   }
});

Don't do things like this as it may be unsafe:

$("#content").attr ("src", $(this).val() + ".html");
Sputnik
  • 92
  • 7