I'm really new to HTML/jquery so having some issues with submitting a form to jQuery and showing the results in a div.
What I want ->
Text box: Fill in text
Button: Submit text as POST data with longurl=<text>, and display the result in a div (#shorturl)
I have the following now but it simply refreshes the page and doesn't update the div at all:


 17     <div class="container" id="middle">
 18       <div class="row">
 19         <div class="span10 offset1">
 20           <form class="form-horizontal" method="POST" action="shortify.php" id="longurl">
 21             <input class="input-block-level text-center" type="text" name="longurl" id="longurl" autocomplete="off" placeholder="Paste your long URL here...">
 22             <button class="btn btn-large btn-block btn-primary">Submit URL</button>
 23           </form>
 24           <div class="well well-large" id="shorturl">
 26           </div>
 27         </div>
 28       </div>
 29     </div>
 31   </body>


 12 $('#longurl').submit(function() {
 13     $.ajax({
 14       data: $(this).serialize(),
 15       type: $(this).attr('method'),
 16       url: $(this).attr('action'),
 17       success: function(response) {
 18         $('#shorturl').html(response);
 19       } 
 20     }); 
 21     return false;
 22 }); 
 23 });

Some help would be awesome. Thanks :)

Recommended Answers

All 4 Replies

Member Avatar

posting your php file would help dont you think?

The php file doesn't do much, I just wanted to see if I could get the result in the div for now:

echo "Expected echo output";

Thanks in advance,

hai KamiNuvini,

you have to modify your script code as follows so that you will get your answer


        var long_url_txt = $("#longurl").val();  // reading value from your text field here
            url:"shortify.php",                  // where you want to pass your request
            data:"long_url_value="+long_url_txt,   // passing textfield values to desired php page
              $("#shorturl").html(result);  // fetching and placing your result


please go through the bellow url you will find more information regarding this requirement


let me know the stauts

happy coding

Got it working - as a sidenote I also had to add the following to prevent caching:

$.ajaxSetup ({                                                                                                                
    cache: false                                                                                                                

Thanks :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.