title: javascript not working on my webpage
body: <p>I doing a tshirt designing website for my college project.I have added preview option where when the user types it get displayed on the tshirt present in the iframe..I have also added a proceed button, when the user clicks on it,I want the text to get stored in database but for some reason I cant get it to work.I am using ajax and php for the database part.But the javascript part with ajax is not working.Even alert function is not working for onclick funtction..</p>
  
  <p>Any help is appreciated..</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function)() {    
  $("#btn").click( function() {
    var tshirt-text =$('#tshirt-text').val();
             var size =$('#size').val();
      alert("tshirt-text");
            
       $.ajax ({
                type    :'POST',
                data     :{tshirt-text:tshirt-text,size:size},
                 url        :"storeinfo.inc.php",
                 success  :function(result)
       })    
      
  });
          });
          
  var $text = $( '.tshirt-text' );
  var $demoText = $( '.demo-tshirt-text' );
  
  $text.on( 'keyup', function ( e ) {
    $demoText.text( $text.val() );
  } );        </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      padding: 0px;
      overflow-x: hidden;
      font-family: sans-serif; 
  }
  header{                                                       
      padding: 8px;
      height:155px;
      color: white;
      background-color:#6495ED;
      clear: left;
      width:100%;
   }
  footer
  {   padding: 4px;
      color: white;
      background-color:#6495ED;
      width:100%;
      text-align:center;
      font-size:20px;
      font-family:Arial;
  }
  
  ul {                                                                               
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
      width:100%;
  }
  
  li {
      float: left;
  }
  
  li a,.dropbtn {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-family: Arial;
      font-size: 20px;
  
  }
  
  li a:hover:not(.active), .dropdown:hover .dropbtn {
      background-color: #111;
  }
  li a.active {
      background-color: royalblue;
  }
  
  li.dropdown {
      display: inline-block;
  }
  
  .dropdown-content {
      display: none;
      position: absolute;
      background-color: royalblue;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
  }
  
  .dropdown-content a {
      color: white;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
  }
  
  .dropdown-content a:hover {background-color: #f1f1f1}
  
  .dropdown:hover .dropdown-content {
      display: block;
  }
  
  h2.tagline
  {
  text-align:center;
  font-size:35px;
  font-style:italic;
  font-family: "Florence", cursive;
  margin-top:-100px;
  margin-left:-80px;
  }
  
  iframe {
  width: 700px;
  height: 700px;
  margin: -590px 90px 20px 650px;
  display: inline-block;
  position: relative;
  border:none;
  }
  
  .designcontainer {
  display: inline-block;
  margin:0 0 0 10px;
  }
  
  .colorbutton {
      background-color: #4CAF50; /* Green */
      border: none;
      color: black;
      padding: 15px 30px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 20px;
      margin: 4px 2px;
      cursor: pointer;
      border-radius: 14px;
      transition-duration: 0.4s;
      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  }
  
  
  .colorbutton:active {
    background-color: #3e8e41;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
  }
  
  .buttonw {background-color: white; color:black;} /* White */
  .buttonb {background-color: blue; color:white;} /* Blue */
  .buttonr {background-color: #f44336; color:white;} /* Red */ 
  .buttony {background-color: yellow; } /* Yellow */
  
  
  
  
  @keyframes click-wave {
    0% {
      height: 40px;
      width: 40px;
      opacity: 0.35;
      position: relative;
    }
    100% {
      height: 200px;
      width: 200px;
      margin-left: -80px;
      margin-top: -80px;
      opacity: 0;
    }
  }
  
  .option-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative;
    top: 5.33333px;
    right: 0;
    bottom:0;
    left: 0;
    height: 25px;
    width: 25px;
    transition: all 0.15s ease-out 0s;
    background: #cbd1d8;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin-right: 0.5rem;
    outline: none;
    position: relative;
    z-index: 1000;
    line-height: 50px;
  }
  .option-input:hover {
    background: #9faab7;
  }
  .option-input:checked {
    background: royalblue;
  }
  .option-input:checked::before {
    height: 15px;
    width: 15px;
    position: absolute;
    content: '\2714';
    display: inline-block;
    font-size: 26.66667px;
    text-align: center;
    line-height: 28px;
  }
  .option-input:checked::after {
    -webkit-animation: click-wave 0.65s;
    -moz-animation: click-wave 0.65s;
    animation: click-wave 0.65s;
    background: royalblue;
    content: '';
    display: block;
    position: relative;
    z-index: 100;
  }
  .option-input.radio {
    border-radius: 50%;
  }
  .option-input.radio::after {
    border-radius: 50%;
  }
  .labelname
  {
      font-size: 20px;
  
  }
  
  span {
      position: relative;
      display: inline-block;
      margin: 30px 10px;
    }
  .gate {
    display: inline-block;
    width: 500px;
    height: 100px;
    padding: 10px 0 10px 15px;
    font-family: "Open Sans", sans;
    font-weight: 400;
    color: royalblue;
    background: #c6c6c6;
    border: 0;
    border-radius: 10px;
    outline: 0;
    text-indent: 65px;
    transition: all .3s ease-in-out;
    
  }
  .gate::-webkit-input-placeholder {
    color: #c6c6c6;
    text-indent: 0;
    font-weight: 300;
      font-size:18px;
  }
  .gate + label {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 15px;
    text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
    background: royalblue;
    transition: all .4s ease-in-out;
    border-radius:5px;
    transform-origin: left bottom;
    z-index: 99;
      color:white;
      size:18px;
  }
  .gate + label:before, .gate + label:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 10px;
    background: royalblue;
    transform-origin: left bottom;
    transition: all .4s ease-in-out;
    pointer-events: none;
    z-index: -1;
    font-size:18px;
  }
  .gate + label:before {
    background: rgba(3, 36, 41, 0.2);
    z-index: -2;
    right: 20%;
      font-size:18px;
  }
  
  span:nth-child(2) .gate {
    text-indent: 85px;
  }
  
  span:nth-child(2) .gate:focus,
  span:nth-child(2) .gate:active {
    text-indent: 0;
  }
  
  .gate:focus,
  .gate:active {
    color: ;
    text-indent: 0;
    background:#c6c6c6;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
  }
  .gate:focus::-webkit-input-placeholder,
  .gate:active::-webkit-input-placeholder {
    color: floralwhite;
  }
  .gate:focus + label,
  .gate:active + label {
    transform: rotate(-66deg);
    border-radius: 3px;
  }
  .gate:focus + label:before,
  .gate:active + label:before {
    transform: rotate(10deg);
  }
  
  
  .demo-tshirt {
    position: relative;
    width: 200px;
    height: 100px;
   margin: 0 0 0 890px;
   z-index:999;
  
  }
  
  .demo-tshirt-text {
    position: absolute;
    top: 30%;
    left: 45%;
    width: 60%;
    transform: translateX( -45%);
    font-size:25px;
    color: black;
    font-family: Arial, sans-serif;
  }
  
  .spacereducer101{
  margin-top:-80px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;
  T-shirtinator-PERSONALIZE
  &lt;/title&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="jquery-1.5.min.js"&gt;&lt;/script&gt;
  &lt;LINK REL="icon" HREF="image/favicon.ico"&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/pshirts.css"&gt;  
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;header&gt;
  &lt;br&gt;
  &lt;img src="image/logo.png" &gt;
  &lt;h2 class=tagline&gt;"The T-shirt you design &lt;br&gt;
  &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
  &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
  &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
  at your doorstep"&lt;/h2&gt;
  
   &lt;/header&gt;
  
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="homepage.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="active" href="#ptshirts"&gt;Personalized T-shirts&lt;/a&gt;&lt;/li&gt;
    &lt;li class="dropdown"&gt;
      &lt;a href="javascript:void(0)" class="dropbtn"&gt;Buy From Us&lt;/a&gt;
      &lt;div class="dropdown-content"&gt;
        &lt;a href="#"&gt;Quotes printed T-shirts&lt;/a&gt;
        &lt;a href="#"&gt;Graphic printed T-shirts&lt;/a&gt;
        &lt;a href="#"&gt;Memes printed T-shirts&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="help.php"&gt;Help&lt;/a&gt;&lt;/li&gt;
  
   &lt;li&gt;&lt;a href="contactus.php"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
  
   &lt;li onclick="document.getElementById('id02').style.display='block'"style="float:right"&gt;&lt;a href="#"&gt;Sign Up&lt;/a&gt;&lt;/li&gt;
   &lt;li onclick="document.getElementById('id01').style.display='block'" style="float:right"&gt;&lt;a href="#"&gt;Login&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
      &lt;div class="designcontainer"&gt;
      &lt;h1&gt;Select Colour&lt;/h1&gt;
  
          &lt;a href="iframetshirtwhite.html" target="myiframe"&gt;&lt;button class="colorbutton buttonw"&gt;White&lt;/button&gt;&lt;/a&gt; &amp;nbsp;&amp;nbsp;
  &lt;a href="iframetshirtred.html" target="myiframe"&gt;&lt;button class="colorbutton buttonr"&gt;Red&lt;/button&gt;&lt;/a&gt; &amp;nbsp;&amp;nbsp;
  &lt;a href="iframetshirtblue.html" target="myiframe"&gt;&lt;button class="colorbutton buttonb"&gt;Blue&lt;/button&gt;&lt;/a&gt; &amp;nbsp;&amp;nbsp;
      &lt;a href="iframetshirtyellow.html" target="myiframe"&gt;&lt;button class="colorbutton buttony"&gt;Yellow&lt;/button&gt;&lt;/a&gt; &amp;nbsp;&amp;nbsp;
      
      &lt;h1&gt;Select Size&lt;/h1&gt;
      
  
          &lt;div&gt;
    &lt;label class="labelname"&gt;
      &lt;input type="radio" class="option-input radio" id="size" name="size" value="small" checked /&gt;
      Small(S)
    &lt;/label&gt;
    &lt;label class="labelname"&gt;
      &lt;input type="radio" class="option-input radio" id="size" name="size" value="medium" /&gt;
      Medium(M)
    &lt;/label&gt;
    &lt;label class="labelname"&gt;
      &lt;input type="radio" class="option-input radio" id="size" name="size" value="large"/&gt;
      Large(L)
    &lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div class=spacereducer101&gt; &lt;/div&gt;
  
  &lt;div class="demo-tshirt"&gt;
    &lt;div class="demo-tshirt-text"&gt;&lt;/div&gt;
  &lt;/div&gt; 
          
          &lt;h1&gt;Enter the Text you want on your T-shirt&lt;/h1&gt;
          &lt;span&gt;
          &lt;input type="text" name="tshirt-text" class="tshirt-text gate" id="tshirt-text" placeholder="Max 10 letters.." /&gt;
         &lt;label for="tshirt-text"&gt;Enter&lt;/label&gt;
          &lt;/span&gt;
      
          &lt;br&gt;
          
          &lt;input type="button" id="btn" name="Proceed" value="Proceed" class="colorbutton" style="margin-top:20px; margin-left:200px;"&gt;
          
        
  
  
  
    
  &lt;iframe name="myiframe" src="iframetshirtwhite.html"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
      &lt;footer &gt;
  Copyright &amp;copy;  2017 www.DAJ.com
  &lt;/footer&gt;
      
      
      
      
  
      
  
  
  
  
  &lt;/body&gt;
  
  
  
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  
  PHP code:</p>
  
  <pre><code>&lt;?php
  
  $connection =mysqli_connect('localhost','root','','textstorage');
  
  if (mysqli_connect_errno()) {
          echo "Failed to connect to MySQL: " . mysqli_connect_error();
      }
  
  if($_POST['tshirt-text']){
       $tshirt-text  =$_POST['tshirt-text'];
       $size  =$_POST['size'];
  
       $q = "insert into information values('','tshirt-text','size')";
  
        $query = mysqli_query($connection,$q);
         if ($query) {
              echo"data inserted";
            }
      }
  
  ?&gt;
  </code></pre>