Search code examples
javascriptphpformsclipboardcopy-paste

Paste from clipboard multiple lines of text into multiple lines in PHP form


I am trying to find a way to paste items from the clipbaord into a php form. Essietnailly not having to copy line by line into the form.

So for example if in my clipboard I have:

Sally Susaze
[email protected]
304-506-7054

And want to be able to paste that information into this form in one step:

enter image description here

What do I do? I know that is easy enough to create a button that copies contents from a form but ideally i'd like to have a button that pastes the clipboard into the form (as I said above)

This is an example of a button that copies: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard2

And here is a code snippet of the form (the image above)

if (in_array((int) $tpl['option_arr']['o_bf_include_name'], array(2,3)))
            { 
                ?>
                <p>
                    <label class="title"><?php __('lblBookingName'); ?></label>
                    <span class="inline-block">
                        <input type="text" name="c_name" id="c_name" class="pj-form-field w400<?php echo $tpl['option_arr']['o_bf_include_name'] == 3 ? ' required' : NULL; ?>" />
                    </span>
                </p>
                <?php
            }
            if (in_array((int) $tpl['option_arr']['o_bf_include_email'], array(2,3)))
            {
                ?>
                <p>
                    <label class="title"><?php __('lblBookingEmail'); ?></label>
                    <span class="inline-block">
                        <input type="text" name="c_email" id="c_email" class="pj-form-field w400<?php echo $tpl['option_arr']['o_bf_include_email'] == 3 ? ' required' : NULL; ?>" />
                    </span>
                </p>
                <?php
            }
            if (in_array((int) $tpl['option_arr']['o_bf_include_phone'], array(2,3)))
            { 
                ?>
                <p>
                    <label class="title"><?php __('lblBookingPhone'); ?></label>
                    <span class="inline-block">
                        <input type="text" name="c_phone" id="c_phone" class="pj-form-field w400<?php echo $tpl['option_arr']['o_bf_include_phone'] == 3 ? ' required' : NULL; ?>" />
                    </span>
                </p>
                <?php
            }
            if (in_array((int) $tpl['option_arr']['o_bf_include_notes'], array(2,3)))
            { 
                ?>
                <p>
                    <label class="title"><?php __('lblBookingNotes'); ?></label>
                    <span class="inline-block">
                        <textarea name="c_notes" id="c_notes" class="pj-form-field w500 h120<?php echo $tpl['option_arr']['o_bf_include_notes'] == 3 ? ' required' : NULL; ?>"></textarea>
                    </span>
                </p>
                <?php
            }

Thanks!


Solution

  • To get the string from the clipboard, check out this article.

    Then: you'll need to find some way to determine which parts of the copied value go into which form. I think splitting on a newline would work for the example above, but what if they're in a different order? To check for that you will probably need a regex.

    Then, since each input has an id, you can select that element and change its value. A possible solution:

    let infoArray = string.split('\n') 
    document.getElementById('c_name').value = infoArray[0]