CODEWITHSUNDEEP
phpjqueryhtml
Sai Karthik
Sai Karthik

Reputation: 1

url not displaying in jquery

I was simply writing a code to display a url on the click of a button. Following is the code I have written for that:

<!DOCTYPE html>
<html>
<head>
    <title>URL Shortener Service</title>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#shortenit').click(sendURL);
        });
        function sendURL(){
            var longurl = $('#longurl').val();
            $('#shorturl').html(longurl);
        }
    </script>
</head>
<body>
    <h1 align="center">URL Display</h1>
    <form align="center" id="urlform">
        <label>Please enter your long URL below</label><br />
        <input type = "text" id="longurl" name ="longurl"/><br />
        <input type = "submit" id="shortenit" value="Shorten"/>
    </form>
    <h3 align="center" id="shorturl"></h3>
</body>
</html>

In the above code, when user clicks the button with ID #shortenit it will trigger the function sendURL() which takes #longurl value and print it in the tag having #shorturl id.

Whenever I enter some url(or text), it is just getting displayed for a split second an then it goes away. Can anyone please tell me where I went wrong?

And I am even trying to send this URL to PHP using jQuery $.get() method so I really need the URL to be obtained. Please tell me how.

Upvotes: 0

Views: 129

Answers (5)

EverardH
EverardH

Reputation: 1

Try this if you need to send "longurl" using $.get()

<!DOCTYPE html>
<html>
<head>
  <title>URL Shortener Service</title>
  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
        $('#urlform').submit(function (e) {
              e.preventDefault();

              // sending form data with serialize()
              // in "shorturl.php" get the longurl with $_GET["longurl"] to work it
              $.get('shorturl.php', $(this).serialize(), function(response){
                // here response is a json object like { 'shorturl': 'someshorturl.com' }
                $('#shorturl').html(response.shorturl);
              });
        });
    });
  </script>
</head>
<body>
  <h1 align="center">URL Display</h1>
  <form align="center" id="urlform">
    <label>Please enter your long URL below</label><br />
    <input type = "text" id="longurl" name ="longurl"/><br />
    <input type = "submit" id="shortenit" value="Shorten"/>
  </form>
  <h3 align="center" id="shorturl"></h3>
</body>
</html>

Upvotes: 0

Davan Polampalli
Davan Polampalli

Reputation: 219

function sendURL(){
   var longurl = $('#longurl').val();
   $('#shorturl').html(longurl);
   return false;
}

if input type is submit then on click of submit button it reloads the page. On reload longurl input does not have any value.

way 1: return false;// inside sendUrl function prevents the default behaviour. For example, in a submit event, it doesn't submit the form.

way 2: change input type="submit" to type="button"//buttons will not submit a form.

Upvotes: 2

Apul Gupta
Apul Gupta

Reputation: 3034

Try this:

<!DOCTYPE html>
<html>
<head>
    <title>URL Shortener Service</title>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
       $(document).ready(function () {
         $('#shortenit').click(function (event) {
            event.preventDefault();
            var longurl = $('#longurl').val();
            $('#shorturl').html(longurl);
         });
      });
    </script>
</head>
<body>
    <h1 align="center">URL Display</h1>
    <form align="center" id="urlform">
        <label>Please enter your long URL below</label><br />
        <input type = "text" id="longurl" name ="longurl"/><br />
        <input type = "submit" id="shortenit" value="Shorten"/>
    </form>
    <h3 align="center" id="shorturl"></h3>
</body>
</html>

Upvotes: 0

mplungjan
mplungjan

Reputation: 177950

You need to not submit the form and I strongly suggest you attach to the form submit event instead of the click

$(function() {
  $("#urlform").on("submit",function(e) {
    e.preventDefault(); // cancel submit
    var longurl = $('#longurl').val();
    $('#shorturl').html(longurl);
  });
});

Upvotes: 0

Bjoern
Bjoern

Reputation: 16304

You have to use something like event.preventDefault(); to interrupt your submit event, otherwise your page gets reloaded.

Example (just the JScript part of your code):

$(document).ready(function () {
    $('#shortenit').click(function (event) {
        event.preventDefault();
        var longurl = $('#longurl').val();
        $('#shorturl').html(longurl);
    });
});

...or have a look at this JSFiddle: http://jsfiddle.net/r7fop9vk/1/

Upvotes: 0

Related Questions