I have a search box, when user enters any text and press enter or clicks on search icon it should redirect to search page.
Functionality is working fine in desktop, but only in android devices it is not working , if i press enter or clicks on search icon nothing happens.
I've tried adding focus, kepyess, touchstart but nothing helps. Please help
Updated:
I've identified that there are two search mockup one for desktop and another for mobile.
While searching in mobile device, input text value is null because it is taking the value of desktop search.
I've updated the script but still it is not taking the mobile input value. Please let me know what i'm doing wrong
$(".newsroom_search-box,.newsroom_search-box_mobile").submit(setupNewsroomSearch);
$('.search_banner-q_newsroom,.search_banner-q_newsroom_mobile').click(function() {
$('.search_banner-q_newsroom,.search_banner-q_newsroom_mobile').focus();
});
$(".search_desktop-newsroom-submit,.search_desktop-newsroom-submit_mobile").click(setupNewsroomSearch);
function setupNewsroomSearch(e) {
e.preventDefault();
if ($(".search_banner-q_newsroom,.search_banner-q_newsroom_mobile").val().trim().length === 0) {
return false;
} else {
alert('called');
var tracking = '&ei=newsroom_search';
redirectToSearchPage($(".search_banner-q_newsroom").val(), "newsroom", "commbank_all", tracking);
}
}
Desktop Mockup
<div class="newsroom-search-wrapper">
<form class="newsroom_search-box">
<div class="search-box">
<input type="text" class="search_banner-q_newsroom" aria-label="Search" name="query" placeholder="${newsRoomBrowseContainerModel.searchText}" />
<i class="icon-search search_desktop-newsroom-submit" aria-hidden="true"></i>
</div>
</form>
</div>
Search Mockup
<div class="newsroom-search-wrapper_mobile mobile-search">
<form class="newsroom_search-box_mobile">
<div class="search-box">
<input type="text" class="search_banner-q_newsroom_mobile" aria-label="Search" name="query" placeholder="${newsRoomBrowseContainerModel.searchText}" />
<i class="icon-search search_desktop-newsroom-submit_mobile" aria-hidden="true"></i>
</div>
</form>
</div>
Related
Sorry, I am just learning so I apologize for my confusing code..
How would i take an input value and redirect it as a search within another help system such as madcap?
I created a bootstrap page that has a search in the hero banner and in this search id like it to redirect to our help system and search there. Here is an example of what I am trying to create:
https://webfiles.blackbaud.com/files/support/helpfiles/education/k12/full-help/Content/Home.html
When you use the search on this home page you'll see that it redirects to their help system search. I hope this makes sense? Being new to this makes it hard for me to explain..
I'm not sure if my HTML or javascript is correct. This is what I have at the moment:
<div class="form">
<i class="fa fa-search"></i>
<input type="text" onkeypress="return search(this)" class="form-control form-input" placeholder="Search anything..." aria-label="Large" aria-describedby="inputGroup-sizing-sm">
</div>
This is my JS:
function search(this) {
if(addEventListener.key === 'Enter') {
window.location = "https://help.madcapsoftware.com/flare2021r2/Default.htm#cshid=&searchQuery="
return false;
}}
Thank you!
My answer removes the inline javascript and adds a keydown event listener and checks for the enter key, then redirects if the enter key was pressed.
let search = document.querySelector(".form .form-input");
search.addEventListener("keydown", function(event) {
if (event.keyCode == '13') {
window.location = "https://help.madcapsoftware.com/flare2021r2/Default.htm#cshid=&searchQuery=" + this.value;
}
});
<div class="form">
<i class="fa fa-search"></i>
<input type="text" class="form-control form-input" placeholder="Search anything..." aria-label="Large" aria-describedby="inputGroup-sizing-sm">
</div>
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.
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()
I've written some jQuery to validate my Bootstrap forms, however I'm having a few issues.
Firstly, I want a red outline to appear if the user clicks off the input field without typing anything in: JSFiddle example here. In this example I'm using the Bootstrap Validator plugin, however I want to imitate this effect without using the plugin.
Second, and linked to the issue I just mentioned, the green outline only appears once the user clicks the submit button, thus the user only sees it for half a second or so before they are redirected, making it a little pointless. Again, this would be solved by having an error/success outline appear once the user clicks off the input. If anyone could help me out it would be greatly appreciated.
This is the code I have so far:
HTML:
<form id="auth_form" action="action.php" method="post">
<div class="form-group has-feedback" name="auth_code" id="auth_code">
<label for="auth_code" class="control-label">
Authorisation Code</label>
<input class="form-control" id="auth_code_input" name="auth_code_input" type="password">
<span class="form-control-feedback glyphicon" id="iconBad"></span>
</div>
<div class="form-group">
<div>
<button class="btn btn-info" name="submit" type="submit" id="submit">Submit</button>
</div>
</div>
</form>
jQuery:
$(document).ready(function() {
$('#auth_form').on('submit', function(e) {
var auth_code = $('#auth_code_input').val()
if (auth_code=="") {
$('#auth_code').addClass('has-error');
$('#iconBad').removeClass('glyphicon-ok').addClass('glyphicon-remove');
e.preventDefault();
} else {
$('#auth_code').removeClass('has-error').addClass('has-success');
$('#iconBad').removeClass('glyphicon-remove').addClass('glyphicon-ok');
}
})
})
JSFiddle
Try this updated fiddle: jsfiddle.net/xqwsobmo/20/
Need to add input blur event and validate input
$(document).ready(function() {
$('#auth_code_input').blur(function(){
if(!ValidateInput()){
e.preventDefault();
}
});
$('#auth_form').on('submit', function(e) {
if(!ValidateInput()){
e.preventDefault();
}
})
});
function ValidateInput(){
var IsValid=false;
var auth_code = $('#auth_code_input').val()
if (auth_code=="") {
$('#auth_code').addClass('has-error');
$('#iconBad').removeClass('glyphicon-ok').addClass('glyphicon-remove');
IsValid=false;
} else {
$('#auth_code').removeClass('has-error').addClass('has-success');
$('#iconBad').removeClass('glyphicon-remove').addClass('glyphicon-ok');
IsValid=true;
}
return IsValid;
}
Below script will create effect fade in and fade out when user hover mouse into login box
<script>
$("#login").hover(function() {
$("#loginForm").slideToggle('500').css('display', 'block');
}, function() {
$("#loginForm").slideToggle('500')
});
</script>
but when i want select my email from <input type="name" name="email_address" />
this div #loginForm will automatically closed :
so how to keep this box always show when user select their email address from autocomplete list ?
This issue only happen in browser mozilla firefox.
FYI : change to <input type="name" name="Email" /> .. this will list your gmail email address
Jsfiddle
As the drop-down is created by the browser, jQuery thinks the mouse leaves #login and will slide up again. To prevent this from happening, you could add an delay to the slideUp animation. I created a fiddle to show you what I mean.
$("#login").hover(function () {
$("#loginForm").clearQueue().slideDown(500);
}, function () {
$("#loginForm").delay(1500).slideUp('500');
});
Note the clearQueue() method. This will make sure that when the user has selected an email and has its mouse over the element with #login it will prevent the slideUp() from happening.
I rewrote your HTML and script. I'm keeping the login box open if the textbox is still on focus. Also changed slideToggle to slideUp/slideDown You can try this
HTML
<form>
<p id="login">
<span class="label">Login Here</span>
<span id="loginForm">
<span class="form-elements">
<span class="form-label">Name:</span>
<span class="form-field"><input type="name" name="email_address" id="email"/></span> </span>
<span class="form-elements">
<span class="form-label">Password:</span>
<span class="form-field"><input type="password" id="pass"/></span> </span>
<span class="form-elements">
<span class="submit-btn"><input type="submit" value="Submit" /></span>
</span>
</span>
</p>
</form>
Script
$("#login").hover(function() {
$("#loginForm").slideDown('500').css('display', 'block');
}, function() {
if($('#email').is(":focus") || $('#pass').is(":focus")) return false;
$("#loginForm").slideUp('500')
});
Demo: http://jsfiddle.net/r6sQP/4/
I think it will be better without 500 millisec:
$("#loginForm").slideToggle().css('display', 'block');