This has never happened to me before but I have this form and when I click on the button, it does not do anything, as if I clicked a <button type="button"></button> element, this is just happening in Safari because in other browsers it works correctly (some code is rendered server side, I'm using Laravel):
<form method="post" action="{{ route('checkout.realizar.compra') }}" id="form-compra-tarjeta">
#csrf
<input type="hidden" value="Tarjeta" name="tipo">
<div class="button yellow"><button type="submit" class="btn-confirmar">Confirmar pago</button></div>
</form>
I don't know if this has anything to do but I have other forms inside my view, but they are not nested, each one of them are in separate places. If I inspect the element there's nothing to be seen, neither inside the network tab, it does not try to even go to the action url.
I have also this javascript (with jQuery) code that just disables the button and changes the text when the button is clicked, though I don't think it has something to do with it.
$('.btn-confirmar').on('click', function(e){
$(this).attr('disabled', true);
$(this).html('Realizando compra... <i class="fas fa-spin fa-circle-notch"></i>');
});
Turns out that the jQuery code actually had something to do with this, I changed it by the following and now it works:
$('#form-compra-tarjeta').on('submit', function(e){
$('.btn-confirmar').attr('disabled', true);
$('.btn-confirmar').html('Realizando compra... <i class="fas fa-spin fa-circle-notch"></i>');
});
But, why...? If someone can explain so I can add it to the answer...
Related
I am new here, so maybe you need to give me some hints about how everything works in this community. I was already reading a lot here on Stackoverflow but finally signed up.
I am designing a small website for a museum near me which is a non-profit organization. They have a huge collection of ammunition and the information is currently available on paper.
I want a website where I can enter a number and the appropiate information is shown. Everything works so far in my test site. (since no internet available there, it should run locally on a android tablet later)
The only problem I have is that the form submit works with the button, but not with the enter key or "open" key on the androids numberpad.
I am also quite new to javascript-coding since I come from electronics and c-programming on microprocessors, so I may have made mistake.
i currently have the iframe in the main page, but i originally wanted it to open up in a modal. It did not work properly, so maybe I may try that later again.
Live demo here: museum.smallfilms.ch/drei
The code for the form is the following:
<!-- Jumbotron Header -->
<header class="jumbotron hero-spacer">
<h1>Katalog:</h1>
<p>Mit der Munitionsnummer können hier weitere Informationen zur jeweiligen Patrone angezeigt werden.</p>
<p>
<form onsubmit="searchpage()">
<input type="number" pattern="\d*"/min="1" max="9999" id="num" >
<button type="button" class="btn btn-danger" onclick="searchpage()" id="search">Suchen</button>
</form>
The Javascript code is the following:
function searchpage() {
var num = document.getElementById('num');
var targetFrame = document.getElementById('targetFrame');
if (num.value) {
var page = 'pages/' + (+num.value) + '.html';
targetFrame.setAttribute('src', page);
}
}
If you need more code I can deliver this. Just let me know that you need.
The site is now designed to show something for the numbers 1 and 2.
The whole site uses bootstrap and the sites displayed in the iframe use strapdown.js for easier editing. (We need to digitalize about 900 datasets in the end)
I think it is only a small mistake somewhere but after hours of coding and searching the internet i still did not get the source of the error.
Thanks in advance for any help and hint.
Dabbax
Edit: if it helps, i packed the whole page into a zip... museum.smallfilms.ch/drei/drei.zip
I think that the error comes from the line where you are calling the function searchPage(). I would recommend you to try the line below :
<input type="sumbit" class="btn btn-danger" onclick="searchpage()" id="search" value="Suchen">
In this case, when you press enter, the form will be submitted and call the searchPage function.
On your code for the form, try:
<button type="submit" class="btn btn-danger" onclick="searchpage()" id="search"> Suchen </button>
edit: Shaam's answer can be correct but if you say input then you just trying to make it a look like button with bootstrap, a more proper approach would be input type="button" but in your case you should say that this is a button that submit the form.
That's why you should use button and not input here.
This could be your html:
<form id="searchForm" action="some_url">
<input type="number" pattern="\d*"/min="1" max="9999" id="num" >
<input type="button" value="Suchen" class="btn btn-danger entr" onclick="searchpage()" id="search">
</form>
Now add an event listener to the class entr and submit the form if the key is Enter. So the event listener in jquery like
$('.entr').keypress(function(event) {
if (event.which == 13) { // this is the enter key code
document.getElementById('searchForm').submit();
}
});
I've a button called "Add new usage", basically, when user clicks it, it'll display the form, a pretty simple behavior, but I don't understand how it always triggers the action in the form underneath it, I'm very confused, here's my code:
<div class="row">
<p style="padding-left: 0.5cm;">
<button id="create_new_spa" class="btn btn-small btn-primary"
onclick="javascript:show_create_new_usage_form();" type='submit'
onclick="this.disabled=true">
Add new usage
</button>
</p>
</div>
<div class="row" id="create_new_usage_form" style="display:none">
<form method="post" action="/purchasing/item_info_spa_details_update/">
</form>
</div>
And here's my js code:
{% block jquery2 %}
function show_create_new_usage_form() {
$("#create_new_usage_form").show();
}{% endblock %}
So, I was expecting to click the "Add new usage" button, then the form shows up, however, now it displays form instantly, and following that, instantly within in like 20 ms, it quickly goes to action in the form, doesn't allow the user to see the form, and then quickly hides the form again.
I cannot see anything wrong with the code, please help!
Thanks a lot!
EDIT This answer is not correct. I leave it here for the insight from the comments below.
the following original statement is not correct see comments below:
The show() function of jquery is used to reveal an element for a given time (default 400ms).
See documentation here:
http://api.jquery.com/show/
You could e.g. use:
.css( "display", "inline" )
to show the form on click and then hide it with a dedicated function that is called via action.
I am working on an asp.net application where I have button written like this:-
<button onclick='javascript:imagech(this);' class='close_product color_dark tr_hover'><i class='fa fa-times'></i></button>
I have also a client-side javascript function for the above button:
<script type="text/javascript">
function imagech() {
alert('image clicked.');
}
</script>
What I want that is whenever I click that function then the button click event should not fire page-load. The above object is not server control but it's event occurs page-load. I can also use another html control like this:
<input type='button' onclick='javascript:cartclicked(this);' value='X' class='close_product color_dark tr_hover' />
and this does not occurs page-load but I want icon also used as :
<i class='fa fa-times'></i>
inside <button> tag. but the <i> tag is not used in <input> tag. How I can <button> tag event without any page-load? Please help me someone here.
it seems you are using <button> inside a <form> element. By default a button acts as a submit button and it tries to submit your form on click.
In order to continue using button and avoid this issue you need to specify type as button as shown below
<button type="button" onclick='javascript:imagech(this);' class='close_product color_dark tr_hover'><i class='fa fa-times'></i></button>
If I understand you correctly the problem is that the button is inside a form (The main asp.net form) and the click event post the form to the server. That's why you the page load occurred.
The solution Just add to the button (it doesn't matter if you are using input or button) attribute type="button".
I'm using Ladda UI for bootstrap.
Using jquery I try to disable a button after the user clicks on it.
I tried to use ajax OnComplete / OnSuccess / OnBegin , but no avail - the button remains enabled.
If I change the markup manually on firebug - I can disable it. Also note the js fires for sure.
Here's the markup:
<a id="icalSync" href="/iCal/iCalCreatedLinks" data-ajax-method="GET" data-ajax-complete="AjaxOnCompleteDisableButton" data-ajax="true" data-style="expand-left" class="btn ladda-button">
<span class="ladda-label">Sync iCal</span>
<span class="ladda-spinner"></span>
</a>
Here's the js function:
function AjaxOnCompleteDisableButton() {
$("#icalSync").attr("disabled", true);
}
I'd appreciate any help on this.
disable is not valid with anchor tags, so you could try this:
function AjaxOnCompleteDisableButton() {
event.preventDefault();
}
or change your could your a#icalSync to a button and use your code
<button id="icalSync" href="/iCal/iCalCreatedLinks" data-ajax-method="GET" data-ajax-complete="AjaxOnCompleteDisableButton" data-ajax="true" data-style="expand-left" class="btn ladda-button">
<span class="ladda-label">Sync iCal</span>
<span class="ladda-spinner"></span>
</button>
or you could add the class disabled, used in bootstrap:
function AjaxOnCompleteDisableButton() { $("#icalSync").addClass("disabled"); }
Your "button" is not truly a button. You need to approach it differently. Either make it a <button> or in AjaxOnCompleteDisableButton assign it a class that will make it look like it's disabled (say opacity: 0.5) and ignore the triggering events on it.
I am trying to figure out how to make this HTML submit button work correctly. Below is the code for the submit button:
<form action ="itms-services://?action=download-manifest&url=https://icustomer.apsresource.com/ipad_apps/survey/user/APSSurvey.plist">
<button type="submit" name="Download" value="download" onclick="JavaScript:alert('You will be downloading the APS Resource iPAD PRODUCT SURVEY.')" style="width:255px; height:310px; -webkit-appearance: none; -webkit-border-radius:0px;">
<img src="apple.png" />
</button>
</form>
When the button is clicked, it is supposed to open up the URL in the "action" part in the form tag. However, all I get is the JS pop-up, but no URL is opened (looking at the console, a GET function is triggered, then instantly canceled). IS there something I need to add/remove in order for this to work?
Submit the form with the onclick event
onclick="alert('You will be downloading the APS Resource iPAD PRODUCT SURVEY.');this.form.submit();"
You don't need to put the work JavaScript in your event either.
BTW, you don't really need to have this.form.submit() at all. I took your original and removed JavaScript from the onlick and changed the action and your code works fine. I'm not sure what itms-services:// is but it's not a valid HTTP protocol like http:// or https://.
Here's a jsfiddle illustrating this.