Parsing Pasted Text with Jquery (no server side processing)

[jquerynewbie]

I need a solution to do the following

1.User pastes some text into a textarea
2.User clicks a button "Autofill"
3.On press of the button, the various lines of the pasted text are put into the appropriatly named form fields.

Here is an example of how the pasted text is formatted:

First Name Jimberly  
Last Name Hagg  
Postcode Test

I've started work on this project here:
http://jsfiddle.net/hc8kL/1/

Any help/guidance (including coding examples) would be appreciated!

(By the way my jquery to disable the "Continue" button is buggy - it enables the button if you enter some text into one of the forms, but then if you delete it, this isn't noticed by the function and it still keeps the "Continue" button enabled)

[DanInMa]

here is a really simple example. it assumes your textarea has an id of "textareaid" and your auto fill button has an id of "autofillid"
- side note you should really have a valid form element. having valid html can only help you.

function getuserdata(){
var $ta= $("#textareaid");
var $data= $ta.val().split('\n');
var $first = $data[0].replace('First Name');
var $last = $data[1].replace('Last Name');
var $post = $data[2].replace('Postcode');
$('#f1').val($.trim($first));
$('#f2').val($.trim($last));
$('#f3').val($.trim($post));
}

});
$("#autofillID").click(function(){
getuserdata();
});

Also, if you wanted to, you can do away with the autofill button and jsut fill the fields automatically upon the paste event like so:

$("#textareaid").bind('paste',function(){
getuserdata();
});

[DanInMa]

corrections: http://jsfiddle.net/hc8kL/29/

function getuserdata(){
    setTimeout(function() {
var $ta= $("#textareaid");
var $data= $ta.val().split('\n');
var $first = $data[0].replace('First Name',"");
var $last = $data[1].replace('Last Name',"");
var $post = $data[2].replace('Postcode',"");
$('#f1').val($.trim($first));
$('#f2').val($.trim($last));
$('#f3').val($.trim($post));
        $ta.val('')
       }, 150);
}
$(document).ready(function(){
$("#autofillid").parent().click(function(e){
    e.preventDefault();
getuserdata();
});
$("#textareaid").live('paste',function(){
    getuserdata();
});
});

[jquerynewbie]

Thanks for that guys, it's helpful. I checked it out but seems my button "Continue" is broken with that code added? Also the code to enable the "Continue" doesn't really work lol (see my initial post).

[DanInMa]

you just want the first name field to have something in it before you will allow continue right? you dont care about last name or post code?

[jquerynewbie]

Really I want all form fields to be required, there will be other fields but I haven't added them all in yet. Obviously you can either fill in the form fields manually or by pasting them in and using the autofill function (see above)....there's a lot more functionality I need to get into this, but at least it's a start..!

I did previously have this function running:

function checktext() {
   
if($("#f1").val().length > 0 && $("#f2").val().length > 0 && $("#f3").val().length > 0)  {
    $('#stage1').removeAttr('disabled');}
    else {document.getElementById("stage1").disabled = true;}
}

See:
http://jsfiddle.net/2p5Eg/88/


with the form field attribute

onkeyup="checktext()"

is there a better way of doing this?

[jquerynewbie]

@DatinMa. Yes I do care about all form fields, I made a function here, but is this the best way to do something like this?


http://jsfiddle.net/hc8kL/35/

function checktext() {
   
if($("#f1").val().length > 0 && $("#f2").val().length > 0 && $("#f3").val().length > 0)  {
    $('#stage1').removeAttr('disabled');}
    else {document.getElementById("stage1").disabled = true;}
}

[DanInMa]

http://jsfiddle.net/hc8kL/38/

[jquerynewbie]

What changed in that fiddle?
The radio boxes aren't working so I fixed them.

The functionality of the form fields requiring text still doesn't work 100%, if you write something in all 3 fields, it enables the button and then delete the text from one of them, it still keeps the continue button enabled.

But the button code doesn't work now. If you click the button when it's enabled, it doesn't hide/show the elements.

<button id='stage1'            onclick="hide('foo');show('bar');update();">Continue</button>

Sorry if I'm not being clear. I'll have a closer look tonight.