0

Hello,

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:

HTML:

<body>
 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">
 25 
 26           </div>
 27         </div>
 28       </div>
 29     </div>
 30 
 31   </body>

jQuery:

$(document).ready(function(){
 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 :)

3
Contributors
4
Replies
36
Views
4 Years
Discussion Span
Last Post by KamiNuvini
0

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

<?php
echo "Expected echo output";
?>

Thanks in advance,

0

hai KamiNuvini,

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

$(document).ready(function(){

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

});

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

http://www.w3schools.com/jquery/ajax_ajax.asp

let me know the stauts

happy coding

Edited by radhakrishna.p: giving clarity on the solution

0

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

$.ajaxSetup ({                                                                                                                
    cache: false                                                                                                                
});      

Thanks :)

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.