I have a multiple pages form where people can press next and previous. The form validates when trying to click next but it also validates when they click previous, which shouldn't be the case.
I've searched on Google and used some solutions provided by different websites such as class="cancel" or formnovalidate="formnovalidate" but nothing has worked for me so far.
These are my two buttons who are both in a form
<button data-role="prevbutton" class="btn btn-secondary pull-left">Previous</button>
<button data-role="nextbutton" class="btn btn-primary">Next</button>
There is no simple JS code that calls a function but more like this:
flow.isBelgianResidentChangeHandler = function(isBelgianResident) {
if (isBelgianResident) {
$('[data-role="nextbutton"]').attr('disabled', false);
} else {
$('[data-role="nextbutton"]').attr('disabled', true);
} };
It's hard to know without seeing your JavaScript code, but it could be because the default behavior of button elements in a form are to be submit buttons. So, whichever button you pressed, it would still submit your form. If this is the problem, then adding type="button" to your previous button will fix it.
<button data-role="prevbutton" type="button" class="btn btn-secondary pull-left">Previous</button>
Related
I'm just beginner to Angular and I have got the following query.
I've used angular2-ladda for button loading, I want to keep button disabled when view loads, what I did is as follow,
<button [ladda]="isLoading" data-color="mint" data-size="s" class="btn btn-success add-product" disabled="disabled">Add</button>
about the first question I've used attribute disabled to disable button but it is not working, and the second it overwrites class btn btn-success.
for solution what i did is, I've disabled button from JS and the btn btn-success style applied by css.
is there any way to solve this, if yes please let me know.
To disable the button use [disabled] property.
<button [ladda]="isLoading" data-color="mint" data-size="s" class="btn btn-success add-product" [disabled]="disabled">Add</button>
I have created an internal back button which redirects the user to the page which they were at previously. However, when the user performs a click action on the browser back button it redirects to the "New Tab" page built into Google Chrome rather than redirecting the user to the previous page. How would one repair this issue?
Button Element:
<input type="button" id="btnback" class="btn btn-blue btn-xs pull-left" value="Back" onclick="onClickBack()" />
JavaScript:
function onClickBack() {
window.location.replace("frontscreensnomedload.jsp");
}
To solve this you want the navigation to be recorded in the history, or Google Chrome can't "figure out" where to go. To solve this simply use location.assign(); , meaning your code should look like this:
function onClickBack() {
window.location.assign("frontscreensnomedload.jsp");
}
This code will record the change in the browser history.
In addition I recommend simplifying your code like this:
<input type="button" id="btnback" class="btn btn-blue btn-xs pull-left" value="Back" onclick="window.location.assign("frontscreensnomedload.jsp")" />
Your function is only one line, so it means that it is much more efficient to simply declare it in the button.
I have a problem in firefox, where I'm trying to get a form submission button to display "loading" when a person clicks on it (to prevent multiple submissions of a user clicking it two/three times due to a slow site).
I have this jquery code:
$(document).ready(function(){
$('.submitButton').click(function() {
document.aform.submit();
$('.buttonSpan').html('<button class="btn btn-primary disabled">Loading...</button>');
});
});
Chrome executes it correctly, but Firefox only changes the HTML in the span surrounding but doesn't submit the form. Firefox submits when i click the button twice. If I remove the line of the .html() changing, it also submits with no problem.
Here is the form code for reference:
<form name="aform" action="index.php" enctype="multipart/form-data" method="post">
...form data
<span class="buttonSpan">
<button class="btn btn-primary submitButton" name="submit"/>Submit</button>
</span>
</form>
Does firefox put precedence on html changes and ignore everything else? Again, this works fine in Chrome, but firefox is really killing me!
Thanks!
In most cases it is better to use the submit event on the form instead of the click event of the submit button. (what if you submit the form by pressing the enter button?)
$(function(){
$('form[name=aform]').submit(function() {
$('.buttonSpan', this).html('<button class="btn btn-primary disabled">Loading...</button>');
});
});
When using this, you will need to fixed the html of your submit button as I have stated below.
Otherwise I suggest finding the form relative to the submit button:
$(function(){
$('.submitButton').click(function() {
$(this).closest("form").submit()
.find('.buttonSpan').html('<button class="btn btn-primary disabled">Loading...</button>');
});
});
Also the proper way of defining your submit button is like this:
<input type="submit" class="btn btn-primary submitButton" value="Submit" name="submit"/>
Works for me, but removing a button from the document during its click handler seems likely to cause inconsistent behaviour: does the default action of submitting the form apply to the form that owned it at click-time, or at the post-click-event-time the default action fires (no form)?
Avoid this ambiguity - don't destroy the button by replacing it with new markup. Instead, alter it:
<button type="submit" class="btn btn-primary submitButton" name="submit">Submit</button>
$('.submitButton').click(function() {
$(this).text('Loading...');
$(this).removeClass('submitButton');
$(this).addClass('disabled');
});
Note that (a) you don't need to call form.submit() because that's the default action for a submit-button anyway; (b) as Munter said, document.namedElement is bad form, (c) as d_inevitable said, hooking form.onsubmit is almost always a better thing to do than button.onclick - though maybe not here if you are specifically only worried about mouse clicks.
Accessing dom elements by name like you do in document.aform is not recommended.
Since you already have the button inside the form you should use the buttons .form property.
so something like
button.onclick = function () {
this.form.submit();
}
try this:
$(document).ready(function(){
$('.submitButton').click(function() {
$('.buttonSpan').html('<button class="btn btn-primary disabled">Loading...</button>');
$('form').submit();
});
});
Here is a working example : tested on FF http://jsfiddle.net/JV68U/
Can someone tell me why this is not working:
<button class="btn danger" id="delete" onclick="return $(location).attr('href','http://yahoo.com');">Delete</button>
I have this placed in a form just beside the submit button. When it's clicked, it's like I clicked the submit button.
If you're trying to make the button load that URL, the correct way to do it is:
<button class="btn danger" id="delete" onclick="document.location.href = 'http://yahoo.com'">
I don't think wrapping it in jQuery helps much here since location isn't a DOM object.
Use the window.location property. See comment below.
I'd like two submit buttons on a form i have my team building, one above the fold, and one below. I'm getting complaints from my tech team about adding it because it requires some server side coding to make sure the user doesn't click it more than once. Apparently they have it one button, but to add that validation to two would be a problem.
Can you not just call the button the same thing, with the same ID and wouldn't the form treat it as one button?
Another option I thought would be for new button to fire a click even on the other button. Then they still have one click even for the form, but I get my two buttons. How would I write that?
Thanks,
Adma
I'm only familiar with ASP.net and C# buttons, but using C# you could wire two different buttons to the same click event handler. You could also do it client side by triggering the primary buttons click event with your secondary button. Here's a VERY simple example:
HTML
<input type="button" id="primaryButton" onclick="ExistingLogic()" />
<input type="button"
id="secondaryButton"
onclick="document.getElementById('primaryButton').click()" />
<input type="button" id="primaryButton" onclick="ExistingLogic()" />
<input type="button" id="secondaryButton"/>
$('#secondaryButton').click(function(){
$("#primaryButton").click();
})
If you want to use vanillaJS to do this... here is a generic very long way (with functions for both to be clear what is happening).
html
<input type="button" id="primaryButton" />
<input type="button" id="secondaryButton"/>
script
const primary = document.getElementById('primaryButton');
const secondary = document.getElementById('secondaryButton');
function somePrimaryAction(e){
e.preventDefault();
console.log('you clicked the primary button');
}
function someSecondaryFunction(e){
e.preventDefault();
console.log('you clicked the secondary button');
primary.click();
}
primary.addEventListener("click", somePrimaryAction, false);
secondary.addEventListener("click", someSecondaryFunction, false);
Yeezy
<button onclick="$('#button2').click()">button 1</button>
<button id="button2" onclick="doSomethingWhenClick()">button 2</button>
(((You need jQuery to run this)))