Question

I have seen on youtube when we upload any videos automatically, the title field of form gets filled with the name of the video file. How can i achieve this?

my form is

<form enctype="multipart/form-data" method="post" action="http://youshare.ca/music/writestorypost"><p>
    <span class="form_label">Title</span><input type="text" value="" name="title" style="width:400px" class="inputText required"></p>
    <p><label>Upload</label><input type="file" name="song">
    <p><input type="submit" value="Submit" class="button"></p><input type="hidden" value="935" name="page_id">
</form>

Answer 1

Here’s some jquery code to make it work:

$('#myfile').change( function(){
    var fileValue = $(this).val();
    $('#mytitle').val(fileValue);
});

And here’s the modified HTML:

<form enctype="multipart/form-data" method="post" action="http://youshare.ca/music/writestorypost"><p>
    <span class="form_label">Title</span><input id="mytitle" type="text" value="" name="title" style="width:400px" class="inputText required"></p>
    <p><label>Upload</label><input id="myfile" type="file" name="song">
    <p><input type="submit" value="Submit" class="button"></p><input type="hidden" value="935" name="page_id">
</form>

Click here for the working JSFiddle. If you’ve never used jQuery before, then tell me, as this may be confusing!

Edit: Here’s the replacing code:

$('#myfile').change( function(){
    var fileValue = $(this).val();
    fileValue = fileValue.replace('_', ' ');
    fileValue = fileValue.replace('-', ' ');
    $('#mytitle').val(fileValue);
});

Here’s the updated jsfiddle