We Keep Coding

jQuery to Pass a Static Value if search is blank

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();

Javascript Keyboard Event change marked text

I have an input field which looks like this:
<input type="text" name="definemonth" value="'.$monthStart.'" class="form-control"
onkeypress="return isNumberKey(event, this.value);" />
To allow only numbers between 1 and 28 (each included) I wrote this piece of JS code:
var input = event.key;
var newValue = value + input;
if(input == "ArrowLeft" || input == "ArrowRight" || input == "ArrowUp" ||
input == "ArrowDown" || input == "Backspace" || input == "Delete" || input == "Enter")
{
return true;
}
if (!input.match("^[0-9]$") || newValue > 28 || newValue < 1)
{
return false;
}
return true;
It works mostly as I want it to. I want to be able to use the Arrow Keys, the backspace and delete button which works all just fine. But the issue is that I can not mark the text and then add a new number. With marking I mean this kind of marking:
The marking works fine but any key stroke does not change anything at all.
I tried to detect with
console.log(input);
what happens there but I do not get any output in the console at all.
My question is then how do I have to change my code to be able to enter a new value when the text is marked and I type 1 for example.

You should clear selected text before checking new value for allowability.
Like this:
var clearValue = element.value;
clearValue = clearValue.slice(0, element.selectionStart) + clearValue.slice(element.selectionEnd);
var newValue = clearValue + input;
jsfiddle

JQuery .each function not working

I am trying to understand why the following doesn't work:
function SetMaxLength() {
var form = $("body").find("form");
form.each(function () {
var elements = $(this).find("input");
elements.each(function() {
var attr = $(this).attr('data-val-maxlength-max');
if (typeof attr !== typeof undefined && attr !== false) {
$(this).attr('maxlength', attr.value);
}
});
});
}
<form action="/go/somewhere" autocomplete="off" class="form-one" method="post" role="form" novalidate="novalidate">
<input data-val-maxlength="Invalid Email" data-val-maxlength-max="254" type="text" value="">
</form>
when I step through it, it finds 1 form but then on the each part it just skips it, steps over it.
Basically all it is suppose to do it when it sees data-val-maxlength-max attribute, it is suppose to take its value and inject maxlength attribute in the element.
JsFiddle: https://jsfiddle.net/j04vue8r/3/

Since you already have jQuery included in your page, it's better to rewrite your code and make it more "jQuery style".
Here we go:
$('[data-val-maxlength-max]').each(function(){
$(this).attr('maxlength', $(this).data('val-maxlength-max'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/go/somewhere" autocomplete="off" class="form-one" method="post" role="form" novalidate="novalidate">
<input data-val-maxlength="Invalid Email" data-val-maxlength-max="254" type="text" value="">
</form>

I've tried your code and it not step over the each function. The problem is the attr() function that doesn't set the maxlenght attribute because you have a mistake in the code: attr is just the value of data-val-maxlength-max and so you have to write something like this:
$(this).attr('maxlength', attr);

This does what you need:
$(function() {
$("form input").each(function() {
var attr = $(this).attr('data-val-maxlength-max');
if (typeof attr !== undefined && attr !== false) {
$(this).attr('maxlength', attr);
}
});
});

There are two problems with above code.
1. Function SetMaxLength is not called
2. variable attr already contains value. So you don't need to do attr.value
Below code works
function SetMaxLength() {
var form = $("body").find("form");
form.each(function () {
var elements = $(this).find("input");
elements.each(function() {
var attr = $(this).attr('data-val-maxlength-max');
if (typeof attr !== typeof undefined && attr !== false) {
$(this).attr('maxlength', attr);
}
});
});
}
SetMaxLength()

Try this
window.onload = function () {
SetMaxLength();
}
function SetMaxLength() {
var form = $("body").find("form");
form.each(function () {
var elements = $(this).find("input");
elements.each(function() {
var attr = $(this).attr('data-val-maxlength-max');
console.log(attr);
if (typeof attr !== typeof undefined && attr !== false) {
$(this).attr('maxlength', attr);
}
});
});
}
All I did was remove attr.value in your if statement. Works fine for me. You don't need the value, since you already grabbed it in the variable : ). I'd encourage you not to use generic terms like "form" and "elements" and "attr". They might cause issues.
By the way, in the future you may wish to use console.log. It helped me figure out the issue here. I did console.log(attr) right after the var attrline to see what we were getting. In Chrome you can view the console by hitting ctrl + shift + J. Since I saw that it was 254, I knew we didn't need to get a new value : ).

Pass the selected value in HTML <select> to a javascript variable?

I am trying to run the js script using the parameters specified on the webpage, when javascript is triggered, a php file will run. The expected output would be the result from getstats.php. It didn't work for some reason. Is it because app1 is not a global variable?
The HTML:
<select name="app" id="app1">
<option value=1>A</option>
<option value=2>B</option>
<option value=3>C</option>
<option value=4>D</option>
</select>
P1: <input type="text" id="p1">
Start Date: <input type="date" id="dt1">
End Date: <input type="date" id="dt2">
<input type="submit" id = "submit" value="Run"><br>
<script src="js/global.js"></script>
The javascript code in the global.js:
$('input#submit').on('click', function() {
var app1 = document.getElementById("app1").value;
var p1 = $('input#p1').val();
var dt1 = $('input#dt1').val();
var dt2 = $('input#dt2').val();
if ($.trim(p1) != '' && $.trim(app1) != '' && $.trim(dt1) != '' && $.trim(dt2) != '') {
$.post('getstats.php', {app1: app1, p1: p1, dt1: dt1, dt2: dt2}, function(data1) {
$('div#stats').html(data1);
});
}
});
Thanks for your help!

I think you forgot to use e.preventDefault in the click event.
If the form elements are inside a form, the button wil trigger the value passed to the form action attribute. This way the value will never be 'passed' to jQuery (JavaScript).
Also The click handler should be wrapped in a document ready function so it waits untill the DOM is ready before trying to bind the event.
$(document).ready(function() {
$('input#submit').on('click', function(e) {
e.preventDefault();
var app1 = $('#app1').val();
var p1 = $('input#p1').val();
var dt1 = $('input#dt1').val();
var dt2 = $('input#dt2').val();
if ($.trim(p1) != '' && $.trim(app1) != '' && $.trim(dt1) != '' && $.trim(dt2) != '') {
$.post('getstats.php', {app1: app1, p1: p1, dt1: dt1, dt2: dt2}, function(data1) {
$('div#stats').html(data1);
});
}
});
});
You can check values in firebug console with console.log('text'); or console.log(var);
Try to log app1 before you start the if statement to see if there is a value in the variable. If it prints undefined, maybe something else is wrong.

Have a look at this question, this question, this question, and this article...
You might also like to check out the .serialize() jquery function, which can help save you a lot of time, especially with validation. http://api.jquery.com/serialize/
hope this helps

I checked your code it's working fine :
Just write your code in
$(function()
{
// Your code
// This function is exceuted when page is loaded.
});
What I tried :
$(function()
{
$('input#submit').on('click', function() {
var app1 = document.getElementById("app1").value;
alert("--"+app1);// <------------ showing correct o/p
var p1 = $('input#p1').val();
alert(p1);
var dt1 = $('input#dt1').val();
var dt2 = $('input#dt2').val();
if ($.trim(p1) != '' && $.trim(app1) != '' && $.trim(dt1) != '' && $.trim(dt2) != '') {
$.post('getstats.php', {app1: app1, p1: p1, dt1: dt1, dt2: dt2}, function(data1) {
$('div#stats').html(data1);
});
}
});
});

Calculation issue With JQuery

I know it is very simple.But Still it is not working.I am multiplying a input number with a fixed number,but is not showing the expected result.it always shows the Error message "Please enter some value" even i enter some integer e.g. 6.
This is Html Code.
<input type="text" class="cc" id="getdata" />
<div id="result"> <input type="text" id="show" /></div>
<input type="button" value="calculate" id="calculate" />
This is JQuery Code.
$(document).ready(function () {
$("#calculate").click(function () {
if ($("#input").val() != '' && $("#input").val() != undefined) {
$("#result").html("total value is::" + parseInt($("#input").val()) * 5);
}
else {
$("#result").html("Please enter some value");
}
});
});
Any help will be highly appreciated.
Can anyone tell me please how to concatenate all clicked values of different buttons in a textbox?I want to show previous and current clicked value of button in a textbox.
Thank you.

Do you not mean #getdata? Where is #input?
Replace ("#input") with ("#getdata") in your code.
Check out this fiddle.
$(document).ready(function () {
$("#calculate").click(function () {
if ($("#getdata").val() != '' && $("#getdata").val() != undefined) {
$("#result").html("total value is::" + parseInt($("#getdata").val()) * 5);
} else {
$("#result").html("Please enter some value");
}
});
});​

You have no input whose id is "input". The jquery selector #somestring is looking for an element whose id is somestring.
Replace ("#input") by ("#getdata") in your code.

There is no field with the ID input in the HTML you posted, yet your jQuery is looking for one. Perhaps you meant $('#show')
With jQuery issues, ALWAYS suspect the selector before even wondering what else might be wrong. Confirm it actually finds the elements you think it does - never assume.
console.log($('#input').length); //0

if ($("#input").val() != '' && $("#input").val() != undefined) {
You dont have any field anywhere in your markup with the id input!
I think you intended all the instances of #input in that script to be #getdata, but you should also only read its value once into a variable and use that:
$("#calculate").click(function () {
var val = $('#getdata').val();
if (val != '' && val != undefined) {
$("#result").html("total value is::" + parseInt(val) * 5);
}
else {
$("#result").html("Please enter some value");
}
});
Live example: http://jsfiddle.net/82pf4/

$(document).ready(function () {
$("#calculate").click(function () {
if ($("#getdata").val() != '' && $("#getdata").val() != undefined) {
$("#result").html("total value is::" + parseInt($("#getdata").val()) * 5);
}
else {
$("#result").html("Please enter some value");
}
});
});

Checkout this Fiddle
I think that is what you want.
<input type="text" class="cc" id="getdata" />
<input type="button" value="calculate" id="calculate" />
<div id="result"></div>​
<script>
$("#calculate").click(calculate);
$("#getdata").keypress(function(ev){
if(ev.keyCode == 13)
calculate();
});
function calculate()
{
var $getData = $("#getdata");
var $result= $("#result");
if ($getData .val() != '' && $getData .val() != undefined && !isNaN($getData .val()))
{
$result.append((parseInt($getData .val()) * 5) + "<p>");
}
else
{
$result.append("Please enter some value<p>");
}
$getData .val("").focus();
}
​
</script>