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.
Related
This question already has answers here:
Clicking a button within a form causes page refresh
(11 answers)
Closed 2 years ago.
I know, the title seems to lead to a repetitive/useless question, but I can't find a solution in other questions. Let me explain better and read what follows before closing my question.
I created a form by learning from different sources. It all seems to work fine, until I have to click on submit button, with "Save as TXT" written on it. It happens quite a strange thing:
if I click on the text "Save as TXT" inside the button, it submits my data correctly;
if I click on the coloured part around the text "Save as TXT" of the button, it refreshes the page.
I think I found why this happens, but I can't fix it. It seems to be something which has to do with both my HTML code and my JavaScript code. Here it is a part of it:
Javascript
$(function(){
$("#submitLink").click(function(event){
// things to do on submit...
});
});
HTML
<form method="post" name="myForm" action="" id="formToSave">
<!-- some fields to compile... -->
<div class="input-group mb-3">
<button class="btn btn-primary btn-lg" id="align" type="submit">Save as TXT</button>
</div>
</form>
How can I change this part of the code in order to submit successfully by clicking anywhere on the button (and do what I write in the JS function)?
Thanks in advance,
happy coding everyone!
ps. I read this "famous" question you added by after closing my question, but it is not helping me. By writing type="button" instead of type="submit" I get no results, I'm sorry
if I click on the text "Save as TXT" inside the button, it submits my data correctly;
When you click on the text itself, you are clicking the <a> element, and therefore triggering its event listener.
if I click on the coloured part around the text "Save as TXT" of the button, it refreshes the page.
When you click on any part of the button, are triggering the <button>'s event listener.
Therefore, I suggest
So it seems like the solution is to taking the <a> element's event listener and attaching it to the <button>.
One way to do this is to replace
<button class="btn btn-primary btn-lg" id="align" type="submit">Save as TXT</button>
with
<button class="btn btn-primary btn-lg" id="align" onclick="{Save as TXT}" type="button">Save as TXT</button>
where "{Save as TXT}" was the code you previously had in the <a>'s href.
The reason you need to add type="button" is so you can disable the button's default behavior submitting the form (and therefore refreshing the page).
Then, since you got rid of the <a> tag, you need to attach any listeners that used to listen for clicks on the <a> tag to the <button> instead.
To do this, replace:
$("#submitLink").click(function(event){
// things to do on submit...
});
with
$("#align").click(function(event){
// things to do on submit...
});
See it in action:
<form method="post" name="myForm" action="" id="formToSave">
<!-- some fields to compile... -->
<div class="input-group mb-3">
<button class="btn btn-primary btn-lg" id="align" onclick="console.log('Submitted')" type="button">Save as TXT</button>
</div>
</form>
You need for the BUTTON type 'button' but you had 'submit'. So it wants to submit the form which follows in a reloading, with button the action is needed to be done from you.
The A-tag is not needed so I deleted it. On the contrary if clicked at the corners anything happened, now this functions
<button type="button" id='btn'>Save as TXT</button>
Just test it.
$(function(){
$("#btn").click(function(event){
console.log('Submit');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" name="myForm" action="" id="formToSave">
<div class="input-group mb-3">
<button class="btn btn-primary btn-lg" id="btn" type="button">Save as TXT</button>
</div>
</form>
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'm using xeditable angular directive.Could you tell me how to show the save button after the form's submit ? At this moment when we click the saveit goes to the Edit mode.That is the default behaviour.So I need to override it.That is I need to stop it and show the save button.Thanks in advance.
JSFiddle
<form editable-form name="tableform" onaftersave="saveTable()">
//Ui code here
<button type="submit" ng-disabled="tableform.$waiting" class="btn btn-primary">save</button>
</form>
UPDATE
Actually my use case is where I need to show the spinner until finish the form's submit.After that I'll close the whole form (this is a modal popup on my app).That's why I need to stay on that page.I'm going to show the spinner on top of the Save button.
In your code submit is on form level not at row level.
So, you have pass your validation which is checkName() function in your case (you can try by commenting it), then only it will call saveTable() function.
Or you can put your saveTable() in row level.
Your save button is inside a conditional tag that is only displayed on edit mode.
You may append it into the .btn-edit like:
<div class="btn-edit">
<button type="button" class="btn btn-default" ng-show="!tableform.$visible" ng-click="tableform.$show()">edit</button>
<button type="submit" ng-show="!tableform.$visible" ng-disabled="tableform.$invalid" class="btn btn-primary">save overall</button>
</div>
Take a look that using the form controller you may check if the entire form is valid or not
JSFiddle
When I attempt to call a function my this page using the below code. I just seems to refresh the page and not call the script.
<form role="search" name="locationForm">
<div class="form-group">
<input id="locationInput" type="text" class="form-control" placeholder="Search">
</div>
<button class="btn btn-primary btn-lg" type="submit" onclick="start();">Submit</button>
</form>
If I add a '#' to the end of the url, reload the page, then the onlcick event works as it is suppose to.
As far as I knew these were Anchor tags and I have no idea why they would be required in the calling of a function.
How do I correct this? As I don't want to have to use the #.
You are using a button element, whose default behavior, when clicked, submits its parent form. return false will stop the form from submitting:
<button class="btn btn-primary btn-lg" type="submit" onclick="start(); return false;">Submit</button>
If you don't want the button to automatically submit, you could change its type to button. Then, all it will do is run its onclick code. (You can still have that code submit the form manually)
I suppose you want to run the start() function when you submit the form?
You said you're working with an click event listener.
Try to listen for the submit event, instead.
$('#your_form_id').on('submit', function(e) {
e.preventDefault();
your script...
});
The code above basically does this.
Furthermore, the preventDefault keeps the form from actually submitting itself.
You could access the form data with
$('#your_form_id').serialize();
I hope this pushes you into the right direction!
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/