JavaScript - Multiple Array's On One Page - One Image On Text

I can't seem to figure out how to accomplish this. In my website, I would like the user to input text into a single or multiple textbox(es) and then have the contents of the textbox(es) stored to either a variable or an array. Then I would like to have that variable/array compared to other arrays. Basically, the user is searching for items in a database. The user can search for as many or as little items as they want. Then the item(s) will be compared to multiple arrays to find out if what the user wants is in the database.

So for example, let's say the user is searching for recipes that have all or part of these ingredients: chicken, broccoli, lemon, honey. So, there would have been a total of 4 textboxes...one for each ingredient. These ingredients are stored to an array..lets call it ingredient(). In the database of recipes, each recipe has its own array which includes the ingredients needed to make the recipe, we'll call them tag1(), tag2(), and tag3(). Now, I want the array, ingredient(), to be compared to each of the "tag" arrays to see if any of the "tag" arrays include exactly match the ingredient() tag in part or in whole. Is this possible?

I am working on a page where the user will select a location from a dynamically generated dropdown list.

I was able to create the php multidimensional array (tested and working) from a MySql database using the users information at login, but I'm having problems converting it to a javascript multidimensional array. I need to be able to access variables that I can pass to a number of text fields within an html form.

For instance, if a user belongs to a company with multiple addresses, I need to be able to let them select the address they need to prepopulate specific text fields.

php array creation:
Code:

if ($row_locations) 
{ 
	while ($row_locations = mysql_fetch_assoc($locations))  
	{ 
		$mail[$row_locations['comp_id']]=array('mailto'=>$row_locations['mailto'], 'madd'=>$row_locations['madd'], 'madd2'=>$row_locations['madd2'], 'mcity'=>$row_locations['mcity'], 'mstate'=>$row_locations['mstate'], 'mzip'=>$row_locations['mzip'], 'billto'=>$row_locations['billto'], 'badd'=>$row_locations['badd'], 'badd2'=>$row_locations['badd2'], 'bcity'=>$row_locations['bcity'], 'bstate'=>$row_locations['bstate'], 'bzip'=>$row_locations['bzip']);
	} 
}

javascript function - this should create the array and send variables to text fields.
Code:

function updateAddress() {
var mail = $.parseJSON(<?php print json_encode(json_encode($mail)); ?>);
{
if (comp_id in mail) {
document.getElementById('mailto').value=mail.comp_id.mailto.value;
document.getElementById('madd').value=mail.comp_id.madd.value;
document.getElementById('madd2').value=mail.comp_id.madd2.value;
document.getElementById('mcity').value=mail.comp_id.mcity.value;
document.getElementById('mstate').value=mail.comp_id.mstate.value;
document.getElementById('mzip').value=mail.comp_id.mzip.value;
} else {
document.getElementById('mailto').value='';
document.getElementById('madd').value='';
document.getElementById('madd2').value='';
document.getElementById('mcity').value='';
document.getElementById('mstate').value='';
document.getElementById('mzip').value='';
}
}
}

Where is this breaking?
Thanks in advance.

Hi all,

Thanks for reading. I'm having an issue trying to accomplish the following -

I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after.

This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly?

Code:

<script language="javascript">

fields = 1;

function addMore() {

if (fields = 1) {

document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";

fields = 2;

} else if (fields = 2) {

document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;

} else {

document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;

}

}

</script>

Here is the code in my HTML -

Code:

<input type="text" name="field1" size="25" /> <span>Field 1.</span>
<div id="addedMore"></div>
<p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p>

Thank you very much.

I have a web page that opens urls in one seperate window from an array that uses settimeout to slow the loading. Is there coding i can use to replace settimeout that will allow the next url to load after each 1 loads. Here is what i have now.

Code:

var win = null;
var i = 0;
  var links = [
"http://www.ageofchampions.com/game/gift_accept.php?source=190&sourceu=505119169&wid=53",
"http://www.ageofchampions.com/game/gift_accept.php?source=190&sourceu=505119169&wid=57",
"http://www.ageofchampions.com/game/gift_accept.php?source=190&sourceu=505119169&wid=194",
"http://www.ageofchampions.com/game/gift_accept.php?source=190&sourceu=505119169&wid=196",
"http://www.ageofchampions.com/game/gift_accept.php?source=190&sourceu=505119169&wid=242",
"http://www.ageofchampions.com/game/gift_accept.php?source=190&sourceu=505119169&wid=286",
"http://www.ageofchampions.com/game/gift_accept.php?source=190&sourceu=505119169&wid=335",
  ];

function aufruf(idx) {
  if(!win){
    win = window.open();
  };
 
  win.location.href = (links[idx]);
 
  if(idx < (links.length - 1)) {
    idx++;
        setTimeout('aufruf(' + idx + ')', 8000);
    //or setTimeout('aufruf(idx)', 8000);
  };
};

What's the most efficient way of me getting all the IDs from the following array (ideally returned in its own array) when the colour = 1? I know I could use a for loop with an if statement in it, but wondered if there was anything better in terms of speed and/or neat code? Thanks in advance.

var directions = [
{
id: 1,
towards: "Manchester",
colour: 1
},
{
id: 2,
towards: "Sheffield",
colour: 1
},
{
id: 3,
towards: "London",
colour: 2
},
{
id: 4,
towards: "Glasgow",
colour: 2
},
{
id: 5,
towards: "Leeds",
colour: 3
},
{
id: 6,
towards: "Derby",
colour: 3
}
];





Reply With Quote




12-19-2014, 11:34 PM #2
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts

Why not use a filter?
Code:

var chosen = directions.filter( function(val) { return val.colour == 1; } );

Of course, that does a loop behind the scenes, but it should be faster than a JS for loop.

I have the following script that currently returns 4 of the same images. I can't wrap my head around how to get it to return 4 random images (out of the 7 in this example)? Also the links aren't working?

---
Code:

var imagenumber = 7 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1;

images= new Array
images[1] = "image1.jpg"
images[2] = "image2.jpg"
images[3] = "image3.jpg"
images[4] = "image4.jpg"
images[5] = "image5.jpg"
images[6] = "image6.jpg"
images[7] = "image7.jpg"
var image = images[rand1]

links= new Array
links[1] = "link1.html"
links[2] = "link2.html"
links[3] = "link3.html"
links[4] = "link4.html"
links[5] = "link5.html"
links[6] = "link6.html"
links[7] = "link7.html"
var link = links[rand1]

document.write('<div id="image-1"><a href="' + link + '"><img src="' + image + '"></a></div><div id="image-2"><a href="' + link + '"><img src="' + image + '"></a></div><div id="image-3"><a href="' + link + '"><img src="' + image + '" border="0"></a></div><div id="image-4"><a href="' + link + '"><img src="' + image + '"></a></div>')

---
Any help would be greatly appreciated!

Hi

I have created the following effects on the images seen here http://techavid.com/design/test3.html . You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code.

Here code I have now....

Code:

<style type="text/css" media="screen">

#wrapper {
 background: url('_assets/images/sun-inactive.p') no-repeat #777eee;
  width: 470px;
  margin: 0 auto;
}

a#sun{
  background: url('_assets/images/sun-inactive.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
  float: left;
  
}

a#sun:hover,
a#sun.active {
  background: url('_assets/images/sun.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
}

a#plane {
  background: url('_assets/images/plane-inactive.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
  float: left;
}

a#plane:hover,
a#plane.active {
  background: url('_assets/images/plane.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
}

a#nano {
  background: url('_assets/images/nano-inactive.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
  float: left;
}

a#nano:hover,
a#nano.active {
  background: url('_assets/images/nano.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
}

#popuptext {
float: left;
margin: -30px 0 0 0;
padding: 0 0 0 0px;
font-size: 11px;
}

#popuptext a {
color: #ff6600;
padding: 0 30px; 
}




</style>


</head>
<body>

<div id="wrapper">
<div id="navigation">
  <a id="sun" href="#"></a>
  <a id="plane" href="#"></a>
  <a id="nano" href="#"></a>
</div>

<div style="clear:both"></div>
  <div id="popuptext">1st: <a href="#">Sun</a>
2nd: <a href="#">Airplane</a>
3rd: <a href="#">Nano</a> 

</div>

</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

  // target each link in the navigation div
  $('#navigation a').click(function() {
    // link that you clicked
    clicked = $(this).attr('id');

    // make sure that all the others are not active
    // except for the clicked one
    $('#navigation a').each(function() {
      if ($(this).attr('id') == clicked) {
        $(this).addClass('active');
      } else {
        $(this).removeClass('active');
      }
    });

    // prevent the default link action
    return false;
  });

});
</script>

What jquery or javascript code do I need to do this?

thanks,
chaser

Another homework assignment that I can't quite seem to get to work...

I've been asked to do the following using javascript:
-Create a function named randInt() with one parameter of "size". Declare a variable named "rNum" equal to a random integer between 1 and the value of the size variable. Return the value of the "rNum" varialbe from the function.

-Create a function named getQuote() with one parameter anemd "qNum". The function should create an array named mtQuotes with five quotes; there should be no quote for the array index "0". Return the value of the mtQuotes array for the qNum index.

- In the div element of "quotes" insert a script with the following commands: Declare a variable named "randValue" which is euqal to a random integer between 1 and 5 (use the randInt() function). Declare a variable named "quoteText" containing the quote whose array index value is equal to randValue. Write the value of quoteText to the web page.

Here is what I have...it returns undefined. thanks.

Code:

<html>
<head>

<script type="text/javascript">
function randInt(size) {
	var rNum=Math.ceil(Math.random()*5);
	return(rNum);
}
</script>


<script type="text/javascript">
	function getQuote(qNum);
	var mtQuotes = new Array();
	mtQuotes[0] = "";
	mtQuotes[1] = "I smoke in moderation, only one cigar at a time.";
	mtQuotes[2] = "Be careful of reading health books, you might die of a misprint.";
	mtQuotes[3] = "Man is the only animal that blushes or needs to.";
	mtQuotes[4] = "Clothes make the man. Naked people have little or no influence on society.";
	mtQuotes[5] = "One of the most striking differences between a cat and a lie is that a cat has only nine lives.";
	return mtQuotes[qNum];
</script>
</head>

<body>


     <div id="quotes">
	<script type="text/javascript">
        	var randValue=randInt(5);
	var quoteText=getQuote(randValue);
        	document.write(quoteText);
   	 </script>
   </div>

Hey CF.

I'm not great with JS, but I'm trying to build something pretty simple and even that's out of my league. I have a layout with multiple fields that need to be filled randomly from an array on click.

I have an array with a bit of jQuery that randomly reloads one field on click, but I need multiple fields filled at once from the same item in the array.

Code is below. I grabbed it from a tutorial somewhere, and have made some modifications.

Code:

<Script>
$(document).ready( function() {
    var foodArray = [
        '1',
        '2',
        '3',
        '4',
        '5'
    ];
    $('.foodtype').loadText( foodArray, 10000 ); // ( array, interval )
});
// custom jquery plugin loadText()
$.fn.loadText = function( foodArray, interval ) {
    return this.each( function() {
        var obj = $(this);
        obj.fadeOut( 'slow', function() {
            obj.empty().html( random_array( foodArray ) );
            obj.fadeIn( 'slow' );
        });
        timeOut = setTimeout( function(){ obj.loadText( foodArray, interval )}, interval );
        // reload random text (if not animated) -- entirely optional, can be removed, along with the reload link above (<a href="javascript:;" id="text-reload"><em>randomize</em></a>)
        $("#text-reload").click( function(){
            if( !obj.is(':animated') ) { clearTimeout( timeOut ); obj.loadText( foodArray, interval );} // animation check prevents "too much recursion" error in jQuery
        });
    });
}
//public function
function random_array( aArray ) {
    var rand = Math.floor( Math.random() * aArray.length + aArray.length );
    var randArray = aArray[ rand - aArray.length ];
    return randArray;
}

</script>

That outputs one of the array items into a <span class="foodtype">. What I need is another value next to say "1", eg '1, Blue' and print "Blue" to another span.

Can anyone help?

The other issue I have is the divs are snap resizing, is there a way set them to animate smoothly? The total height will be variable depending on the combinations that display.

Cheers guys, hope someone can help.

hi,
Does any one knows the javascript that read step by step single line from form and then store in array , and that array use 4 further references

Please help i need this Please Please Please

Thanx


Regards
Fawad

i am creating a header for a webpage. the header has two text menus (no images). the first menu (menu A) is like this:

link 1a / link 2a / link 3a

the second menu (menu B) is like this:

link 1b
link 2b
link 3b

i would like to use javascript/css to do the following:

when you rollover link 1a, three things happen: link 1a changes color, link 1b changes color, and and link 1b adds a line of text (so it reads: link 1b : text 1b)

i would also like- and this is where i am having trouble- for the following to happen: when you rollover link 1b, link 1b changes color and adds the additional text, as well as link 1a changes color.

it doesn't seem so bad when i write it out here, but i can't figure out how to do it. any help is appreciated.

hello,

I have a problem changing the value of multiple text boxes, My page contain one text box named "price" and i need to set the value of this box to all other text boxes in the page which they attribute is <input type="text" value="" name="product[xxxx]" id="product"/>
xxxx = random number

the page may contain only one text box id=product or more

i have tried the following code but it only works with multiple text boxes and doesn't work if the page have one text box


Code:

              var price = document.getElementById('price').value;
              var allElements = document.form1.product;
              var len=allElements.length;
              if(allElements.length){
              for (i = 0; i < len; i++){
              allElements[i].value = price;
               }

I'm not a javascript expert so i don't know if this code is the right way to accomplish this.

Thank you very much for your help

I need to replace the captions with simple text for download speed purposes. This is controlled by a piece of Javascript written for me.
I need to change the caption image for a text one.


The site is here

Frank alias effpeetee.

<!-- ** Need help completing the javascript in this example ** -->
Code:

<html>

<head>
<title>Convert ListBox data into 4 Text Boxes</title>
<script language="javascript">
function SplitText (
// NEED HELP WITH THIS CODE
  split text ",";
  convert to ['textbox1','textbox2','textbox3','textbox4']
}
</script>
</head>

<body>
<form name="convert">
<p style="margin: 2px">
<h3>Convert selected data to textboxes</h3>
<!-- SELECT DATA FROM LIST BOX -->
<select size="1" name="ListBox" onChange="SplitText();">
<option value="jim,bob,rick,paul"    >==Row1==</option>
<option value="pete,jack,chris,craig">==Row2==</option>
<option value="mary,jane,lisa,kim"   >==Row3==</option>
</select>
</p>

<h3>In this example say we selected row1</h3>
<!-- THE SELECTED DATA GETS SPLIT AND INSERTED INTO THESE 4 TEXTBOXES -->
<p style="margin: 2px">
<input type="text" name="textbox1" value="jim"><br>
<input type="text" name="textbox2" value="bob"><br>
<input type="text" name="textbox3" value="rick"><br>
<input type="text" name="textbox4" value="paul"><br>
</p>
</form>
</body>

</html>

hi ! i would like to write the code for multiple text box select as shown in the link below:


http://www.downloadplex.com/Mobile/I...ne_284120.html


please see the screen shot 3