CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Anuj Philip
Anuj Philip

Reputation: 5

javascript not working on my webpage

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..

Any help is appreciated..

$(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() );
} );        
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;
}
<!DOCTYPE html>
<html>
<head>
<title>
T-shirtinator-PERSONALIZE
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="jquery-1.5.min.js"></script>
<LINK REL="icon" HREF="image/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/pshirts.css">  
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<header>
<br>
<img src="image/logo.png" >
<h2 class=tagline>"The T-shirt you design <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
at your doorstep"</h2>

 </header>

<ul>
  <li><a href="homepage.php">Home</a></li>
  <li><a class="active" href="#ptshirts">Personalized T-shirts</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Buy From Us</a>
    <div class="dropdown-content">
      <a href="#">Quotes printed T-shirts</a>
      <a href="#">Graphic printed T-shirts</a>
      <a href="#">Memes printed T-shirts</a>
    </div>
  </li>
  <li><a href="help.php">Help</a></li>

 <li><a href="contactus.php">Contact Us</a></li>

 <li onclick="document.getElementById('id02').style.display='block'"style="float:right"><a href="#">Sign Up</a></li>
 <li onclick="document.getElementById('id01').style.display='block'" style="float:right"><a href="#">Login</a></li>
</ul>

    <div class="designcontainer">
    <h1>Select Colour</h1>

        <a href="iframetshirtwhite.html" target="myiframe"><button class="colorbutton buttonw">White</button></a> &nbsp;&nbsp;
<a href="iframetshirtred.html" target="myiframe"><button class="colorbutton buttonr">Red</button></a> &nbsp;&nbsp;
<a href="iframetshirtblue.html" target="myiframe"><button class="colorbutton buttonb">Blue</button></a> &nbsp;&nbsp;
    <a href="iframetshirtyellow.html" target="myiframe"><button class="colorbutton buttony">Yellow</button></a> &nbsp;&nbsp;
    
    <h1>Select Size</h1>
    

        <div>
  <label class="labelname">
    <input type="radio" class="option-input radio" id="size" name="size" value="small" checked />
    Small(S)
  </label>
  <label class="labelname">
    <input type="radio" class="option-input radio" id="size" name="size" value="medium" />
    Medium(M)
  </label>
  <label class="labelname">
    <input type="radio" class="option-input radio" id="size" name="size" value="large"/>
    Large(L)
  </label>
</div>

<div class=spacereducer101> </div>

<div class="demo-tshirt">
  <div class="demo-tshirt-text"></div>
</div> 
        
        <h1>Enter the Text you want on your T-shirt</h1>
        <span>
        <input type="text" name="tshirt-text" class="tshirt-text gate" id="tshirt-text" placeholder="Max 10 letters.." />
       <label for="tshirt-text">Enter</label>
        </span>
    
        <br>
        
        <input type="button" id="btn" name="Proceed" value="Proceed" class="colorbutton" style="margin-top:20px; margin-left:200px;">
        
      



  
<iframe name="myiframe" src="iframetshirtwhite.html"></iframe>
</div>
    <footer >
Copyright &copy;  2017 www.DAJ.com
</footer>
    
    
    
    

    




</body>




</html>
PHP code:

<?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";
          }
    }

?>

Upvotes: 0

Views: 2248

Answers (2)

Becca
Becca

Reputation: 1580

You've got some errors with you JavaScript. Try running your JavaScript through a validator (for example, http://beautifytools.com/javascript-validator.php) to see where your errors are. In addition to the one A. Iglesias found, you've got an extra clothes parenthesis on line 1, the same tshirt-text error from line 3 is repeated on line 9, and your syntax for an event handler for success on line 13 isn't right, but I can't tell what you're trying to do.

You've also got a conceptual problem. Lines 17 through 22 should be inside your $(document).ready handler. The ready event runs after the initial HTML is loaded into the browser and ready to go, so any reference to HTML elements outside of that event handler may be referring to them before they're ready.

I wanted to make this a comment to your question, but it's too long, so hopefully it's okay an answer. Perhaps once you've fixed some of these JavaScript issues, post an update to your question in the form of an edit and we can then see what else is going on if it's not working.

edit: I reformatted your JavaScript and tried to resolve any syntax errors. If you open up your browser developer tools and run this JS Fiddle (with comments and without comments), you'll see there are no syntax errors in the console. That doesn't mean it works, just that it's syntactically valid. In fact, this shouldn't work, because the AJAX success handler I wrote simply logs the response.

$(document).ready ( // When function parameters and code blocks are big, I like to
                    // put the opening ( or { at the end of line and put the the
                    // closing } or ) in the same column way at the end. I find it
                    // is easier to keep track of openings and closings.

    function() { // no extra close parenthesis right after "function"
        $("#btn").click(
            function()
            {
                var tshirtText = $('#tshirt-text').val(); // Variable names can only be
                                                          // letters, numbers, dollar symbols,
                                                          // and underscores. They cannot start
                                                          // with numbers.
                var size = $('#size').val();
                alert("tshirt-text");

                $.ajax(
                    { // For clarity, I'll separate out the opening ( and opening {
                      // and the closing } and closing ) when they are one after the other.
                        type:    'POST'
                        // I like to put my commas on the next line rather than the previous line.
                        // I think it makes it more clear that you're moving on to the next thing.
                      , data:    { "tshirt-text": tshirtText, size: size } // You can specify names in
                                                                           // this JSON-style syntax that
                                                                           // aren't valid JavaScript
                                                                           // identifiers, but you have
                                                                           // to put them in quotes.
                      , url:     "storeinfo.inc.php"
                      , success: function(data, textStatus, jqXhr)
                        {
                            console.log(data);
                        }
                    }
                );
            }
        );

        var $text = $('.tshirt-text');
        var $demoText = $('.demo-tshirt-text');

        $text.on(
            'keyup'
          , function (e) {
                $demoText.text($text.val());
            }
        );
    }
);

Upvotes: 1

A. Iglesias
A. Iglesias

Reputation: 2675

If you check the console, you'll see that the problem is the first line inside of the javascript click function...

var tshirt-text = $('#tshirt-text').val();

... because '-' is not a valid character for javascript variable names. Just change it by tshirttext (in all your code), and you will see the alert and should be able to go on.

I hope it helps

Upvotes: 2

Related Questions