JSFiddle - React, Tailwind, and code Playground

by Reusablecode

HTML

<p id="tmpPostedData">test data by Chris</p>

<p>Current page URL: <span id="this_url">www.example.com</span></p>
<p>Current page title: <span id="this_title">mytitle</span></p>
<p>Current select option: <span id="this_selectOption">selectOption</span></p>

<table align="left" border="0" cellpadding="0" cellspacing="0" width="600">        
<tbody>
<tr><td>
<form action="http://www3.avma.org/myavma/directory/searchresults.asp" method="POST" id="form1" name="form1">
<input name="saveSQL" id="saveSQL" value="EXEC sps_Member_Summary_SEL2 10001,0,'%','A%','%','%','%','%','%','%','%','%','','','','','',''" type="HIDDEN">

<table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
    <tr>
        <td colspan="3">&nbsp;</td>
    </tr>
    <tr>
    <td align="left" valign="top" width="320">
        <strong>Displaying 1 - 100 of 2,498 matching records.</strong>
    </td>
<td align="center" valign="top" width="100"><strong>Page 1 of 25.</strong></td>
<td align="right" valign="top" width="180">
<select id="mySelect" name="selPageTop" onchange="">
    <option value="1">Page 1</option><option value="2">Page 2</option><option value="3">Page 3</option><option value="4" class="selected">Page 4</option><option value="5">Page 5</option><option value="6">Page 6</option><option value="7">Page 7</option><option value="8">Page 8</option><option value="9">Page 9</option><option value="10">Page 10</option><option value="11">Page 11</option><option value="12">Page 12</option><option value="13">Page 13</option><option value="14">Page 14</option><option value="15">Page 15</option><option value="16">Page 16</option><option value="17">Page 17</option><option value="18">Page 18</option><option value="19">Page 19</option><option value="20">Page 20</option><option value="21">Page 21</option><option value="22">Page 22</option><option value="23">Page 23</option><option value="24">Page 24</option><option value="25">Page 25</option>
</select>
</td>
                       ...

JavaScript

$(document).ready(function() {

    //alert($("select[name=selPageTop]").text());


    //alert($("select[name=selPageTop]").serialize());

    var href = jQuery(location).attr('href');
    var url = jQuery(this).attr('title');
    var selectOption = jQuery("select[name=selPageTop]").text();

        
    jQuery('#this_title').html('<strong>' + href + '</strong>');
    jQuery('#this_url').html('<strong>' + url + '</strong>');
    jQuery('#this_selectOption').html(selectOption);
    
    $("#text, #password, #hidden, 
          #textarea, #file, #submit, #reset").click(function () {
      var str = $(this).text();
      $('input, textarea, select').css("background", "#ffffff");
      $(str).css("background", "#ff0000");
      $('#msg').html($(str).val())
    });                  


    $('p#tmpPostedData').text('javascript libraries');

    $("select[name=selPageTop] option:first").each(function($e) {
        //alert("I am an option of " + $e);
    });
    
    
    $("select[name=selPageTop]").change(function() {
        $('#form1').submit(function() {
            $.ajax({
                type: 'POST',
                url: 'http://www3.avma.org/myavma/directory/searchresults.asp',
                data: $('#form1').serialize(),
                
            }
    
    
/*
$("select[name=selPageTop]").click(function() {
      $('#form1').submit(function() {
            $.ajax({
                type: 'POST',
                url: 'http://www3.avma.org/myavma/directory/searchresults.asp',
                data: $('#form1').serialize(),
                success: function(data, textStatus, jqXHR) {
                    alert("whoo hoo");
                    $('#tmpPostedData').text('booyeah');
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert("doh");
                    $('#tmpPostedData').text('error');
                }
            });

            return false;
        });

});
    
   */ 
    /*
   ...