There’s a form on a website that I fill in regularly but it’s quite time consuming so I wanted to write some code to enter some of the data automatically via JavaScript. I’ve hit a problem with the first form input because the developer has somehow disabled pasting but I’m not sure how. Here is the HTML of the form.
<form method="post" id="entry_form" action="/enter-casual-record" enctype="multipart/form-data" novalidate="novalidate">
<input id="auth_token" name="auth_token" type="hidden" class="hidden" value="">
<input id="nonce" name="nonce" type="hidden" class="hidden" value="">
<input type="hidden" id="website_id" name="website_id" value="23">
<input type="hidden" id="survey_id" name="survey_id" value="42">
<input type="hidden" id="occurrence:record_status" name="occurrence:record_status" value="C">
<input type="hidden" name="smpAttr:36" value="">
<input type="hidden" name="smpAttr:58" value="">
<input type="hidden" name="smpAttr:8" value="">
<input type="hidden" name="smpAttr:21" value="">
<input type="hidden" name="smpAttr:22" value="">
<div id="controls">
<div id="tab-misc">
<div class="row">
<div class="col-md-6">
<div id="ctrl-wrap-sample-date" class="form-group ctrl-wrap not-full-width-sm">
<label for="sample:date">Date:</label>
<div class="input-group">
<input type="text" placeholder="dd/mm/yyyy" class="control-width-4 date-text form-control {required:true, indiciaDate:true}" id="sample:date" name="sample:date" value="" style="display: none">
<input type="date" placeholder="dd/mm/yyyy" max="2024-03-27" class="precise-date-picker form-control" id="sample:date:date" style="animation-name: none !important;">
<div class="input-group-addon ctrl-addons">
<span id="sample:date_lock" class="unlocked-icon" title="Click here to lock the control's current value so that it is reused the next time you input data using this form." alt="Click here to lock the control's current value so that it is reused the next time you input data using this form."> </span>
<span class="deh-required">*</span>
</div>
</div>
<p class="helpText">Select the date of the record.</p>
</div>
</div>
</div>
</div>
</div>
The input is a date picker but you can type directly into it if you prefer. Here’s a shot of the page code from the browser console (Firefox).
It has an ID and two classes and the console shows some JavaScript attached to it, three scripts in fact. I’ve searched through the JavaScript on the page separately and can’t find any attached to the ID. I think the hook for the scripts is the class precise-date-picker as form control is the class of another input that I can paste into.
The three scripts are:
I’m sure it must be JavaScript causing this but I can’t see anything obvious in the scripts and I’ve not been able to confirm it. I’m sure you used to be able to disable JavaScript in the web developer’s toolbar but that doesn’t seem possible anymore.
I really don’t know why developers do this as it’s a pain and I’m sure it doesn’t help accessibility.
OK so, I’ve tried pasting directly, typing the value into another input and then dragging it into the date picker, I’ve installed the “don’t fuck with paste” extension, I’ve even tried adding contenteditable=”true” to the input in the console but nothing worked. How do I get around this? Is there a way, in jQuery or something, to fool the input into thinking the text is coming from the keyboard instead of the clipboard? The only thing I’ve found that works so far is creating an entry in “KeePass” password manager to auto-fill the input but that’s not much use.
I really don’t know what this page is doing behind the scenes as records are entered so I want to use as light a hand as possible, as if the user were just typing in the values, I don’t want to use “brute force”.
I should add that I’m just a hobbyist so my JavaScript is fairly basic. I can usually cobble together a script that works… eventually but I haven’t done much coding lately so I’m a bit rusty.
Oh the website in question is built using Drupal and Bootstrap if that helps.