Javascript & JQuery odd issue or what did I do wrong?

Javascript & JQuery odd issue or what did I do wrong? - javascript

I have this function for coping values from window to window that is working one way, but not another...
Working script:
$(document).ready(function(e) {
$('#clickit').live({
click: function() {
window.opener.document.forms['orderForm']['service'].value = document.forms['GroundRates']['service'].value;
window.opener.document.forms['orderForm']['rate'].value = document.forms['GroundRates']['rate'].value;
self.close();
return false;
}
});
});
Now I on this other script, what did I do wrong? I'm pulling my hair out here.
Not working:
$(document).ready(function(e) {
$('#clickit').live({
click: function() {
var thisservice = document.forms['GroundRates']['service'].value;
var thisrate = document.forms['GroundRates']['rate'].value;
var thatservice = window.opener.document.forms['orderForm']['service'].value;
var thatrate = window.opener.document.forms['orderForm']['rate'].value;
$(thatrate) = $(thisrate);
$(thatservice) = $(thisservice);
self.close();
return false;
}
});
});
I've also tried..
$(thatrate).val() = $(thisrate).val();
$(thatservice).val() = $(thisservice).val();
And..
thatrate = thisrate;
thatservice = thisservice;
But this works:
var service = document.forms['GroundRates']['service'].value;
var rate = document.forms['GroundRates']['rate'].value;
window.opener.document.forms['orderForm']['service'].value = service;
window.opener.document.forms['orderForm']['rate'].value = rate;
Am I not assigning the var correctly for the window.opener?

You're misusing .val()
$(thatrate).val($(thisrate).val());
$(thatservice).val($(thisservice).val());
The new value goes inside the parentheses.

var thisservice = document.forms['GroundRates']['service'];
var thisrate = document.forms['GroundRates']['rate'];
var thatservice = window.opener.document.forms['orderForm']['service'];
var thatrate = window.opener.document.forms['orderForm']['rate'];
thatrate.value = thatservice.value;
thatservice.value = thisservice.value;
or if you want to wrap the DOM objects with a jQuery object.
var thisservice = document.forms['GroundRates']['service'];
var thisrate = document.forms['GroundRates']['rate'];
var thatservice = window.opener.document.forms['orderForm']['service'];
var thatrate = window.opener.document.forms['orderForm']['rate'];
$(thatrate).val( $(thatservice).val() );
$(thatservice).val( $(thisservice).val() );

try:
var thisservice = document.forms['GroundRates']['service'];
var thisrate = document.forms['GroundRates']['rate'];
var thatservice = window.opener.document.forms['orderForm']['service'];
var thatrate = window.opener.document.forms['orderForm']['rate'];
thatrate.val(thisrate.val());
thatservice.val(thisservice.val());

Your console will tell you: ReferenceError: Invalid left-hand side in assignment
$(thatrate) = $(thisrate);
$(thatservice) = $(thisservice);
You should do it like this:
var thisservice = document.forms['GroundRates']['service'];
var thisrate = document.forms['GroundRates']['rate'];
var thatservice = window.opener.document.forms['orderForm']['service'];
var thatrate = window.opener.document.forms['orderForm']['rate'];
thatrate.value = thisrate.value
thatservice.value = thisservice.value;

Related

Function call within a function not working

I have a function I call to initialize a page :
function initialize_selections() {
var freeamountElement = document.getElementById("text-freeamount");
var dlyElement = document.getElementById("text-dly");
var freeshipperElement = document.getElementById("text-freeshipper");
if(freeamountElement){
var shippingMethod = document.getElementById("text-freeamount").innerText;
document.getElementById('radio-freeamount').checked = true;
document.getElementById('value-shipping').innerHTML = '$0.00';
document.getElementById('text-shipping').innerHTML = shippingMethod;
}else if(dlyElement){
var shippingMethod = document.getElementById("text-dly").innerText;
document.getElementById('radio-dly').checked = true;
document.getElementById('value-shipping').innerHTML = '$0.00';
document.getElementById('text-shipping').innerHTML = shippingMethod;
}else if(freeshipperElement){
var shippingMethod = document.getElementById("text-freeshipper").innerText;
document.getElementById('radio-freeshipper').checked = true;
document.getElementById('value-shipping').innerHTML = '$0.00';
document.getElementById('text-shipping').innerHTML = shippingMethod;
}else{
var shippingMethod = document.getElementById("text-upsxml").innerText;
var shippingValue = document.getElementById("value-upsxml").innerText;
document.getElementById('radio-upsxml').checked = true;
document.getElementById('value-shipping').innerHTML = shippingValue;
document.getElementById('text-shipping').innerHTML = shippingMethod;
}
// myPoints();
};
This is working well on initial page load. Depending on specfic conditions I want to call it again, from a separate function:
function hideForm(){
if (document.getElementById('thebox').checked==true){
document.getElementById('formdiv').style.display="block";
document.getElementById('formdiv2').style.display="none";
document.getElementById('formdiv3').style.display="block";
var shipping_method = 'Pick Up Your Order';
document.getElementById('text-shipping').innerHTML = shipping_method ;
document.getElementById('value-shipping').innerHTML = '$0.00';
document.querySelector('input[name="shipping"]:checked').checked = false;
// myPoints();
} else {
document.getElementById('formdiv').style.display="none";
document.getElementById('formdiv2').style.display="block";
document.getElementById('formdiv3').style.display="none";
var shipping_method = document.getElementById('text-upsxml').innerText;
document.getElementById('text-shipping').innerHTML = shipping_method ;
var shipping_value = document.getElementById('value-upsxml').innerText;
document.getElementById('value-shipping').innerHTML = shipping_value;
document.querySelector('input[name="shipping"]:checked').checked = false;
document.querySelector('input[name="payment"]:checked').checked = false;
initialize_selections();
};
};
Both codes work well and do as I am looking for except that I can not call initialize_selections from hideForm (same thing occurs with the myPoints function, but commented it out to isolate the issue.

Function keeps return NaN

When the window loads, the console is returning indexIn.But when I run the bottom function, it returns NaN.
const recentItem = document.querySelector('.recent-item');
var indexIn;
window.onload = function() {
var indexIn = JSON.parse(localStorage.getItem("indexInStore"));
var indexOut = JSON.parse(localStorage.getItem("indexOutStore"));
var indexIn = Number(indexIn);
console.log(indexIn);
}
var indexIn = indexIn;
recentItem.addEventListener('click', function() {
console.log(indexIn);
});

Can you try:
const recentItem = document.querySelector('.recent-item');
var indexIn;
window.onload = function() {
indexIn = Number(JSON.parse(localStorage.getItem("indexInStore")));
var indexOut = JSON.parse(localStorage.getItem("indexOutStore"));
console.log(indexIn);
}
recentItem.addEventListener('click', function() {
console.log(indexIn);
});
You have indexIndefined globally then your are "redefining" it and setting in inside an "onload" function. Not good coding.

document.getElementById("toai").innerHTML = document.getElementById("toai").value

<script>
function toai()
{
var Fr_amt_invt = document.getElementById("Fr_amt_invt").value;
var Re_amt_invt = document.getElementById("Re_amt_invt").value;
var totaltoai = +Fr_amt_invt + +Re_amt_invt;
document.getElementById("toai").innerHTML=+totaltoai;
}
</script>
function toai() result is in .innerHTML i want result in .value format so that it use in form input.

Instead of doing document.getElementById("toai").innerHTML=+totaltoai; in the toai()function you can return the value.
<script>
function toai()
{
var Fr_amt_invt = document.getElementById("Fr_amt_invt").value;
var Re_amt_invt = document.getElementById("Re_amt_invt").value;
Fr_amt_invt = parseFloat(Fr_amt_invt);
Re_amt_invt = parseFloat(Re_amt_invt);
var totaltoai = (Fr_amt_invt + Re_amt_invt);
totaltoai = parseFloat(totaltoai);
//document.getElementById("toai").innerHTML=+totaltoai; // delete this
return totaltoai;
}
Then you can do document.getElementById('some-inputs-id').value = toai();

Javascript mutiple onClick() functions can run at once when need only 1 at a time

Presently, I have a few video links on my site that, when the user clicks them, the coorisponding video is displayed with a fadeIn and fadeOut animation. If the user happens to click on say... video 1 and then clicks video 2 before the animation completes, it displays 2 videos when it should display only 1. Does anyone now how to keep javascript from running multiple functions at once?
Code:
$(function(){
var animeReviewsLink = $('#anime-reviews-link');
var animeReviews = $('#anime-reviews');
var animeReviewsText = $('#anime-reviews-text');
var animeCommentsLink = $('#anime-comments-link');
var animeComments = $('#anime-comments');
var animeCommentsText = $('#anime-comments-text');
var animeImagesLink = $('#anime-images-link');
var animeImages = $('#anime-images');
var animeImagesText = $('#anime-images-text');
var animeVideosLink = $('#anime-videos-link');
var animeVideos = $('#anime-videos');
var animeVideosText = $('#anime-videos-text');
var active1 = animeReviewsLink;
var active2 = animeReviews;
var active3 = animeReviewsText;
animeReviewsLink.click(function(e)
{
active3.hide();
active1.show();
animeReviewsLink.hide();
animeReviewsText.show();
active2.slideUp(400);
animeReviews.slideDown(400);
active1 = animeReviewsLink;
active2 = animeReviews;
active3 = animeReviewsText;
setTimeout(function(){},500);
});
animeCommentsLink.click(function(e)
{
active3.hide();
active1.show();
animeCommentsLink.hide();
animeCommentsText.show();
active2.slideUp(400);
animeComments.slideDown(400);
active1 = animeCommentsLink;
active2 = animeComments;
active3 = animeCommentsText;
setTimeout(function(){},500);
});
animeImagesLink.click(function(e)
{
active3.hide();
active1.show();
animeImagesLink.hide();
animeImagesText.show();
active2.slideUp(400);
animeImages.slideDown(400);
active1 = animeImagesLink;
active2 = animeImages;
active3 = animeImagesText;
setTimeout(function(){},500);
});
animeVideosLink.click(function(e)
{
active3.hide();
active1.show();
animeVideosLink.hide();
animeVideosText.show();
active2.slideUp(400);
animeVideos.slideDown(400);
active1 = animeVideosLink;
active2 = animeVideos;
active3 = animeVideosText;
setTimeout(function(){},500);
});
});
I have tried using setTimeout at the end of each function but it seems that doesn't prevent it from running multiple functions at the same time.
EDIT: fiddle example - http://jsfiddle.net/vcvpu22q/
Thanks.

What about something like this? (edited)
$(function(){
var button1 = $('#button1');
var button2 = $('#button2');
var button1text = $('#button1text');
var button2text = $('#button2text');
var button1click = $('#button1click');
var button2click = $('#button2click');
var canClickButton = true;
button1.click(function(e){
if(!canClickButton){return;}
canClickButton = false;
button2text.hide();
button2.show();
button1.hide();
button1text.show();
button2click.fadeOut(500,function(){button1click.fadeIn(500)});
setTimeout(function(){canClickButton = true;}, 1000);
});
button2.click(function(e){
if(!canClickButton){return;}
canClickButton = false;
button1text.hide();
button1.show();
button2.hide();
button2text.show();
button1click.fadeOut(500, function(){ button2click.fadeIn(500) } );
setTimeout(function(){canClickButton = true; }, 1000);
});
});

Use .stop() before anything else. It will stop the current animation, and do yours, instead of infinitely running them.
So in your click functions, add:
active3.stop().hide();
active1.stop().show();
and so on.

You can use e.preventDefault();
$(function(){
var animeReviewsLink = $('#anime-reviews-link');
var animeReviews = $('#anime-reviews');
var animeReviewsText = $('#anime-reviews-text');
var animeCommentsLink = $('#anime-comments-link');
var animeComments = $('#anime-comments');
var animeCommentsText = $('#anime-comments-text');
var animeImagesLink = $('#anime-images-link');
var animeImages = $('#anime-images');
var animeImagesText = $('#anime-images-text');
var animeVideosLink = $('#anime-videos-link');
var animeVideos = $('#anime-videos');
var animeVideosText = $('#anime-videos-text');
var active1 = animeReviewsLink;
var active2 = animeReviews;
var active3 = animeReviewsText;
animeReviewsLink.click(function(e)
{
e.preventDefault();
active3.hide();
active1.show();
animeReviewsLink.hide();
animeReviewsText.show();
active2.slideUp(400);
animeReviews.slideDown(400);
active1 = animeReviewsLink;
active2 = animeReviews;
active3 = animeReviewsText;
setTimeout(function(){},500);
});
animeCommentsLink.click(function(e)
{
e.preventDefault();
active3.hide();
active1.show();
animeCommentsLink.hide();
animeCommentsText.show();
active2.slideUp(400);
animeComments.slideDown(400);
active1 = animeCommentsLink;
active2 = animeComments;
active3 = animeCommentsText;
setTimeout(function(){},500);
});
animeImagesLink.click(function(e)
{
e.preventDefault();
active3.hide();
active1.show();
animeImagesLink.hide();
animeImagesText.show();
active2.slideUp(400);
animeImages.slideDown(400);
active1 = animeImagesLink;
active2 = animeImages;
active3 = animeImagesText;
setTimeout(function(){},500);
});
animeVideosLink.click(function(e)
{
e.preventDefault();
active3.hide();
active1.show();
animeVideosLink.hide();
animeVideosText.show();
active2.slideUp(400);
animeVideos.slideDown(400);
active1 = animeVideosLink;
active2 = animeVideos;
active3 = animeVideosText;
setTimeout(function(){},500);
});
});

This is how I did it:
button1.click(function (e) {
if (animation == 0) {
animation = 1;
button2text.hide();
button2.show();
button1.hide();
button1text.show();
button2click.fadeOut(400, function () {
animation = 0;
});
setTimeout(function () {
button1click.fadeIn(500);
}, 500);
}
});
Have a look at the JSFiddle
What I did was define a variable animation. Either set of code is allowed to execute if animation is 0. Else they do not execute. This gives them exclusive rights to execute their procedure.

Reading and writing values from form doesn't work

I have a code sample where I want to read some data from input fields and write that data to a different div.
In first section the code works properly, but in 2nd section the value is not shown. I used the alert function to check that wether value is received or not. The value is received but not shown.
What is wrong with my code? (below)
function preview() {
$(".preview_block").fadeIn(1000);
$("body").css("overflow","hidden");
$(".preview_block").css("overflow","auto");
/*======================Value fetch for personal details=======================*/
var fastname1 = document.forms["myform"]["fastname"].value;
if(fastname1==""){fastname1="---null---"}
var lastname1 = document.forms["myform"]["lastname"].value;
if(lastname1==""){lastname1="---null---"}
var sex1 = document.forms["myform"]["radio"].value;
if(sex1==""){sex1="---null---"}
var clgid1 = document.forms["myform"]["clgid"].value;
if(clgid1==""){clgid1="---null---"}
var dob1 = document.forms["myform"]["dob"].value;
if(dob1==""){dob1="---null---"}
var fname1 = document.forms["myform"]["fname"].value;
if(fname1==""){fname1="---null---"}
var mname1 = document.forms["myform"]["mname"].value;
if(mname1==""){mname1="---null---"}
var gname1 = document.forms["myform"]["gname"].value;
if(gname1==""){gname1="---null---"}
var mobno1 = document.forms["myform"]["mobno"].value;
if(mobno1==""){mobno1="---null---"}
var pmobno1 = document.forms["myform"]["pmobno"].value;
if(pmobno1==""){pmobno1="---null---"}
var mail1 = document.forms["myform"]["mail"].value;
if(mail1==""){mail1="---null---"}
var addr11 = document.forms["myform"]["addr1"].value;
if(addr11==""){addr11="---null---"}
var addr21 = document.forms["myform"]["addr2"].value;
if(addr21==""){addr21="---null---"}
var city1 = document.forms["myform"]["city"].value;
if(city1==""){city1="---null---"}
var state1 = document.forms["myform"]["state"].value;
if(state1==""){state1="---null---"}
var pcode1 = document.forms["myform"]["pcode"].value;
if(pcode1==""){pcode1="---null---"}
var ps1 = document.forms["myform"]["ps"].value;
if(ps1==""){ps1="---null---"}
var po1 = document.forms["myform"]["po"].value;
if(po1==""){po1="---null---"}
var country1 = document.forms["myform"]["country"].value;
if(country1==""){country1="---null---"}
document.getElementById("p1").innerHTML = fastname1;
document.getElementById("p2").innerHTML = lastname1;
document.getElementById("p3").innerHTML = sex1;
document.getElementById("p4").innerHTML = clgid1;
document.getElementById("p5").innerHTML = dob1;
document.getElementById("p6").innerHTML = fname1;
document.getElementById("p7").innerHTML = mname1;
document.getElementById("p8").innerHTML = gname1;
document.getElementById("p9").innerHTML = mobno1;
document.getElementById("p10").innerHTML = pmobno1;
document.getElementById("p11").innerHTML = mail1;
document.getElementById("p12").innerHTML = addr11;
document.getElementById("p13").innerHTML = addr21;
document.getElementById("p14").innerHTML = city1;
document.getElementById("p15").innerHTML = state1;
document.getElementById("p16").innerHTML = pcode1;
document.getElementById("p17").innerHTML = ps1;
document.getElementById("p18").innerHTML = po1;
document.getElementById("p19").innerHTML = country1;
/*======================Value fetch for XII standered details=======================*/
var qualification1 = $('#qualification option:selected').html();
if(qualification1==""){qualification1="---null---"}
var q1_board1 = $('#q1_board option:selected').html();
if(q1_board1==""){q1_board1="---null---"}
var clg_nm1 = document.forms["myform"]["clg_nm"].value;
if(session1==""){session1="---null---"}
var regno1 = document.forms["myform"]["regno"].value;
if(regno1==""){regno1="---null---"}
var yr_reg1 = document.forms["myform"]["yr_reg"].value;
if(yr_reg1==""){yr_reg1="---null---"}
var rollno1 = document.forms["myform"]["rollno"].value;
if(rollno1==""){rollno1="---null---"}
document.getElementById("q1").innerHTML = qualification1;
document.getElementById("q2").innerHTML = q1_board1;
document.getElementById("q3").innerHTML = clg_nm1;
document.getElementById("q4").innerHTML = regno1;
document.getElementById("q5").innerHTML = yr_reg1;
document.getElementById("q6").innerHTML = rollno1;
}

We Keep Coding

JavaScript is the programming language of the Web.

Javascript & JQuery odd issue or what did I do wrong? - javascript

You're misusing .val() $(thatrate).val($(thisrate).val()); $(thatservice).val($(thisservice).val()); The new value goes inside the parentheses.

Related

Function call within a function not working

Function keeps return NaN

document.getElementById("toai").innerHTML = document.getElementById("toai").value

Javascript mutiple onClick() functions can run at once when need only 1 at a time

Reading and writing values from form doesn't work

Categories

Resources