JavaScript - Retrieve Multiple Strings With Jquery Post

You've probably seen this many times with two dynamic linking select boxes that deals in form or another deal with countries and then cities for the second one or something similar well I have another question about that. I've looked at a few others and well their coding is so different then mine that I don't want to use code for my own project that I don't understand in case I need to reuse it for some other reason down the road.

The user selects a country and with the users selection it passes the countryid as a variable through jquery's ajax fuction as a post parameter to a php process page in which it goes to a table and matches the country id with the db field called country_id in the arenas table. With all the records that matches that countryid it selects the arena name and city that the arena is in and displays it as an option tag now I'm trying to figure out with muliple entries how can I pass the results back to the form page and insert it into the arenas dropdown box.

Following is my coding separated out for you. I only included the necessary parts. All help would be greatly appreciated.

form page
Code:

$('#countryid').change(function() {
      var countryid = $("select#countryid").val();
      var dataString = 'countryid='+ countryid;
      $.ajax({
        type: "POST",
        url: "processes/booking.php",
        data: dataString,
        success: function() {
            
        }
        });  
    });
<div class="field required">
    			<label for="countryid">Country</label>
                <select class="dropdown" name="countryid" id="countryid" title="Country">
                   <option value="0">- Select -</option> 
                    <?php
                    $query = 'SELECT id, countryname FROM countries';
                    $result = mysqli_query ( $dbc, $query ); // Run The Query
                    while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) 
                    {
                        print "<option value=\"".$row['id']."\">".$row['countryname']."</option>\r";
                    }
                    ?>
                </select>
    			<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>
            <div class="field required">
    			<label for="arena">Arenas</label>
                <select class="dropdown" name="arenas" id="arenas" title="Arenas">
                </select>
    			<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>

php process page

PHP Code:
$countryid = (int)$_GET['countryid'];
$query = "SELECT * FROM `arenas` WHERE `country_id` = '$countryid'";
$result = mysqli_query ($dbc, $query);
while ($row = mysqli_fetch_array($dbc, $result))
{    
    echo '<option value="'.$row['arena'].'">'.$row['arena'].' - '.$row['city'].'</option>\n';
} 

So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes:


Id be very gratefull if someone would help me out with this one.

All related code can be found bellow (the ones that should be needed anyways):

This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked
Code:

$(document).ready(function(){
	//References
	var change = $("#menu li a");
	var loading = $("#loading");
	var content = $("#content");
	
	//Manage click events
	change.click(function(){
		//show the loading bar
		showLoading();
		//load selected section
		if(this.id == "home")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/index.php", hideLoading);
			content.slideDown();
		}
		else if(this.id == "secondpage")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/secondpage.php", hideLoading);
			content.slideDown();
		}
		else
		{
			//hide loading bar if there is no selected section
			hideLoading();
		}
	});

	//show loading bar
	function showLoading(){
		loading
			.css({visibility:"visible"})
			.css({opacity:"1"})
			.css({display:"block"})
		;
	}

	//hide loading bar
	function hideLoading(){
		loading.fadeTo(1000, 0);
	};
});

Heres the structure of the menu/content
Code:

<ul id="menu">
<li><a id="home" class="normal" href="#Home"></a></li>
<li><a id="secondpage" class="normal"  href="#Secondpage"></a></li>		
</ul>

<div id="content">
<ul id="sec-menu">
<li><a id="link1" class="normal" href="#">Link1</a></li>
<li><a id="link2" class="normal"  href="#">Link2</a></li>		
</ul>
</div>

Heres the code that jquery history plugin uses in demo for ajax
Code:

jQuery(document).ready(function($) {
        function load(num) {
            $('#content').load(num +".html");
        }

        $.history.init(function(url) {
                load(url == "" ? "1" : url);
            });

        $('#ajax-links a').live('click', function(e) {
                var url = $(this).attr('href');
                url = url.replace(/^.*#/, '');
                $.history.load(url);
                return false;
            });
    });

hi, i have a jquery problem...

this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above:
(it is not working the tab actions, the slideout works...)
http://www.benjaminsterling.com/wp-c...es/sidetab.htm

the javascript code is the above:
PHP Code:
var jqsideTabs;
var tabs, h = 50, r = 0,ra = 0;
$(document)
.ready(function(){
    jqsideTabs = $('#sideTabs').addClass('closed');
    
    tabs = jqsideTabs
    .find('.tab h3')
    .clone()
    .appendTo(jqsideTabs)
    .each(function(i){
        var that = $(this), cls = '',ow,newThis, newEl;
        
        if( i == 0 ) cls = ' active';
        newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>');
        that.replaceWith(newEl);
        
        ow = newEl.outerWidth();
        
        if( i == 0 ) ra = ow;
        else r = ow;
        
        h = newEl.css({'top':h , 'right': -ow }).height() + h;
        
        newThis = newEl.get(0);
        newThis.jq = newEl;
        newThis.i = i;
        
        newEl.click(function(){
            var el = this.jq;
            
            if( jqsideTabs.hasClass( 'closed' ) ){
                jqsideTabs.removeClass('closed');
            }
            else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){
                jqsideTabs.addClass('closed');
            }
            
            el
            .siblings()
                .removeClass('active')
                .css({'right': -r })
            .end()
            .addClass('active')
            .css({'right': -ra });
            
            tabs.eq( this.i ).show().siblings('.tab').hide();
            
            return false;
        });
    })
    .end()
    .parent()
        .eq(0)
        .addClass('active')
    .end()
        .filter(':not(:eq(0))')
        .hide()
    .end();
    
    jqsideTabs.bind("mouseleave",function(){
        jqsideTabs
        .animate({left:-310}, 'fast', function(){
            jqsideTabs.addClass('closed').removeAttr('style');
        });
    });
}); 


and the html file is:
[HTML]
<div id="sideTabs">

<div class="tab">
<h3>Tab 1</h3>
<div class="gut">
<p>Some text</p>
</div>
</div>
<div class="tab">
<h3>Tab 2</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
<div class="tab">
<h3>Tab 3</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
</div>
[/HTML]
the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content)....

can anyone help...please.....

i keep getting the error

GET http://code.jquery.com/jquery.min.map net::ERR_TOO_MANY_REDIRECTS
& Failed to load resource: net::ERR_TOO_MANY_REDIRECTS

when i load my page...and the havascript doesn't work properly on ym page...how do i resolve this.

thanx in advance

var s="attr"
var i=$(s)
// jQuery(elem).attr(attr,eval("elm"+attr));
jQuery(elem).$(s)(attr,eval("elm"+attr));//i tried this.

how to assign a variable name in the above code(in place of s) so that i need to add an attribute to the element "elem".

How do I join strings? I tried below but get an error.

var a += document.getElementById("PICKUP_TYPE").value + "~";
var a += document.getElementById("PICKUP_ADDRESS").value + "~";
var a += document.getElementById("PICKUP_ADDRESS2").value + "~";

I'm new at JavaScript and am trying to figure out a simple text calculator as seen on a science project website.

The project says the final program should calculate:
1. the number of sentences contained in the text,
2. the number of words in each sentence,
3. the number of letters in each word,
4. the average number of words per sentence, and
5. the average word length.

I have pretty much everything (I think) but am being completely stumped by item number 2 and item number 4. The code is below.

Can anyone help me understand what I should be doing for point number 2 and 4? I understand how to calculate and display the length of an item in an array and return it's values as 5,6,7,8 etc where the value is the length of the word, but i can't grasp how to calculate the number of items in an array to read 2,5,9 where the values are the number of words per each sentence...so confused!

Below is my code...apoligies if it's sloppy...it's my first javascript code experience
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Count</title>
 
	 Code:

	
<script type="text/javascript">

function callText(mainText, stnCount, wdsPerStn, letPerWd, avgWdPerStn, avgWdLen, testFieldWds, testFieldStnc){
	var textWords = mainText.value.split(/\s/);//splits into words by each space.
	var textSent = mainText.value.split('.');//splits into sentences by each period.
	
	var nWords = new Array(textWords.length);
		var totalLetters = 0;
		for (i = 0; i < textWords.length; i++)
			{
				nWords[i] = textWords[i].length;
				totalLetters += textWords[i].length;	
			}
			
	var nSent = new Array(textSent.length);
	var totalSent = 0;
		for (i = 0; i < textSent.length; i++)
			{
				nSent[i] = textSent[i].length;
				totalSent += textSent[i].length;	
			}
/*	var b,a=0;
	var my_array = new Array(nSent);
	for(b=0;b<my_array.length ;b++)
		{
		if(my_array[b]!="")
		{
			a++;
		}
		} 
*/	
	var newStr = nWords.substr(0).length;
	stnCount.value = textSent.length - 1;
	wdsPerStn.value = 'wdsPerStn';
	letPerWd.value = nWords.join(', ')
	avgWdPerStn.value = 'avgWdPerStn'
	avgWdLen.value = totalLetters / textWords.length;
	testFieldWds.value = 'testFieldWds';
	testFieldStnc.value = 'testFieldStnc'
	
}
	
function clearForm(form){
	form.inputArea.value = '';
	form.cnStn.value = '';	
	form.cnWdsStn.value = '';	
	form.cnLtrWds.value = '';	
	form.avWdsStn.value = '';	
	form.avWdLen.value = '';	
	form.wrds.value = '';
	form.stces.value = '';
	
}
</script>


<form action="" method="post" name="textForm">
<p><textarea name="inputArea" cols="80" rows="5"></textarea></p>
<p><input name="calculate" type="button" value="Calculate" onclick="callText(inputArea, cnStn, cnWdsStn, cnLtrWds, avWdsStn, avWdLen, wrds, stces )" />  <input name="clearform" type="button" value="Clear" onclick="clearForm(form)" /></p>
<table width="325" border="0">
  <tr>
    <td align="right">#of Sent</td>
    <td><input name="cnStn" type="text" /></td>
  </tr>
  <tr>
    <td align="right"># of Words in Sent</td>
    <td><input name="cnWdsStn" type="text" /></td>
  </tr>
  <tr>
    <td align="right"># of Letters Per Word</td>
    <td><input name="cnLtrWds" type="text" /></td>
  </tr>
  <tr>
    <td align="right">Avg Words Per Sentence</td>
    <td><input name="avWdsStn" type="text" /></td>
  </tr>
  <tr>
    <td align="right">Average Word Length</td>
    <td><input name="avWdLen" type="text" /></td>
  </tr>
    <tr>
    <td align="right">Word Array</td>
    <td><input name="wrds" type="text" /></td>
  </tr>
    </tr>
    <tr>
    <td align="right">Sentence Array</td>
    <td><input name="stces" type="text" /></td>
  </tr>

</table>


</form>
</head>

<body>




</body>
</html>

Okay so I have this code for HMTL5 Canvas, however this is a JavaScript directed question not a Canvas question.

Code:

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(0,400);
cxt.lineTo(50,a);
cxt.lineTo(100,b);
cxt.lineTo(150,390);
cxt.lineTo(200,300);
cxt.lineTo(250,285);
cxt.lineTo(300,299);
cxt.lineTo(350,250);
cxt.lineTo(400,325);
cxt.lineTo(450,275);
cxt.lineTo(500,300;);
cxt.stroke();

</script>

That will draw a line graph, however I want to get the coordinates from a variable in the URL. So it may be example.com/a=500&b=600 . How would I retrieve these two variables and then insert in to they're respective places?

Any help greatly appreciated, please make it as simple as possible - I'm good with my PHP now but JavaScript is all new

Hello,

A quick summary to inform you on what I'm trying to accomplish and then the question. If you want to skip to the question first, I have it in red letters lower down. Just figured I'd answer the "why are you doing it this way" question first.

I am writing a tool in JavaScript in which a user selects various options via checkboxes and then a pre-engineered scenario image for a product matching those selections is displayed. Here is the basic workflow of the code:

1. The code runs through the checkboxes and based on whether the boxes are checked or not, adds a value of "1" or "0" to a string. There are some dashes added into the string to visually divide some categories of options. Here is an example of the resulting string: 0-0011100-101100
2. A variable named scenarioID holds the value of the resulting string. A switch statement is run which assigns a name to the scenario based on the scenario ID. Here is an example:
PHP Code:
switch(scenarioID){
case "0-0011100-101100":
var scenarioName="Scenario 1";
break;
} 


3. The scenarioName variable is then used to pull up an image with the corresponding name. For example, if the scenarioName variable has a value of "Scenario 1" then an image named "Scenario 1" is displayed.

---------------------------------------------
So here is where I am running into an issue:

I have some scenario names that multiple scenario ID's match because they apply whether a specific checkbox is selected or not.

Currently, I am still able to apply the correct name to the scenario by simply having multiple switch statements apply to the same scenario name. For example:
PHP Code:
switch(scenarioID){
case "0-0011100-101100":
var scenarioName="Scenario 1";
break;
case "0-1110011-101101":
case "1-1110011-101101":
var scenarioName="Scenario 2";
break;
} 


However, I have some scenarios in which up to 3 options may apply whether or not they are checked. This means that I have to have 8 different switch cases (scenario ID's) for a single scenario name.

Is there a way for me to wildcard the switch cases so that I can specify which items don't matter for a scenario? Something like the following example?
PHP Code:
switch(scenarioID){
case "0-0011100-101100":
var scenarioName="Scenario 1";
break;
case "*-1110011-101101":
var scenarioName="Scenario 2";
break;
} 

Hi All,

I'm trying to convert a string based on the contents of another string. For example, I have two strings - "Purple" and "Orange" and a variable "P" - I want the script to look at the word "Purple" and everytime is sees the letter "P", assign this to a third variable (result variable) - if the letter it's looking at is not a "p", I want it to take that character from "Orange" and add it to the result string. So the result would be "Prapge". This is the code I have so far, and it doesn't work, absolutely stumped as to why ...

Code:

	function fillInChar(targetString, otherString, newChar)
	{
		var splitTarget = targetString.split('');
		var splitOther = otherString.split('');
		var resultArray = newArray(splitTarget.length);
		var holdVar = '';
			
			for (var position = 0; position < splitTarget.length; position = position + 1)
			{
				if (splitTarget[position] != newChar)
				{
					var holdVar = splitOther[position];
					resultArray[position] = holdVar
				}
				else
					{
						resultArray[position] = newChar
					}
			}
			return resultArray
	}
	
document.write('IF VISIBLE - LOOP IS VIABLE' + '<BR>')

var testVar = fillInChar('purple', 'orange', 'p');
document.write('HELLO WORLD!!! .... ' + testVar);

Hi,

I know virtually nothing about js so here goes:

I use the following script:
Code:

<script type="text/javascript">var showNav = false;var params='clubID=1784&compID=8041&leagueTable=y&orderTBCLast=Y&colour=147C99';var colour = '147C99';</script>

The variable which needs to be called from another page is 'compID' - as I have about 20 competitions rather than hard-coding each page I hoped to generate this from the following:

infocus/respage.php?cid=8041 <--- where I can change the compID from the 'calling' page.

In my absolute naivety I thought I could simply change the code to this:

Code:

<script type="text/javascript">var showNav = false;var params='clubID=1784&compID=cid&leagueTable=y&orderTBCLast=Y&colour=147C99';var colour = '147C99';</script>

But as the learned among you will realise this just doesnt work - any help appreciated!

I'm trying to write a pi calculator that shows a comparison of the calculated value to the actual value. It works, but the output of the comparison shows only the first two decimal spots, followed by two 9s.

Why is it showing two 9s and how can I make it more precise?

Code:

<head>
 <title>
  Pi Calculator
 </title>
 <script language="JavaScript">
  function calcpi(digitsn) {
   p = 1;
   s = 0;
   for (c = 3; c < digitsn; c += 2) {
    if (s == 0) {
     p -= 1/c;
     s = 1;
    } else {
     p += 1/c;
     s = 0;
    }
   }
   p *= 4;
   return p;
  }

  function hid(input) { //Highlight Incorrect Digits
   pi = "3.14159265358979323846".split('');
   input = input.toString().split('');
   result = "";

   for (c = 0; c < input.length; c++) {
    if (input[c] != pi[c]) {
     //result += "; " + input[c] + "!=" + pi[c];
     result += "<span style='background-color:red'>" + input[c] + "</span>";
    } else {
     result += input[c];
    }
   }

   return result;
  }
 </script>
</head>
<body>
 Repeat algorithm x many times:<br/>
 <input type="text" value="10000" id="digitsx"/><br/>
 <input type="button" onClick="document.getElementById('answer').value=calcpi(parseInt(document.getElementById('digitsx').value)).toString()" value="Calculate"/><br/>
 Result:<br/>
 <input type="text" readonly id="answer"/><br/>
 Correct value:<br/>
 <input type="text" readonly value="3.14159265358979323846"/><br/>
 <input type="button" value="Compare" onClick="document.getElementById('comparison').innerHTML = hid('3.1499')"/>
 <div id="comparison"/>
</body>

Hello, I very new to this language and I still feel like I'm not grasping it... But, anyways, I'm doing a thing for school and I have to let the user input a string. I need to save the string and turn it into an array. For every word that is less than five letters I put "little" at the beginning of the word and for every word that is more than five letters I put "big" at the end of each word. Then I need to return the new string into output. I think I wrote the code really incorrectly, so any tips/advice would be much appreciated! Also, I don't understand adding user input into a code if that makes sense. The tutorials/lessons I've been looking at all say to put information into an array first and then mess with it. But, what if you don't have information in the array until the user puts it in? And once they enter it, then you mess with what they entered. I can't seem to get how to do that. Thank you for your time

Code:

function texter(newText){
	var oldHTML = document.getElementById('outputPrompt').innerHTML;
	document.getElementById('outputPrompt').innerHTML = newText+"<br />"+oldHTML;
	console.log(newText);
}

function menuTwo(){
	var userInput = document.getElementById('input').value;
	var correctedInputArray = userInput.toLowerCase().split(" ");
	var mainTwo = new Array([""]);
	for(var i=0; i<correctedInputArray.length; i++){
	var thisWord = correctedInputArray[i];
	var lessFive = 5;
	var moreFive = 6;
	var restOfWord;
	if(lessFive<5){
	mainTwo[i]=thisWord+"-little";
	}else if(moreFive>6){
	mainTwo[i]="big-"+thisWord;
	}
	else{
			
			restOfWord = thisWord.substr(1, thisWord.length-1);
		
		}	
	}
	output = mainTwo.join(" ");
	texter(output);
	}
	
</script>
</head>

<body>
<h1>Document</h1>
<input type='text' id='input'	/>
<input type='button' onclick='menuTwo()' value='submit'/>
<p id='outputPrompt'>Please enter 1,2,3 or exit only</b> </p> 
</body>
</html>

Strings,, Broken Links, and Variables --HELP!

I have a page with over 600 lines of code that I need to fix,
the problem is as such:

The page contains about 200 links, the problem is that the link tags are all messed up,, instead of the URL's they all got replaced with xxxxx

so instead of: <a href="http://mystore.com/product1">product1</a>
it would read: <a href="http://mystore.com/xxxx">product1</a>

each product has to link to it's own page .... i.e:

product1 goes to /mystore.com/product1,,, and so on

I need help writing a script or performing some sort of function, that will take the text in between the <a></a> tags and insert it into it's own tag instead of the xxxxx

so it would see <a href="http://mystore.com/xxxx">BaseBall Gloves</a> and convert that line into <a href="http://mystore.com/BaseBall%20Gloves>BaseBall Gloves</a>

-- OUTPUTS: the ideal way would be if it could replace the existing source (kind of how you can do a find and replace),, if that's not possible, it would need to output all the existing source code with the modified <a> tags to a new window, and then I can copy that code into a new page.

I've tried using regular expressions and different functions but can't get it to work.

I really appreciate your help..

Thanks.