Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Parsing Pasted Text with Jquery (no server side processing)

    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:

    Code:
    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)

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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.


    Code:
    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:


    Code:
    $("#textareaid").bind('paste',function(){
    getuserdata();
    });
    Last edited by DanInMa; 11-26-2012 at 06:25 AM.

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    corrections: http://jsfiddle.net/hc8kL/29/


    Code:
    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();
    });
    });

  • #4
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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).

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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?

  • #6
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    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
    Code:
    onkeyup="checktext()"
    is there a better way of doing this?
    Last edited by jquerynewbie; 12-03-2012 at 07:32 PM.

  • #7
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    @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/

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

  • #8
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts

  • #9
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Code:
    <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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •