We Keep Coding

jQuery .submit() is submitting form in new tab once but not submitting second time

I am creating a form and I have to submit it using jQuery and I am using jQuery v1.12.4. The web application I am working on is using lots of other scripts other than jQuery. Following is my html code
<form enctype="multipart/form-data" id="report-form" method="post">
<!-- date range picker with start date and end -->
<div class="input-group date-picker input-daterange" data-date="2012-12-21T15:25:00Z" data-date-format="yyyy-mm-dd">
<input type="text" class="form-control" name="startDate" id="from" value="2019-09-30" readonly="">
<span class="input-group-addon"> to </span>
<input type="text" class="form-control" name="endDate" id="to" value="2019-09-30" readonly="">
</div>
<!-- first button to submit form for first scenario -->
<a href="javascript:void(0);" class="singleReport" data-type="html">
<i class="fa fa-eye"></i>
</a>
<!-- second button to submit form for second scenario -->
<a href="javascript:void(0);" class="singleReport" data-type="pdf">
<i class="fa fa-file-pdf-o"></i>
</a>
<!-- third button to submit form for third scenario -->
<a href="javascript:void(0);" class="singleReport" data-type="excel">
<i class="fa fa-file-excel-o"></i>
</a>
</form>
I have some other input fields in the form also. Following is my jQuery code to submit form on click of any of the links in above code
$(document).on('click','.singleReport', function(e){
e.preventDefault();
var from = $('#from').val();
var to = $('#to').val();
if(from == '') {
alert('Select from date!');
}
else if(to == '') {
alert('Select to date!');
}
else{
if($(this).attr('data-type') == 'html')
{
$('#report-form').attr('action', '/html');
$('#report-form').attr('target', '_blank');
$('#report-form').submit();
}
else if($(this).attr('data-type') == 'pdf')
{
$('#report-form').attr('action', '/pdf');
$('#report-form').attr('target', '_blank');
$('#report-form').submit();
}
else if($(this).attr('data-type') == 'excel')
{
$('#report-form').attr('action', '/excel');
$('#report-form').attr('target', '_blank');
$('#report-form').submit();
}
}
});
This code successfully submit the form in new tab on first click on any link but it does not submit after that if I click again on the same link or any other link. Any suggestions are appreciated.
Thanks :)

Search field issues - Doesn't submit on enter, changes url but doesn't load url

In the following code two things are happening...
When pushing enter it doesn't submit
When I manually click the icon to initiate the onclick it changes the url but doesn't load the url.
function searchKeyPress(e)
{
// look for window.event in case event isn't passed in
e = e || window.event;
if (e.keyCode == 13)
{
document.getElementById('btnSearch').click();
return false;
}
return true;
}
function onClickHandler() {
var id ="WordpressEmployeeSearch"
var employeeSearchParams = document.getElementById('EmployeeName').value;
var cityStateZip = document.getElementById('CityStateZip').value;
window.history.pushState([id], id, `/app/?attorney=${employeeSearchParams }&location=${cityStateZip}`);
}
<div class="tab-area">
<div class="tabs">
<p class="tab employee" href="#">EMPLOYEE RATINGS</p>
<p class="tab company" href="#">COMPANY RATINGS</p>
</div>
<div class="search-area">
<div class="search-bar-area" style="">
<div class="srch-bars">
<input class="home-src" id="EmployeeName" placeholder="Search by Employee's Name" />
<input class="state-zip" id="CityStateZip" placeholder="City, State, Zip" />
</div>
<div class="icon" id="btnSearch" onClick="onClickHandler()">
<i name="Search" class="fas fa-search"></i>
</div>
</div>
</div>
</div>

The entire point of pushState is that it changes the URL without loading a new page.
It is how you say "I am modifying the DOM if the current page with JavaScript. This gives the same results as if you visited this URL directly, so update the address bar and the history so back/forward/refresh still work".
If you want to navigate to a new page, then use location = "the new url".
Better yet, given the URL you are constructing, remove the JavaScript entirely and just use a regular form submission.

Validate a form element without/before submitting the form with JavaScript

I have an HTML form that has its elements displayed in various Bootstrap modals. The first modal has a text box input that and a "Next" button to open the next modal. When the "next" button is pressed. I want to check if the text box is empty, and trigger a validation message. The form does not get submitted until the very end. Everything I've tried has not worked so far.
Javascript/jQuery code
$("#add_assistant_next").click(function () {
var textInput = document.getElementById('add_assistant_user');
var text = textInput.value;
if (text === "") {
textInput.setCustomValidity('Please fill out this field.');
textInput.checkValidity();
var form = $('#form_add_assistant');
form.find(':submit').click();
} else {
textInput.setCustomValidity('');
}
});
HTML
<form name="add_assistant" method="post" id="form_add_assistant">
<div class="modal-body">
<div class="step">
<span class="fas fa-arrow-right choose-arrow mr-1"></span>1. Choose a user to add
</div>
<div class="pl-3 pt-1">
<div>
<input type="text" id="add_assistant_user" name="add_assistant[user]" required="required" placeholder="UCInetID or UCI email address" class="mr-0 form-control" />
<button type="button" id="add_assistant_next" name="add_assistant[next]" data-toggle="modal" data-target="#add-user-modal" class="btn btn-outline-secondary btn">Look up user</button>
</div>
<input type="hidden" name="user_search_route" value="/courseSpace/20900/listAssistantEnrollment">
</div>
</div>
... form continues in other modals

Your JS code is probably fighting with Bootstrap for control of that button. To get around that, and have your validation, you could try modifying your code to have a middle step / temporary button to help with validation first before actually submitting. So something like this:
Javascript/jQuery code
$("#my_temp_button").click(function () {
var textInput = document.getElementById('add_assistant_user');
var text = textInput.value;
// Might also want to handle null and undefined cases?
if (text === "" || text === undefined || text === null) {
// I'm assuming if it's empty, it doesn't pass validation,
// so we just display this warning and wait for the user to fix it:
textInput.setCustomValidity('Please fill out this field.');
} else {
// it's not empty so validate:
if (textInput.checkValidity()) {
// it passed validation, so ok to submit.
// call the real button:
$('#add_assistant_next').click();
// do you need this?
var form = $('#form_add_assistant');
form.find(':submit').click();
} else {
// it failed validation, so display another error?
textInput.setCustomValidity('Try again.');
}
}
});
HTML:
<form name="add_assistant" method="post" id="form_add_assistant">
<div class="modal-body">
<div class="step">
<span class="fas fa-arrow-right choose-arrow mr-1"></span>1. Choose a user to add
</div>
<div class="pl-3 pt-1">
<div>
<input type="text" id="add_assistant_user" name="add_assistant[user]" required="required" placeholder="UCInetID or UCI email address" class="mr-0 form-control" />
<!-- Feel free to change the id name. This is the button the user sees. It's only purpose is to give your function above full control to it and prevent Bootstrap from touching it and jumping to the next modal without having the user fix the validation failure first: -->
<button type="button" id="my_temp_button" class="btn btn-outline-secondary btn">Look up user</button>
<!-- Hide the real button from the user: -->
<div style="display:none">
<button type="button" id="add_assistant_next" name="add_assistant[next]" data-toggle="modal" data-target="#add-user-modal" class="btn btn-outline-secondary btn">Look up user</button>
</div>
</div>
<input type="hidden" name="user_search_route" value="/courseSpace/20900/listAssistantEnrollment">
</div>
</div>
...

Have you tried adding a trap for the submit event itself?
$('#form_add_assistant').submit(function(evt){
//do your validation here
if (validation fails){
return false; // OR, alternatively, `evt.preventDefault()`
}
//form submission will continue if not returned false
});
References:
https://api.jquery.com/submit/
How to conduct manual form validation via jQuery .submit()

magento form submit handler

We have a magento site that is using the WebForms2 plugin and ends up using something like the following generated code for a form:
HTML
<form action="http://example.com/magento/index.php/webforms/index/iframe" method="post" name="webform_2" id="webform_2" enctype="application/x-www-form-urlencoded" class="webforms-lg-test" target="webform_2_iframe">
<input type="hidden" name="submitWebform_2" value="1"/>
<input type="hidden" name="webform_id" value="2"/>
<div id="fieldset_0" class="fieldset fieldset-0 ">
<ul class="form-list">
<li class="fields ">
<div id="field_11" class="field type-text webforms-fields-11 webforms-fields-name">
<label id="label_field11" for="field11">Name</label>
<div class="input-box">
<input type='text' name='field[11]' id='field11' class='input text ' style='' value="" />
</div>
</div>
</li>
</ul>
</div>
<div class="buttons-set">
<p class="required">* Required Fields</p>
<button type="button" class="button" id="webform_2_submit_button" onclick="webform_2_submit()" title="submit">
<span>
<span>Submit</span>
</span>
</button>
<span class="please-wait" id="webform_2_sending_data" style="display:none;">
<img src="http://example.com/magento/skin/frontend/default/default/images/opc-ajax-loader.gif" alt="Sending..." title="Sending..." class="v-middle"/>
<span id="webform_2_progress_text">Sending...</span>
</span>
</div>
</form>
JS
var webform_2 = new VarienForm('webform_2', 0);
var webform_2_submit = function(){
var form = webform_2;
if(form.validator && form.validator.validate()){
form.submit();
$('webform_2_submit_button').hide();
$('webform_2_sending_data').show();
}
};
The tricky part is that we have an additional tool that works with all forms. Previously we just had it hook into the forms submit handler, but this particular method that Magento/WebForms uses, does not trigger the submit handler.
An example of our tool's code:
var forms = document.getElementsByTagName('form');
for(i=0; i<forms.length; i++) {
forms[i].addEventListener('submit', function() {
alert('form submitted');
}
}
We were also using a jQuery approach, but pared it down to reduce dependancies. It also did not work.
$('form').on('submit', function(e) {
alert('form submitted');
});
Question
Is there something specific in Magento that I could use with this implementation that I could hook into instead of a standard submit handler? Or a different/better way to observe a form's submit handler?

Using Prototype I was able to override the existing submit handler.
VarienForm.prototype.submit = VarienForm.prototype.submit.wrap(function($super, url) {
//-- your code can go before OR after the default form behavior
//-- include this if you want to include the previous submit behavior
$super(url);
return false;
});

Trigger jquery function on blur unless specific elements are clicked

I have a login form. When the inputs get focused the "forgotten password" and "remember me" elements get shown by adding a css class, when they blur, the elements are hidden again by removing the class "sho". I would like the elements to keep the class "show"if I click either one of them or the login link
$(document).ready(function() {
$('.login *').focus(showlogin);
$('.login *').blur(hidelogin);
});
function showlogin(){
$('.login .hidden').addClass("show");
}
function hidelogin(){
$('.login .hidden').removeClass("show");
}
Html:
<form class="login">
<input type="text"/>
<input type="password"/>
<a class="loginbutton" href="#">Log in</a>
<br />
<a class="hidden" href="#">Forgotten password</a>
<label class="hidden"><input type="checkbox" /> Remember me</label>
</form>

Instead of binding to blur, bind to a click outside the login form.
Here's some code I have in my page that closes my login box when I click outside it, you can adapt it to your needs:
$(document).mousedown(function (e) {
if ($(e.target).closest("#signin").length == 0) {
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});