CODEWITHSUNDEEP
javascriptjquery
user1434156
user1434156

Reputation:

JS/AJAX: Submitting form without button click/page refresh issues

I am trying to submit video url and return an embedded code without page refresh or button. I have js function that will grab the value of the input box. The problem is that, the function will not submit the form that will echo the embedded code. How can i make the form submit without a button click or refresh so it can echo the php code?

EXAMPLE

JS for submitting without refresh:

            <script>
            $(document).ready(function() {
                                    var timer;
                                        $('#video-input1').on('keyup', function() {
                                            var value = this.value;

                                            clearTimeout(timer);

                                            timer = setTimeout(function() {

                                                //do your submit here
                                                $("#ytVideo").submit()

                                                alert('submitted:' + value);
                                            }, 2000);
                                        });


                 //submit definition. What you want to do once submit is executed
                  $('#ytVideo').submit(function(e){
                       e.preventDefault(); //prevent page refresh
                       var form = $('#ytVideo').serialize();
                       //submit.php is the page where you submit your form
                       $.post('index.php', form, function(data){ 


                       });
                  });

            });
            </script>

HTML

<html>
    <form  method="post" id="ytVideo" action="">
    Youtube URL:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input id="video-input1" type="text" value="<?php $url ?>" name="yurl">   
    </form>
</html>

PHP

  <?php

    if($_POST)
    {
        $url     = $_POST['yurl'];


        function getYoutubeVideoID($url) {
            $formatted_url = preg_replace('~https?://(?:[0-9A-Z-]+\.)?(?:youtu\.be/| youtube\.com\S*[^\w\-\s])([\w\-]{11})      
                    (?=[^\w\-]|$)(?![?=&+%\w]*(?:[\'"][^<>]*>| </a>))[?=&+%\w-]*~ix','http://www.youtube.com/watch?v=$1',$url);
            return $formatted_url;
        }
        $formatted_url = getYoutubeVideoID($url);
        $parsed_url = parse_url($formatted_url);




        parse_str($parsed_url['query'], $parsed_query_string);
        $v = $parsed_query_string['v'];

        $hth        = 300; //$_POST['yheight'];
        $wdth       = 500; //$_POST['ywidth'];


//Iframe code

echo htmlentities ('<iframe src="http://www.youtube.com/embed/'.$v.'" frameborder="0" width="'.$wdth.'" height="'.$hth.'"></iframe>');

}
?>

Upvotes: 1

Views: 1418

Answers (1)

techfoobar
techfoobar

Reputation: 66663

Try adding a return false at the end of your .submit() handler:

$('#ytVideo').submit(function(e){
   ...
   $.post(..., function() {

   });

   return false; // add this
});

Upvotes: 1

Related Questions