Question

My jsfiddle is here – http://jsfiddle.net/rDe9V/3/

Relevant jQuery

$(function() {
    $('form input[type="text"]').live('keyup', function() {
        var val = $.trim(this.value);
        $('form .create-playlist-button').prop('disabled', val.length == 0)
    });
    $('form .create-playlist-button').click(function(e) {
        var title = $(e.target).closest('.video-detail').find('.title').text();
        alert(title);
    });
});   

Requirement

a.) When I click “New” I should be able to select corresponding form values like title, views etc

b.) Right now, it keeps on alerting on every keypress

I am new to jQuery and don’t really know

Answer 1

Have a look at my update.

I used .on() instead of .live() and .click() as this works for all future elements in the page (like live but better). Also, I added the handler function to the submit event of the form, because that is what gets triggered when you click on the “New” button (right now this applies to all forms within your body, so you might want to narrow that selector down a bit).

In that handler you can get everything you need and submit that to the server using the .post() function. I think this is what you want.

Find the relevant piece of code below.

---

$(document).ready(function() {
    // activate "New" buttons if input is not empty
    $('form input[type="text"]').live('keyup', function() {
        var val = $.trim(this.value);
        $(this).next("button").prop('disabled', val.length === 0);
    });

    $("body").on("submit","form",function(e){
        // do not submit the form
        e.preventDefault();

        // handle everything yourself
        var $form = $(this);
        var title = $form.closest('.video-detail').find('.title').text();
        var entryTitle = $form.find('.input-small').val();
        console.debug(title);
        console.debug(entryTitle);
        // send the data to the server using .ajax() or .post()
    });
});