Ad
Octobercms - CSRF Protection On A Form To Preventing Multiple Submission
I have a component with a form and then code to handle the submission. The problem is, if I spam the button it will submit the form multiple times. A solution to this would be to add a disabled state via Javascript to prevent the user from doing this.
From a security reason I do not want this to happen at all and prevent server side. I have a token and in the config I have CSRF enabled
'enableCsrfProtection' => true,
Here is my form
{{ form_open({ request: 'onSubmit' }) }}
<div class="form-group">
<label class="control-label" for="subject_name">Subject's name</label>
<input id="subject_name" name="subject_name" type="text" placeholder="" class="form-control input-md" required="">
</div>
<div class="form-group">
<label class="control-label">Postcode</label>
<input id="postcode" name="postcode" class="form-control input-md" type="text" required>
</div>
<div class="form-group">
<button id="submit" type="submit" value="submit" class="btn btn-lg btn-gold pull-right"><i class="fa fa-lock"></i> Request Job</button>
</div>
</form>
and in the generated html
Handler/ Session / Token
<input name="_handler" type="hidden" value="onSubmit">
<input name="_session_key" type="hidden" value="7Eg9bK4pcT2NOgWwUS0UFUckjkSMRC1UDBkBhPwO">
<input name="_token" type="hidden" value="00nbkK3EAo2I8WGWSh85qkMjHYig6aldrd3oe8HZ">
Then in my components code
public function onSubmit()
{
$name = post('subject_name');
$postcode = post('postcode');
if (Session::token() != Input::get('_token'))
{
/* Invalid token */
return print('Token invalid');
}
$job = new Job;
$job = $job->name = $name;
$job = $job->postcode = $postcode;
$job->save();
}
Yet I spam the submit button and it will execute multiple times. How can I add the ability to only execute once?
Ad
Answer
What you need is a loader
https://octobercms.com/docs/ui/loader
<div class="loading-indicator-container">
<button id="submit" type="submit" value="submit" data-load-indicator="Saving..." class="btn btn-lg btn-gold pull-right"><i class="fa fa-lock"></i> Request Job</button>
</div>
Ad
source: stackoverflow.com
Related Questions
- → "failed to open stream" error when executing "migrate:make"
- → October CMS Plugin Routes.php not registering
- → OctoberCMS Migrate Table
- → OctoberCMS Rain User plugin not working or redirecting
- → October CMS Custom Mail Layout
- → October CMS - How to correctly route
- → October CMS create a multi select Form field
- → October CMS - Conditionally Load a Different Page
- → How to disable assets combining on development in OctoberCMS
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → OctoberCms component: How to display all ID(items) instead of sorting only one ID?
- → In OctoberCMS how do you find the hint path?
- → How to register middlewares in OctoberCMS plugin?
Ad