jQuery to Pass a Static Value if search is blank - javascript

I am passing the search string using $('input[type="text"]').val()
Now the requirement is:
if it is a blank search, then I want to pass Blank Search as the value instead of $('input[type="text"]').val()
AND
if it not blank and having a value, I want to pass the same value using $('input[type="text"]').val().
What I have tried:
$(document).on('click','.fa.fa-search', function()
{
ga('create', {{ GA Property }}, 'auto');
ga('send', 'event', 'Search',
function blank ()
{
alert('hi');
var srchStr = $('input[type="text"]').val();
if(srchStr == '') { srchStr = "Blank Search"; }
},
window.location.href);
});
How to do it?

Try this:
var srchStr = $('input[type="text"]').val();
if(srchStr == '')
{
srchStr = "Blank Search";
}

Working Fiddle
html:
<input type="text" />
<input type="button" val="test">
jquery :
$('input[type="button"]').on("click", function() {
var val = $('input[type="text"]').val().trim().length > 0 ? $('input[type="text"]').val() : "Your Default value"
alert(val);
});

Simplest way:
if($('input[type="text"]').val() == '')
{
$('input[type="text"]').val("Blank Search");
}

Try this:
var input = $('input[type="text"]');
var srchStr = input.val();
if(srchStr != '' && srchStr.trim().length > 0){
input.val(srchStr);
}else{
input.val("Blank Search");
}

See this example with avoiding extra spaces.
var v = $('input[type="text"]').val().replace(/\s+/,"");
v = v === "" ? "Blank Search" : $('input[type="text"]').val();

Related

Search not work

I have no idea why this does not work? The select option works without any problems, but the search field does not work...
Nothing happens. The console displays the input from the search field correctly. No error, nothing.
<select id='selector'>
<option value="all">Alle</option>
(more data)
</select>
<input class="form-control search" name="search" id="search" type="text" />
<script>
$(document).ready(function(){
$('#selector').change(onSelectChangeFeed); // select option
function onSelectChangeFeed() {
var feed = $(this).find(':selected').data('feed');
$('#calendar').fullCalendar('removeEventSource', feed);
console.log(feed);
};
$('#search').change(onSearchChangeFeed); // search field
function onSearchChangeFeed() {
var stext = $(this).val();
$('#calendar').fullCalendar('removeEventSource', stext);
console.log(stext);
};
});
</script>
please help me :)
EDIT
i think the problem is here:
eventRender: function (event, element) {
var selector = ['all', event.color].indexOf($('#selector').val()) >= '' || ['all', event.category].indexOf($('#selector').val()) >= '' || ['all', event.title].indexOf($('#selector').val()) >= '';
var searchfield = event.color.indexOf($('#search').val()) >= '' || event.category.indexOf($('#search').val()) >= '' || event.title.indexOf($('#search').val()) >= '';
return (selector, searchfield);
}
I fixed it myself. I changed
return (selector, searchfield);
to
return (selector && searchfield);
and now it works as intended.
Your this is not what you expect to be, so try to get the val using the input element id. $('#search').val()

Restrict users from inserting special character except underscore

I want to restrict users from
inserting special characters except ' _ ' underscore
inserting Capitol Letters
inserting first value as number
inserting first value as special character
inserting spaces
in the textbox of <input>
I tried the below snippet but it didn't give me results for 1 & 4.
$(function() {
$('.alphaonly').on('input', function() {
$(this).val(function(i, val) {
return val.replace(/^\d|[A-Z\s]+/g, '');
});
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="lorem" class="alphaonly">
$(function() {
var haveFirst = false;
$('.alphaonly').on('keypress', function (event) {
if( $(this).val().length === 0 ) {
haveFirst = false;
}
var regex = new RegExp("^[a-z0-9_]+$");
var first = new RegExp("^[a-z]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if(!first.test(key) && haveFirst == false){
event.preventDefault();
return false;
}else if(regex.test(key)){
haveFirst = true;
}
if (!regex.test(key)) {
event.preventDefault();
return false;
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="lorem" class="alphaonly">
Try this
https://regex101.com/r/3mtS4t/1
This regex ^[A-Za-z0-9_]+$ will allow only name with underscores.
Here this i use this for some kind for utf-8
$("YourClassorIdOfInputOrTextField").bind("keypress", function (event) {
if (event.charCode!=0) {
var regex = new RegExp("^[A-Za-z0-9 _]");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
}
});
This will achieve what you seek stranger
Here's a simple replacement for your function based on regular expressions:
function blockSpecialChar(e) {
return /[^A-Za-z0-9._]/.test(e);
}
https://jsfiddle.net/RajKumarDubey/ko29twoh/

How to assgin two diffrent url with java script code

Below is a JS code , and i want to redirect user to two different URL - If he enter value in input box 1 so he should redirect to this Default url[https://manage.bagful.com.au/cart.php?a=add&pid=30] else he put more than 1 so this URL [https://manage.bagful.com.au/cart.php?a=add&pid=30&configoption[2]]
Here is the Code:
$(document).ready(function(){
document.getElementById("input").addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode == 1) {
var inputvalue = $("#input").val();
window.location.replace(" https://manage.bagful.com.au/cart.php?a=add&pid=30");
}
});
$('#button').click(function(e) {
var inputvalue = $("#input").val();
window.location.replace(" https://manage.bagful.com.au/cart.php?a=add&pid=30&configoption[2]="+inputvalue);
});
});
Please check and suggest the best idea.
Here you go with jsfiddle https://jsfiddle.net/Lfremy6z/1/
$(document).ready(function()
{
$('#submit').click(function(){
var inputVal = $('input[type="text"]').val();
if( inputVal == 1){
window.location.replace("https://manage.bagful.com.au/cart.php?a=add&pid=30");
}else{
window.location.replace("https://manage.bagful.com.au/cart.php?a=add&pid=30&configoption[2]=" + inputVal);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<button id="submit" type="submit">Submit</button>
In jsfiddle window.location is not present so I added the code here.
If you want to redirect the user after insert value then
Try this
$('#input').on('change',function(e) {
var inputvalue = $("this").val();
if (inputvalue == 1) {
window.location.replace(" https://manage.bagful.com.au/cart.php?a=add&pid=30");
}else {
window.location.replace(" https://manage.bagful.com.au/cart.php?a=add&pid=30&configoption[2]="+inputvalue);
}
});
I thing it will work for you.
try if else condition to dynamic the url :
document.getElementById("input").addEventListener("keyup", function(event) {
event.preventDefault();
var inputvalue = $("#input").val(),
url = (inputvalue == 1) ? 'https://manage.bagful.com.au/cart.php?a=add&pid=30' : 'https://manage.bagful.com.au/cart.php?a=add&pid=30&configoption[2]';
window.location.replace(url);
});

jquery - Catch only new value in text input

I'm trying to create a JQuery method to tell me what the user writes in a text input. For example, if there's an input with the text foo and the user types in b I want to catch that. If the user types a afterwards, I want to catch only that a and not the ba.
How can I do that?
EDIT: I did it using this code:
$(".writetags").each(function(){
var elem = $(this);
elem.bind("keyup", function() {
elem.data("oldVal", $(this).data("newVal") || "");
elem.data("newVal", $(this).val());
var oldVal = elem.data("oldVal");
var newVal = $(this).val();
console.log("Was "+oldVal+" is "+newVal);
var newChar = newVal.charAt(newVal.length-1);
var oldChar = oldVal.charAt(oldVal.length-1);
console.log("The user just typed in "+newChar+" instead of "+oldChar);
});
});
this is a generic code that listen for all text input Changes in your web page:
$(document).ready(function() {
$("input[type=text]").change(function() {
$(this).data("oldVal", $(this).data("newVal") || "");
$(this).data("newVal", $(this).val());
console.log($(this).data("oldVal"));
console.log($(this).data("newVal"));
});
});
Thanks everyone, but I managed to do it using this code:
$(".writetags").each(function(){
var elem = $(this);
elem.bind("keyup", function() {
elem.data("oldVal", $(this).data("newVal") || "");
elem.data("newVal", $(this).val());
var oldVal = elem.data("oldVal");
var newVal = $(this).val();
console.log("Was "+oldVal+" is "+newVal);
var newChar = newVal.charAt(newVal.length-1);
var oldChar = oldVal.charAt(oldVal.length-1);
console.log("The user just typed in "+newChar+" instead of "+oldChar);
});
});
use the keyCode from the keypress event and use String.fromCharCode to get the character:-
$('input').keypress(function(event){
var character = String.fromCharCode(event.which || event.charCode || event.keyCode);
console.log(character);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />

Getting value from input box, changing url based on certain conditions

Should be straightforward, but I just can't work out why this will not work! I'm a n00b, first off.
I have two input boxes that users need to fill in, a name and an amount. If these have been filled in, I change the query string on the URL, if not, then I give them a pre-defined query string for the URL.
I can't get a working jsfiddle, as something weird is going on with the & signs for my query string, sigh.
Basically, I cannot get the URL to change on click.
So here's my code, and the non-working jsfiddle for those interested: http://jsfiddle.net/9uk68m6x/
<form>
<input type="text" class="name">
<input type="text" class="amount">
<script type="text/javascript">
$(function() {
$('.makeUrl').click(function(){
var url = 'http://www.website.com',
nameVal = $("input.name").val(),
amountVal = $("input.amount").val();
if (nameVal != ''){
//if name value isn't blank, then
$("a.makeUrl").prop("href", url+'&name='+nameVal+'&free_amount=1&amount='+amountVal+'00');
}
else (nameVal == ''){
$("a.makeUrl").prop("href", "http://www.website.com&free_amount=1&amount=200");
}
});
});
</script>
Donate
</form>
There is a syntax error in your script: else do not accept any kind of arguments. Use else if instead. However, since your condition is binary (nameVal is either empty or not), then you can actually make do without the second if statement.
Therefore, some changes I have made:
Revise the conditional statement. You simply have to check if nameVal is empty or not using the expresison !nameVal.
Change the href attribute using .attr() instead of .prop().
Use $(this) in the click function since it is cached
Here is the fiddle: http://jsfiddle.net/teddyrised/9uk68m6x/4/
$(function () {
$('.makeUrl').click(function (e) {
// Declare variables
var url = 'http://www.website.com',
nameVal = $("input.name").val(),
amountVal = $("input.amount").val();
// Conditional statement
if (nameVal) {
//if name value isn't blank, then
$(this).attr("href", url + '&name=' + nameVal + '&free_amount=1&amount=' + amountVal + '00');
} else {
$(this).attr("href", "http://www.website.com&free_amount=1&amount=200");
}
// Check updated href
console.log($(this).attr("href"));
});
});
You need to have a ? in there somewhere. A valid parameterized URL would be:
"http://www.website.com/?free_amount=1&amount=200"
Yeah, that is kinda hard to fiddle when they encode those characters for you before it runs.
After a couple changes to your JS, it seems to be working, at least in JSFiddle.
$(function () {
$('.makeUrl').click(function () {
var url = 'http://www.website.com',
nameVal = $("input.name").val(),
amountVal = $("input.amount").val();
if( nameVal !== "" ) {
//if name value isn't blank, then
$("a.makeUrl").prop("href", url + '?name=' + nameVal + '&free_amount=1&amount=' + amountVal + '00');
} else {
$("a.makeUrl").prop("href", "http://www.website.com?free_amount=1&amount=200");
}
});
});
You had a syntax error at the else. Remove the (newVal == '') or use else if
Anyway, here is a working jsfiddle what is show you the URL. (Prevent to activate the link, because of e.preventDefault();
And it's checkin the amountVal also.
<form>
<input type="text" class="name">
<input type="text" class="amount">
<script type="text/javascript">
$(function() {
$('.makeUrl').click(function(e) {
e.preventDefault();
var url = 'http://www.website.com',
nameVal = $("input.name").val(),
amountVal = $("input.amount").val();
var newUrl;
if (nameVal !== '' && amountVal != '') {
//if name value isn't blank, then
newUrl = url + '?name=' + nameVal + '&free_amount=1&amount=' + amountVal + '00';
$("a.makeUrl").prop("href", newUrl);
} else {
newUrl = 'http://www.website.com&free_amount=1&amount=200';
$("a.makeUrl").prop("href", "http://www.website.com?free_amount=1&amount=200");
}
$('#url').html(newUrl);
});
});
</script>
Donate
</form>
<div>URL is: <span id="url"></span></div>

Categories