JSFiddle - React, Tailwind, and code Playground

by williamdaburke

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
  </head>

  <body>
    <div id="container">
      <form id="form" method="POST" action="http://www.serta.com/store-locator.html?radius=10" target="my_iframe">
        <input type="text" name="address" id="address" value="11004">
        <input type="submit" id="submit" value="Submit">
      </form>
      <button id="myButton">Button</button>
      <br/>
      <iframe id="my_iframe" name="my_iframe" src="" width="100%" height="700">Fish</iframe>
    </div>
  </body>

</html>

JavaScript

$(document).ready(function() {

  $("#address").attr("value", 11004);
  $("#submit").click(function() {
    $("#form").submit();
    return false;
  });
  $("#myButton").click(function() {
    $("#my_iframe").attr("src", "http://www.serta.com/store-locator.html?radius=10");
    alert($("#my_iframe").contentWindow.body.outerHTML);
    return false;
  });
  $.ajax({
    url: "http://www.serta.com/store-locator.html?radius=10",
    dataType: 'text',
    data: {
      "address": 11005
    },
    success: function(data) {
      var elements = $("<div>").html(data)[0].getElementsByTagName("ul")[0].getElementsByTagName("li");
      for (var i = 0; i < elements.length; i++) {
        var theText = elements[i].firstChild.nodeValue;
        $("#container").append(theText);
      }
    }
  });
});