How to assgin two diffrent url with java script code - javascript

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

Related

redirect to another page if (text area (input) === "something") when a button is clicked

This is the way I approached it. Please help:
Search
<script type="text/javascript">
var criteria = document.getElementById("search").val().toLowerCase();
if (criteria == "crosshatching") {
document.getElementById("searchBtn").onclick = function() {
window.location.href = "https://www.youtube.com/watch?v=117AN3MQuVs";
}
}
</script>
There was no scope for the variable criteria inside the function.
Also .val() is for jQuery, instead use Javascript's .value.
I've modified your code.
Please check the working code below :
document.getElementById("searchBtn").onclick = function() {
var criteria = document.getElementById("search").value.toLowerCase();
if (criteria == "crosshatching") {
alert("Matching");
window.location.href = "https://www.youtube.com/watch?v=117AN3MQuVs";
} else {
alert("NOT Matching");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="search" id="search"></textarea>
<button id="searchBtn">Search</button>
You need to check the value of your input inside the event handler. In addition, as pointed out in the comments, use value instead of val().
document.getElementById('searchBtn').addEventListener('click', function() {
var criteria = document.getElementById('search').value.toLowerCase();
if (criteria === "crosshatching") {
console.log('You would be redirected here!')
location.href = 'https://www.youtube.com/watch?v=117AN3MQuVs'
} else {
console.log('No redirect. You wrote: ' + criteria)
}
})
<input id="search" type="text"/>
<button id="searchBtn">Search</button>

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

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>

Easy way to remove ghost text default value on submit

The script code below makes ghost text
$('.ghost-text').each(function(){
var d = $(this).val();
$(this).focus(function(){
if ($(this).val() == d){
$(this).val('').removeClass('ghost-text');
}
});
$(this).blur(function(){
if ($(this).val() == ''){
$(this).val(d).addClass('ghost-text');
}
});
});
But on submit it passes that default ghost value. How to delete it on submit?
I believe its better to use a placeholder:
<input type="text" id="myTxt" placeholder="enter something..."/>
Or if you want to stick with your js:
if($.browser.msie){
$('.ghost-text').each(function(){
var d = $(this).attr('placeholder');
$(this).focus(function(){
if ($(this).val() == d){
$(this).val('').removeClass('ghost-text');
}
});
$(this).blur(function(){
if ($(this).val() == ''){
$(this).val(d).addClass('ghost-text');
}
});
});
$('form').submit(function(){
$('.ghost-text').each(function(){
if ($(this).val() == $(this).attr('placeholder'))
$(this).val('');
});
});
}
Have you tried something like this?
$("#submit").click(function(){
$(".ghost-text").each(function(){
$(this).val('');
}
})
var ghostTexts = $('.ghost-text');
ghostTexts.each(function(){
var $this = $(this),
d = $(this).val();
$this.on({
'focus': function(){
if ($this.val() == d){
$this.val('').removeClass('ghost-text');
}
},
'blur': function() {
if ($this.val() == ''){
$this.val(d).addClass('ghost-text');
}
}
});
});
$('yourForm').on('submit', function() {
ghostTexts.val('');
});
If you call 'ghot text' watermark and able to use HTML5, use placeholder attribute instead:
<input type="text" placeholder="My ghost text" />
If 'ghost text' as nothing to do with watermark and dont want to submit it, you can use this instead:
$('form').submit(function(){
$('.ghost-text',this).each(function(){
$(this).removeAttr('name');
});
});

Categories