JavaScript - Regex Problem Driving Me Nuts!

Hi all I am creating a shopping cart in HTML & JavaScript.

It's very nearly complete but I've hit a brick wall with trying to delete a single item.

Where I list the shopping cart I have a delete button by every item. Here is the code to show that:

Code:

var buttonnode3= document.createElement('input'); // Create a button for each item to delete
			buttonnode3.setAttribute('type','button');
			buttonnode3.setAttribute('name','Delete');
			buttonnode3.setAttribute("value","Delete('"+ItemName[j]+"');");
			buttonnode3.setAttribute("onclick","Delete('"+ItemName[j]+"');"); // for FireFox. This parses through the item name (DelName=item name to delete)
			buttonnode3.onclick = function() {Delete(ItemName[j]);}; // for Internet Explorer. Again, this parses through DelName
			tr.appendChild(buttonnode3);

(The value name is for testing purposes).

As you can see here, it shows fine



But when I click delete, I get an 'undefined' error

Here is the code for the Delete(); function

Code:

function Delete(DelName){ // Create function Delete "DelName" parses through item name

alert(DelName); // testing

	for (var ind=0; ind<ItemName.length; ind++) { // Loop through array
		
		if(ItemName[ind] == DelName){ // Find item to be deleted
			
			ItemName.splice(ind,1); // Delete first record of item name
			Quantity.splice(ind,1); // Delete first record of its quantity
			Sum.splice(ind,1); // Delete first record of its sum
			
			alert('You have removed ' + DelName); // Alert user
			
			document.getElementById("div1").innerHTML=""; // Clear the whole shopping cart
			document.getElementById("div2").innerHTML="";
			document.getElementById("div3").innerHTML="";
			
			ViewShoppingCart(); // Once the cart is cleared, there may still be other items so update it again
		
		}
		
	}
}

I've tried doing this var DelName = ItemName[j]; and then change the buttonnode to show DelName and it works however DelName always gets set to the last Item in the array. For example, you delete Dinosaur but it deletes Firemans hat.

Can anyone help me out of this hole?

I'm sorry if this is in the wrong section...

I am not sure how to do it...

Here is the coding:
Code:

function displayTitle(name, x, y){
return name + " <a href='#' onClick='showDirectionsDialog(\""+name+"\", "+x+", "+y+")'><img src='images/direction.png' alt='Get driving directions'/></a>";
}

function showDirectionsDialog(name, x, y){
var d=dijit.byId("dialogDirections");

d.set("title", "Get directions to \""+name+"\"");

document.getElementById("txtToX").value=x;
document.getElementById("txtToY").value=y;

d.show();
}

function getDirections(){
var frmX=document.getElementById("txtFrmX").value;
var frmY=document.getElementById("txtFrmY").value;
var toX=document.getElementById("txtToX").value;
var toY=document.getElementById("txtToY").value;

var routeData = new Route;
routeData.routeStops = frmX+","+frmY+";"+toX+","+toY;
routeData.routeMode = "DRIVE";
routeData.avoidERP=0;
routeData.routeOption = "Shortest"; 
routeData.GetRoute(showDirections);
}

function showDirections(routeResults){
if (routeResults.results=="No results"){
alert("No directions found, please try other location.");
return;
}

}

Here is the coding I have now:
Code:

function getDirections() {

var routeData = new Route;
routeData.routeStops = document.getElementById('txtTheme').value;
routeData.routeMode = document.getElementById('txtOtptFlds').value;
routeData.avoidERP = document.getElementById('txtExtent').value;
routeData.routeOption = "Shortest"; 
routeData.GetRoute(showRouteData)
}

function showRouteData(routeResults)
{
if (routeResults.results=="No results"){
alert("No Route found, please try other location.")
return
}
else if (routeResults.results=="Stops more than nine"){
alert("Number of stops exceed than nine");
return;
}
directions = routeResults.results.directions[0];

directionFeatures = directions.features;

var routeSymbol = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color([0,0,255,0.5])).setWidth(4);

var mergedGeometry = new esri.geometry.Polyline()

mergedGeometry.addPath(routeResults.results.routes.features[0].geometry.paths[0])
OneMap.map.graphics.clear();
OneMap.map.graphics.add(new esri.Graphic(mergedGeometry, routeSymbol)); 
//Display the total time and distance of the route
document.getElementById("results").innerHTML = "<br /> &nbsp; Total distance: " + directions.summary.totalLength + "<br /> &nbsp; Total time: " + directions.summary.totalTime;

//List the directions and create hyperlinks for each route segment
for (var i=0;i<directions.features.length;i++)
{
var feature=directions.features[i]
document.getElementById("results").innerHTML= document.getElementById("results").innerHTML + '<br><u>' + parseInt(parseInt(i)+1) + ". " + feature.attributes.text + " (" + feature.attributes.length + ", " + feature.attributes.time + ")</u>" 

}
}

I am not sure how to integrate my codings into the other codings.

There is a name of the place (lets say London) and a clickable icon by the side. When I click the icon, a dojo toolkit dialog box appear for me to enter my location (the other place, London, will be displayed in the dialog box) Click "Go" to get the directions...

I wish to have the directions also placed in a dialog box too...

Hi.
i,m trying to make a map who show me as position A and a target adress as point B.I have made it so i can choose adress a and adress b from a dropdown but i want to automaticly load my position as possition A then choose position B from a dropdownlist. How can i do this ?

Thanks

Natrox



<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<!--
Include the maps javascript with sensor=true because this code is using a
sensor (a GPS locator) to determine the user's location.
See: http://code.google.com/apis/maps/doc...ecifyingSensor
-->
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=true&language=nb_NO"></script>
<!--<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&language=nb_NO">
--> <script type="text/javascript">
var map;
var directionDisplay;
var directionsService;
var stepDisplay;
var markerArray = [];
var initialLocation;
//var oslo = new google.maps.LatLng(59.947639, 10.884469);
var browserSupportFlag = new Boolean();
function initialize() {
directionsService = new google.maps.DirectionsService();
// Create a map and center it on Manhattan.
var oslo = new google.maps.LatLng(59.947639, 10.884469);
var myOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: oslo
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Create a renderer for directions and bind it to the map.
var rendererOptions = {
map: map
}
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions)

// Instantiate an info window to hold step text.
stepDisplay = new google.maps.InfoWindow();
}
function calcRoute() {

// First, remove any existing markers from the map.
for (i = 0; i < markerArray.length; i++) {
markerArray[i].setMap(null);
}
// Now, clear the array itself.
markerArray = [];

// Retrieve the start and end locations and create
// a DirectionsRequest using DRIVING directions.
var start = document.getElementById("sart").value;
var end = document.getElementById("end").value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
// Route the directions and pass the response to a
// function to create markers for each step.
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var warnings = document.getElementById("warnings_panel");
warnings.innerHTML = "<b>" + response.routes[0].warnings + "</b>";
directionsDisplay.setDirections(response);
showSteps(response);
}
});
}

function showSteps(directionResult) {
// For each step, place a marker, and add the text to the marker's
// info window. Also attach the marker to an array so we
// can keep track of it and remove it when calculating new
// routes.
var myRoute = directionResult.routes[0].legs[0];

for (var i = 0; i < myRoute.steps.length; i++) {
var marker = new google.maps.Marker({
position: myRoute.steps[i].start_point,
map: map
});
attachInstructionText(marker, myRoute.steps[i].instructions);
markerArray[i] = marker;
}
}

function attachInstructionText(marker, text) {
google.maps.event.addListener(marker, 'click', function() {
// Open an info window when the marker is clicked on,
// containing the text of the step.
stepDisplay.setContent(text);
stepDisplay.open(map, marker);
});
}

// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);

var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Du er her.'
});

map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}


function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}

var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};

var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
function detectBrowser() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map_canvas");

if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '600px';
mapdiv.style.height = '800px';
}
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<div style="text-align:center">
<select id="start">
<option value="625 8th Avenue, New York, NY, 10018">Port Authority Bus Terminal</option>
<option value="staten island ferry terminal, new york, ny">Staten Island Ferry Terminal</option>
<option value="101 E 125th Street, New York, NY">Harlem - 125th St Station</option>
</select>

<select id="end" onchange="calcRoute();">
<option value="Brubakkveien 14 1083 Oslo">Sigvartsen proffavdeling</option>
<option value="Sonja Henies plass 3, 0185 Oslo">Oslo plaza</option>
<option value="moma, New York, NY">MOMA</option>
<option value="350 5th Ave, New York, NY, 10118">Empire State Building</option>
<option value="253 West 125th Street, New York, NY">Apollo Theater</option>
<option value="1 Wall St, New York, NY">Wall St</option>
</select>
</div>
<div id="map_canvas"></div>
<div id="pos"></div>

&nbsp;
<div id="warnings_panel"></div>
</body>
</html>

This has been driving me crazy all day, cant seem to work out what im doing wrong.

Alerts the correct URL
Used document.write and it works
But the redirect command doesnt initiate automatically on click and im not sure why.

Someone help!!


Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>http</title>
<style>
<!--
 p.MsoNormal
	{mso-style-parent:"";
	margin-bottom:.0001pt;
	font-size:11.0pt;
	font-family:"Calibri","sans-serif";
	margin-left:0cm; margin-right:0cm; margin-top:0cm}
-->
</style>

<script type="text/javascript">

function buildstring(form)
{

var text = form.text.value;
var xmljson = form.choice1.value;
var init = 'localhost:1234/PPTX/tr?service=extract&action=extractAll&text=';
var op = '&op=';
var first = init + text + op + xmljson;

var complete = "http://" + first;

alert (complete);

window.location = complete;
	
}



</script>
</head>

<body>

<form method="get" id="urlbuild">

<table>

<tr>
<td>
<h2>URL Builder</h2>
</td>
</tr>

<tr>
<td>
<input type="text" size="100" name="text" value="">
</td>
</tr>
</table>

<table>
<tr>
<td>
<select type="one" name="choice1">
<option value="xml"> XML
</option>
<option value="json"> JSON
</option>
</select>
</td>


<td>
<p>Please choose XML or JSON.</p>
</td>
</tr>
</table>

<table>
<tr>
<td>
<input type="submit" onClick="buildstring(this.form)"> 

</td>
</tr>
</table>


</form>

</body>

</html>

Hi,
I read several examples, tried them all out - and nothing works! Driving me crazy - completely insane! Maybe you guys can help

My problem is simple:

file B.html includes this line:
Code:

<script type="text/javascript" src="B.js" defer="defer"></script>

file B.js is a regular JS file, yet I need to insert a PHP function in it (yeah - I know it will operate server-side before the page reaches the browser). I did something like:
Code:

(some js code)
var user_id = <?php $a=100; $b=200; $c=$a+$b; echo($c);?>;
alert("Your user ID is:" + user_id);
(some more js code)

(What I expect is the browser to see the line as: var user_id = 300; )

Doesn't work. Renaming B.js to B.php did nothing.
What am I doing wrong?

Thanks!

hi...

I'm trying to pass this string and I keep getting the "missing ; before statement error" which I know means I not escaping something or something, but I've tried it every way I can think of and still no dice... any ideas?

Code:

content='<a href onclick="javascript: document.getElementById('searchbox').style.display='inline'">here<\/a> to enter your address' +'<div id="searchbox" display="hidden"><form action="javascript:getDirections()">' +'<input type="hidden" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +'<div>';

thanks in advance...

Greetings,

I have a GMAP2 setup on my website that gives driving directions from Point A to Point B. I want to add functionality that allows a user to alter the directions once the polyline has already been plotted.

Working Example:

Google Driving Directions

My Driving Directions:

Green Traffic Driving Directions

What javascript do I need to tweak to get the line to be draggable?

Thanks in advance for any information and / or assistance.

Sincerely,
Travis Walters

long story short, I have been trying to run a loop, say, 10 times and I know the result I want will be on the first request but it sends all 10 at the same time, over writing the variable for xmlhttp. discovering in my days of attempts that its just the nature of the beast, but I would like ANY way possible to get a response on the 1st pass of the loop in any way possible. But for now, here's a riddle I can't solve, how to make this function return with the response?

Code:

function ajaxRequest(query){
	 
		var response = 'I have not checked yet.';
		var xmlhttp = new XMLHttpRequest();
		xmlhttp.onreadystatechange=function() {
			if (xmlhttp.readyState==4 && xmlhttp.status==200) {
				response = xmlhttp.responseText.trim();
			}
		}
		xmlhttp.open("GET",query,true);
		xmlhttp.send();
		
		return response;
		
	}

It will always instantly say "I have not checked yet." when I would like the response.

I'm okay with it being a 2-5 second delay as long as it doesn't pause the browser like a synchronous request. Even a delay of some sort just before the return would probably do it. In that case, I think I can get the rest.

Thanks much in advance!

I'm trying to make something a lot like a store locator where a user types in their address of origin and submits, then the script compares the driving distances between their entered address and the 4 destination locations that I will store in an array once the page loads.

It's kind of hard to describe. I have a form working to do the distance and driving directions once I know which destination will be chosen. This is what I have so far:
http://rowsdower.freehostia.com/map_test.php

That seems to be working just fine. The problem is that I just can't get anything working that will compare the distance between the origin and each of the options before choosing and displaying directions to the nearest destination. My ultimate goal is to update the list of <options> with PHP and maybe MySQL - though I really don't need this to be large-scale. Then, after the user inputs a starting address if they choose a specific location from the dropdown it will give those directions, otherwise (if the "choose closest location" option is still active) then I will run a comparison of driving distances for each option's address value and store them to an array. Once all locations are read and tested for driving distance I want to take the closest location set that option as selected, and then run the call for driving directions as usual.

I know how to pull the option values, how to set and unset the "selected" attribute, and how to check to see if distances need to be compared. I can figure out how to do just about everything I need EXCEPT for getting the google maps API to play along. I've tried so many dead-end ideas that I have just reset my map code to square one. Any ideas for a script piece to run that will return only the driving distance for a list of locations?

The onclick event listener would be something like this
Code:

Array.prototype.findIndex = function(value){
	var ctr = "";
	for (var i=0; i < this.length; i++) {
		// use === to check for Matches. ie., identical (===), ;
		if (this[i] == value) {
			return i;
		}
	}
	return ctr;
};





// ===== request the directions =====
function getDirections() {
	document.getElementById("directions").style.display="block";  //displays the directions container 
	var saddr = document.getElementById("search1").value;  //the user's origin 
	var daddr = document.getElementById("search2").value;  //the selected destination 
	if (daddr=="Closest Location") {
		var distances = [0];
		for (i=1;i<document.getElementById("search2").options.length;i++) {
			 //setting i=1 so I skip the "closest Location" option... 
			if (document.getElementById("search2").options[i].selected) {
				document.getElementById("search2").options[i].removeAttribute("selected");  // de-select each option as we go just in case... 
			}
			var destination = document.getElementById("search2").options[i].value;  // pulling up the stored address 

			 //run driving directions comparison here then set "daddr" to the address whose driving distance is least 
 			distances[i]=getDrivingDistance(saddr,destination);  /*	<----- I just made this up, I don't really know
										how to get this done but I want it to be as
										simple as this somehow...*/  
		}
		daddr = distances.findIndex(distances.min());  // Finds index of the lowest driving distance 
		document.getElementById("search2").options[daddr].setAttribute("selected","selected");  // marks closest location as selected 
		daddr = document.getElementById("search2").options[daddr];  // sets destination address to same index as least distance index 
	}
	 // at this point I have either the user-defined destination or else the closest destination, so I find the directions... 
	var locale = getLocale();
	var dirOpts = {
		locale: locale,
		getPolyline: true
	};
	if (document.getElementById("walkingDirections").checked) {dirOpts.travelMode = G_TRAVEL_MODE_WALKING;}
	if (document.getElementById("avoidHighways").checked) {dirOpts.avoidHighways = true;}
	if (mapPreserveViewport) {
		dirOpts.preserveViewport = true
	}
	gdir.load("from: "+saddr+" to: "+daddr, dirOpts);
}

I'm going cross-eyed trying to get this working. Does anyone have any ideas for a code blurb to tie this all together? I think everything else should work once I get through the distance iterations but I'm useless with the google maps API...

Should alert '' twice , instead alerts original text
Code:

      text = 'p18=100';
      text = text.replace("(^|&)p100=18.*?(&|$)","")
      alert(text);
      text = text.replace(/(^|&)p100=18.*?(&|$)/g,"")
      alert(text);

tested regex on online tester and it should be OK.

?

I am creating a userscript and trying to take the following:

Arian Foster (Hou - RB)

and end up just with the team name:

Hou

You can't remove by index (which I would be able to do), because it might be K instead of RB or NO instead of Hou. I am assuming that you use Regex and the replace function to do so, but I am struggling with understanding all Regex symbols. Can someone help me with this and explain it briefly? I would appreciate it.

I have this code so far;

PHP Code:
        validatePhone : function(field, caption) {
            phoneNumber = /^[0-9]{11}$/;
            if(phoneNumber.test(field.val())) {
                return true;
            }
            return i18n('phone', caption);
        }, 


It works fine for entering an 11 digit number. However, I want to check that the number starts with either 077, 075, 079 or 078. Also, if the field is empty then it can also be accepted. How would I do this? Thanks

Hi,

I'm using this site Translator Editor - LingoJam
I'm trying to use the regex portion of the site (click regex on the page that link goes to) to create a substitution cipher - a translates to o, etc.

so far I have

Code:

/a/g -> o
/o/g -> u

Theoretically, that'd mean when I typed in "a", it would translate to "o", and when I typed in "o", it would translate to "u".
Trouble is, it doesn't know when to stop. I type in "a" and it immediately returns "u", because it substitutes the "o" that it should end up as for the "u".

Any help on this matter would be appreciated.

Thank you.





Reply With Quote




12-29-2014, 08:34 AM #2
Philip M View Profile View Forum Posts

Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts

That is bound to occur if you use onkeyup to translate the letter immediately it is typed. You should create the cyphered text once the whole message is complete.

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

Hi - I am trying to use this code to validate,

function test() {
var pattern = (/^\d{3}[-]?\d{2}[-]?\d{4}$/g);
var pattern1 = (/^d{3}$/g);
if(!pattern.test(document.myform.textInput.value)||(!pattern1.test(document.myForm.textInput.value)) )
{
alert("Error!");
}
}

using regular expressions to compare a string from an input with two patterns that could both be valid. Therefore I'm pretty sure I need to use "||" between them both. I can't quite figure out how to get javascript to check for both patterns, only the first seems to be checked as valid. Is it something to do with the way I have my brackets?

Can someone point me in right direction,

Thanks

Hi All, i have this Regex which is below and im trying to validate a field when a button is clicked

i may have this mest up but what the regex does it checks for 1 decimal place and returns true or false i put some comments in with the code

Code:

function IsNewBid() {
    var NewBid = document.getElementById('MainContent_txtNewBid').value;
    var result;
    result = ^[0-9]{1,10}[.]{1}[0-9]{1,2}$|^[0-9]{1,10}$(NewBid .Value)
    if (result 'Equals False So theres and error')
        Do something
    else{
        carry on 
      }
        
}

Any help will be highly appreciated..

Thank you for your time.