Develop Reference

HTML Form Not Submitting on Safari and iOS Safari

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...

Click button in webpage with Javascript

Currently, I'm doing an application and I need login to this one particular website. Basically, I need to make this button click using a javascript but I have no idea how to.
This is the button code I retrieved from the website:
<button type="submit" class="uk-width-1-1 uk-button uk-button-primary uk-button-large">Sign in</button>
Thank you for your help in advance

You can click on the button programmatically, in case of pure javascript :
(function(){document.querySelector('button[type="submit"]').click();})()
In case of Android JS Interface :
webView.loadUrl("javascript:(function(){"+
"l=document.querySelector('button[type=\"submit\"]');"+
"e=document.createEvent('HTMLEvents');"+
"e.initEvent('click',true,true);"+
"l.dispatchEvent(e);"+
"})()");

The general way to have button click events is to use something like jQuery. For example lets set the button to have an ID
<button id="my-button" type="submit" class="uk-width-1-1 uk-button uk-button primary uk-button-large">Sign in</button>
Then we would apply a click event to it with jQuery
$('#my-button').click(function(){alert('button has been clicked');})
Instead of the alert you could put whatever code you want in there :D
Example: Codepen example
EDIT: Example for a class:
Example for a class
(Note that we use a "." instead of "#" in the call)
-Kyle

Bootstrap Confirmation: Detect open and close states?

I am trying to detect when the bootstrap confirmation is opened and closed but I am having no luck with detecting this. I am using an <a> tag to trigger the confirmation (code down below), and trying to detect this is jquery.
<a class="delete" data-toggle="confirmation" title="" data-original-title="Delete Row?">
<i class="fa fa-trash-o"></i>
</a>
I originally tried to detect the button click but failed in doing so. It would be better if the confirmation is able to trigger a function once opened and closed.

You may you "data-on-confirm" and "data-on-cancel" attributes to register your callbacks for those particular events.These are given in the documentation provided by the bootstrap confirmation plugin.
Eg
<button class="btn btn-default" data-toggle="confirmation" data-singleton="true" data-on-confirm="myAcceptFunction" data-on-cancel="myRejectFunction">Confirmation 1</button>

Use events, e.g.:
var modalIsShown = false;
$('#myModal').on('shown.bs.modal', function () {
modalIsShown = true;
});
$('#myModal').on('hidden.bs.modal', function () {
modalIsShown = false;
});
http://getbootstrap.com/javascript/#modals-events

I ended up finding my answer thanks to the other answers getting me there. The code simply looks at the trigger button which in my case has a class name of delete and then looks for a <div> with the class name popover to see if it is visible or not.
if ($(".delete").next('div.popover:visible').length){
//do something
}

How to create button event occurs without page load?

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".

Why is HTML 5 validation triggering when I run Jquery function

I have a button that triggers the below jquery function. Currently the function works and hides/shows the form element as desired. However it is tripping the html 5 validation (which I want on submit). Is there a reason it is triggering and a way I can prevent this? I experimented with having a return at the end of the function but no luck. Also neither form is required as part of the validation. I keep getting a pop up telling me previous items are required when I hide/show the form elements..
<button class="col-sm-2 btn btn-success" onclick ="hideFormField ()">Hide</button>
function hideFormField (){
if(!$("#trail").is(":visible"))
{
$("#trail").show();
$("#blazers").hide();
}else{
$("#trail").hide();
$("#blazers").show();
}
}

Try this:
<button class="col-sm-2 btn btn-success" onclick ="hideFormField ();return false;">Hide</button>

Try:
<button class="col-sm-2 btn btn-success" onclick="hideFormField();event.preventDefault();">Hide</button>

Jonathan Lonowski was correct in his comment. Buttons are submit-type by default so you need to explicitly define a button with type="button" attribute if you don't want any additional effects when the button is clicked.
A small example that illustrate the activation of HTML5 form validation through default button behavior is in this jsfiddle: http://jsfiddle.net/zk3jr9vn/

by default button is submit type so add Type to button
like
<button type="button" class="col-sm-2 btn btn-success" onclick ="hideFormField ()">Hide</button>