Level 122
I can't follow the logic. Why toggle class?
Why check for class SeeMore2 since you already applied that? It should always be true
Why not just on click, change the text?
Is there some code that is not showing up in the forum?
Nov 9, 2015
7
Level 8
Problems with changing button text when clicked
Hi!
I am trying to get the text in a button to change text when a user clicks on it, to indicate that the click has been registered. I am using this code to get signatures on an iPad. If a customer presses the button with no signature, it gives an error to the user, and this code executes. But when a user has signed the form and presses submit, the code is not executed. Why is this?
Here is the code:
<div class="panel-body">
<center>
<p><strong>I confirm conditions.</strong></p></br>
{!! Form::open(array('action' => 'SignatureController@store', 'class' => 'sigPad', 'files' => 'true')) !!}
<ul class="sigNav">
<li class="clearButton"><a href="#clear">Clear signature</a></li>
</ul>
<div class="sig sigWrapper">
<!-- <div class="typed"></div> -->
<canvas class="pad" width="795" height="245"></canvas>
<input type="hidden" name="output" class="output">
</div>
<button type="submit" class="btn btn-primary btn-lg SeeMore2 m-b-5 m-t-10">Confirm</button>
{!! Form::close() !!}
</center>
</div>
The JS:
<script>
$(document).ready(function() {
var options = {
bgColour : '#fff'
, drawOnly : true
, lineTop : 200
, errorMessageDraw : 'Please sign.'
};
$('.sigPad').signaturePad(options);
});
</script>
<script>
$('.SeeMore2').click(function(){
var $this = $(this);
$this.toggleClass('SeeMore');
if($this.hasClass('.SeeMore2')){
$this.text('Confirm');
} else {
$this.text('Please wait...');
}
});
</script>
So, it works when the user has not signed, and the page is not sending a request, but when the user has signed and the request is being sent, the text does not change.
Level 8
This is code just found on the internet and added to my existing code. I'm not very good with JavaScript, so I'm not sure what should be there or not.
I tried using onClick, but when I used value="Confirm" instead of confirm being between Confirm the change did not happen.
The way the code is written, it works great when the signature script gives an error when there is no signature and the page is not sending the request. But when the signature is present and the request is being sent, the button has some sort of "pressed" state, but there is no js executed. This is the problem I am struggling with.
Level 8
Its like the whole page "freezes" when a user clicks submit and the form starts the request. Is this common with all JavaScripts?
Level 122
I would get it working as a regular form on your machine (minus the signature) first, since you can debug there.
Level 8
Okey, I have now tested this with no signature, and the problem is the same. After I submit nothing happens to the form. If I go back in my browser the button has changed to disabled and the text "please wait" has appeared.
So for me it seems that the JavaScript is unable to run when the form is submitting. Anyone have a clue? :)
Level 8
I got it to work by setting a delay of 1000 to the form submit. This way the page has time to update the button. My problem now is that I dont know how I can write a conditional for only running this delay if the signature script is not returning validation error.
Here is the updated code:
<script>
$(document).ready(function() {
var options = {
bgColour : '#fff'
, drawOnly : true
, lineTop : 200
, errorMessageDraw : 'Vennligst signer i feltet under.'
};
$('.sigPad').signaturePad(options);
});
</script>
<script>
$('form').submit(function (e) {
var form = this;
e.preventDefault();
setTimeout(function () {
form.submit();
}, 1000); // in milliseconds
});
</script>
<script>
$('.SeeMore2').click(function(){
var $this = $(this);
$this.toggleClass('SeeMore');
if($this.hasClass('.SeeMore2')){
$this.text('Bekreft og godta vilkår');
} else {
$this.text('Vennligst vent...');
}
});
</script>
Level 122
This makes no sense? You want to wait showing the next page so that the user has chance to see that you have changed the button? Do you have form validation? You should work out how to handle form errors so that you can see what is coming back. Its probably throwing a csrf token error.
Access the route in Chrome or Firefox on your PC and monitor the network traffic. You can see what was sent and what came back.
Please or to participate in this conversation.