JavaScript - Autocomplete Form Based On Checked Boxes

Hello,

I am pretty new at javascript and I am trying to create a payment form that has both fields for payment by check and payment by credit card.

I am wondering how I would go about having a radio button that asks the user how they would like to pay "credit card" or "check" and depending on which one they pick it shows the fields pertaining to that type of payment.

the fields in the form look like this:
Credit Card Fields:
Code:

<select name="card_type" size="1">
	<option value="">- Card Type - </option>
	<option value="1">Visa</option>
	<option value="2">Mastercard</option>
	<option value="3">Discover</option>
	<option value="4">American Express</option>
</select>

Expiration Date<input type="text" name="exp_date" value="" id="exp_date">

CVC Code<input type="text" name="cvc" value="" id="cvc">

Card Number<input type="text" name="card_number" value="" id="card_number">

Amount On Credit Card<input type="text" name="card_amount" value="" id="card_amount">

Name On Card<input type="text" name="name_on_card" value="" id="name_on_card">

Billing Address<input type="text" name="billing_address" value="" id="billing_address">

Billing City<input type="text" name="billing_city" value="" id="billing_city">

<select name="billing_state" size="1">
	<option value="">- Billing State -</option>
</select>

Check Fields:
Code:

Name (as printed on check)<input type="text" name="check_name" value="" id="check_name">

Address On Check<input type="text" name="check_address" value="" id="check_address">

Amount On Check<input type="text" name="check_amount" value="" id="check_amount">

Checking Account Number<input type="text" name="check_acc_number" value="" id="check_acc_number">

Routing Number<input type="text" name="routing_number" value="" id="routing_number">

Check Number<input type="text" name="check_number" value="" id="check_number">

Hello, i'm working on a 3 page survey. When hitting next, previous, or submit it passes the values of all the questions to the next page. I've got the whole thing working correcting except for one thing: When the box is "not" checked it passes no value. I'm needing it to have a value of "1" when checked and a value of "0" when not checked, and currently when its not checked and i pass the info it leaves it blank.

I'd post the whole code to one of the pages but it's long , so i'll post the snipits of the code.
Code:

<script type="text/javascript"> 
/* <![CDATA[ */
function processQueryString() {
var formData = location.search;
formData = formData.substring(1, formData.length);
while (formData.indexOf("+") != -1) {
	formData = formData.replace("+", " ");
}
formData = unescape(formData);
var formArray = formData.split("&");
for (var i=0; i < formArray.length; ++i) {
	//document.writeln(formArray[i] + "<br />");
	var sDataName = formArray[i].split("=")
	
switch (sDataName[0]) {

case ".lib_use":
     for (var j=0; j < document.getElementsByName(".lib_use").length; ++j) {
     if (document.getElementsByName(".lib_use").item(j).value == sDataName[1]) {
     document.getElementsByName(".lib_use").item(j).checked = true;
     //alert("lib_use set");
              }
 }
 break;
case ".lib_comp":
     if (sDataName[1] == 1) {
     document.getElementsByName(".lib_comp").checked = true;
     document.getElementsByName(".lib_comp").value= 1;
   } 
   else {
    document.getElementsByName(".lib_comp").checked = false; 
   document.getElementsByName(".lib_comp").value= 0;
 }			 
 break;	
default:
      alert("not caught = " + sDataName[0]);
       continue;
		
	}
}
}
/* ]]> */
</script>

<input type="checkbox" name=".lib_comp" id="lib_comp" value="1" />

The first case that i showed in my code is a radio button, and it passes correctly, i just wanted to show the "format" i was using in a working sense. The 2nd case is an example of the check boxes.

Thanks for looking at this, and giving any suggestions you might have!

I'm using onchange display to hide/show form elements depending on the value of a select box. It works perfectly well (I actually really adore it) for one select box, but I have another select box which I'd like to act similarly.

Code:

<head>
 <script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2,id3,id4) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
document.getElementById(id4).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(id3).style.display = 'block';
}
if ( txt.match(id4) ) {
document.getElementById(id4).style.display = 'block';
}
}
// ]]>
</script>
</head><body>

<form action="#">
<select name="Stype" onchange="display(this,'oneshot','outtake','multi','chapter');">
<option>Please select:</option>
<option value="oneshot">Oneshot</option>
<option value="outtake">Outtake</option>
<option value="multi">Original Multi-Chapter</option>
<option value="drabbles">Drabbles</option>
<option value="outline">Outline Preview</option>
<option value="chapter">Chapter Preview</option>
</select><BR><BR>
<div id="oneshot" style="display: none;">Some fields here</div>
<div id="outtake" style="display: none;">Some different fields here</div>
<div id="multi" style="display: none;">Some other fields here</div>
<div id="chapter" style="display: none;">Some more fields here</div>
</form>
</body>

But when I go to add a second select (obj,id1,id2,id3,id4,id5,id6) with new "ifs" and id's, etc and so forth, neither work.

Code:

<head>
 <script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2,id3,id4,id5,id6) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
document.getElementById(id4).style.display = 'none';
document.getElementById(id5).style.display = 'none';
document.getElementById(id6).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(id3).style.display = 'block';
}
if ( txt.match(id4) ) {
document.getElementById(id4).style.display = 'block';
}
if ( txt.match(id5) ) {
document.getElementById(id5).style.display = 'block';
}
if ( txt.match(id6) ) {
document.getElementById(id6).style.display = 'block';
}
}
// ]]>
</script>
</head><body>

<form action="#">
<select name="Stype" onchange="display(this,'oneshot','outtake','multi','chapter');">
<option>Please select:</option>
<option value="oneshot">Oneshot</option>
<option value="outtake">Outtake</option>
<option value="multi">Original Multi-Chapter</option>
<option value="drabbles">Drabbles</option>
<option value="outline">Outline Preview</option>
<option value="chapter">Chapter Preview</option>
</select><BR><BR>
<div id="oneshot" style="display: none;">Some fields here</div>
<div id="outtake" style="display: none;">Some different fields here</div>
<div id="multi" style="display: none;">Some other fields here</div>
<div id="chapter" style="display: none;">Some more fields here</div>  <BR><BR><BR>

<select name="Atype" onchange="display(this,'romance','adventure');">
<option>Please select:</option>
<option value="romance">Romance</option>
<option value="adventure">Adventure</option>
</select><BR><BR>
<div id="romance" style="display: none;">Some new fields here</div>
<div id="adventure" style="display: none;">Some even newer fields here</div>
</form>
</body>

Is there any way to fuse them and get a second select to work the same?

Thanks in advance for the help!

Hello,
I have the following DIV tag
Code:

<div id = "cbContainer"> </div>

The div is initially hidden as the display is set to none. I have one text input in my form. Depending upon the changed text in that textbox, there is a javascript function which creates a list of checkboxes and by using the innerHTML, the above div is filled up with the check boxes like shown in the code below:

Code:

var chkboxes = '';
for(var r = 0; r < related.length; r++)
{
	chkboxes = chkboxes + 
        '<div class ="versionswidth">'+
        '<input type="checkbox" name="version" value = related[r] />'+ related[r] + 
        '</div>';
}
var div = document.getElementById("cbContainer");
div.innerHTML = chkboxes;

div display is then set as "block" which makes the div visible. The problem is that on form submission, the input of selected checkboxes is not submitting.

I will be grateful for any help.

Thank you.

So I found this code and I've manipulated it a little bit for what I want. It was designed to autocomplete an input field when countries were typed, but I changed the values to match ingredients or cooking terms, etc.

I was wondering if it would be possible through javascript to autcomplete a word after one is already typed in the input field. For instance, if one person types an 'f' into the input field it will suggest 'flour' as an autocomplete, but if the person types 'f' again, it will not perform the same autocomplete function. How would you go about doing that? Thank you!

Code:

<head>
<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Timothy Groves | http://www.brandspankingnew.net/ */
countries = new Array(
  "flour",
  "cup",
  "tsp.",
  "tbsp.",
  "lb.",
  "pound",
  "tablespoon",
  "teaspoon",
  "sugar",
  "olive oil",
  "vegetable oil",
  "gallon",
  "quart",
  "qt."
);

var sug = "";
var sug_disp = "";

function getCountry() {
  var input = document.forms['address_frm'].country.value;
  var len = input.length;
  sug_disp = ""; sug = "";

  if (input.length) {
    // get matching country from array
    for (ele in countries)
    {
      if (countries[ele].substr(0,len).toLowerCase() == input.toLowerCase())
      {
        sug_disp = input + countries[ele].substr(len);
        sug = countries[ele];
        break;
      }
    }
  }
  document.forms['address_frm'].sug_country.value = sug_disp;
  if (!sug.length || input == sug_disp)
    document.getElementById('sug_btn').style.display = "none";
  else
    document.getElementById('sug_btn').style.display = "block";
}

function setCountry() {
  document.forms['address_frm'].country.value = sug;
  hideSug();
}

function hideSug() {
  document.forms['address_frm'].sug_country.value = "";
  document.getElementById('sug_btn').style.display = "none";
}
</script>
</head>
<body>

<div style="width: 202px; margin: 100px auto 0 auto;">
<form name="address_frm">
  <div></a>
  <div style="position: relative; margin: 5px 0 5px 0; height: 30px;">
  <div style="position: absolute; top: 0; left: 0; width: 200px; z-index: 1;">
    <input type="text" name="sug_country" style="background-color: #fff; border: 1px solid #999; width: 200px; padding: 2px" disabled />
  </div>
  <div style="position: absolute; top: 0; left: 0; width: 200px; z-index: 2;">
    <input autocomplete="off" type="text" name="country" style="background: none; color:#000; border: 1px solid #999; width: 200px; padding: 2px" onfocus="getCountry()" onkeyup="getCountry()" />
  </div>
    <div id="sug_btn" style="position: absolute; top: 2px; right: 5px; z-index: 4; display:none;">
<p onclick="setCountry()" style="cursor:pointer">></p>        

      </div>
  </div>
</form>
</div>
</div>
</body>

How do I fix the problem that autocomplete does not validate, I have heard before that there is a dirty way to do this but did not want to do this before, but now feel i must as my boss wants the site error free !

does anyone know how I do this ?

Hello, i have coded this page:

http://www.advance2000.net/system/ad...rchasepeso.php

click on the "ADD ITEM" button TWICE. now you have created two rows of textboxes. next, enter the letter "M" on the description textbox on the second row. this would then initialize an autocomplete function... you will see two words "memory" and "motherboard" try clicking one of these..

after clicking, i guess you will notice the error in my program. the clicked value (for example "memory") would be sent in the FIRST ROW TEXTBOX instead of the second.... can anyone help me?

Here is the Code of the said Dynamic Textbox:
Code:

<script language ="javascript">

row_no=0;
function addRow(tbl,row){
row_no++;
if (row_no<=200){
if (row_no<=200){
if (row_no>=100){
var textbox  = '<input type="text" id="item[]" value='+row_no+' size = "2"  maxlength= "99" name="item[]>"';}
if (row_no<100){
var textbox  = '<input type="text" id="item[]" value='+row_no+' size = "2"  maxlength= "99" name="item[]">';}
var textbox2 = '<input type="text" id="stockcode[]" size = "20" maxlength= "100" name="stockcode[]">';
var textbox3 = '<input type="text" autocomplete="off" id="description" size = "95" maxlength= "100" name="description"  onkeyup="lookup(this.value);" onChange="fill();"><div class="suggestionsBox" id="suggestions" style="display: none;"><img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /><div class="suggestionList" id="autoSuggestionsList"></div>';

				
var textbox4 = '<input type="text" id="qty'+row_no+'" size = "6" maxlength= "100" onChange="Sum()" name="qty[]">';
var textbox5 = '<input type="text" id="price'+row_no+'" size = "15" maxlength= "100" onChange="Sum()" name="price[]">';
var textbox6 = '<input type="text" id="subtotal'+row_no+'" size = "15" maxlength= "101"  onChange="Grand()" name="subtotal[]" readonly>';


var tbl = document.getElementById(tbl);
var rowIndex = document.getElementById(row).value;
var newRow = tbl.insertRow(row_no);
var newCell = newRow.insertCell(0);
newCell.innerHTML = textbox;
var newCell = newRow.insertCell(1);
newCell.innerHTML = textbox2;
var newCell = newRow.insertCell(2);
newCell.innerHTML = textbox3;
var newCell = newRow.insertCell(3);
newCell.innerHTML = textbox4;
var newCell = newRow.insertCell(4);
newCell.innerHTML = textbox5;
var newCell = newRow.insertCell(5);
newCell.innerHTML = textbox6;
}
if (row_no>200){
alert ("Too Many Items. Limit of 20.");
}
}
}
</script>

The VAR TEXTBOX 3 would create the said "description textbox" that is also the textbox that calls the "Fill()" and the Lookup() function of the autocomplete


HERE, we have the said functions:
Code:

function lookup(description) {
		if(description.length == 0) {
			// Hide the suggestion box.
			$('#suggestions').hide();
		} else {
			$.post("rpc.php", {queryString: ""+description+""}, function(data){
				if(data.length >0) {
					$('#suggestions').show();
					$('#autoSuggestionsList').html(data);
				}
			});
		}
	} // lookup
	
	function fill(thisValue) {
		$('#description').val(thisValue);
		setTimeout("$('#suggestions').hide();", 200);
	}

Hello,
I have a problem with autocomplete of jQuery.
Here is my code

Code:

$('input#recipient').autocomplete ({
    source: function (request, callback) {
       var dataString = {username : request.username};
        $.ajax({
            url: url.root + 'email/',
            data: dataString,
            //cache: false,
            complete: function(xhr, result) {
               if(result != 'success') return;
                var response = xhr.responseText;
                var usernameList = [];
                $(response).filter('li').each (function() {
                    usernameList.push($(this).text());
                    )};
                    callback(usernameList);
                }
            });
    }
});

Can you tell me what's the problem
Thank you

Hi

So, I have a working single autocomplete function, but I want to use the same function on different fields....

this is my code:

Code:

<script type="text/javascript">
	function lookup(inputString) {
		if(inputString.length == 0) {
			// Hide the suggestion box.
			$('#suggestions').hide();
		} else {
			$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
				if(data.length >0) {
					$('#suggestions').show();
					$('#autoSuggestionsList').html(data);
				}
			});
		}
	} // lookup
	
	function fill(thisValue) {
		$('#inputString').val(thisValue);
		setTimeout("$('#suggestions').hide();", 200);
	}
</script>



	<div>
		<form>
			
           <script type="text/javascript">
			var index = '1';
			</script>

			 
            <div>
				Type your county:
				<br />
				<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
			</div>
            
             <div>
				Type your county:
				<br />
				<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
			</div>
			
			<div class="suggestionsBox" id="suggestions" style="display: none;">
				<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
				<div class="suggestionList" id="autoSuggestionsList">
					&nbsp;
				</div>
                
                
                
                
			</div>
		</form>
	</div>

I know the id's are the same in this, but I tried changing them and it still seems to make little difference.. I did wonder if I could add something variable to the id's and pass that in the function call, but could not figure it out.... the above gives me autocomplete on two fields, but will only fill one of them...

Any suggestions would be appreciated

Hi there

Im a relative newbie and am trying to have a searchbar that users can complete, with the text entry being from a pre-defined list. The hope is that a new page will open with the link that relates to the search bar entry.

Im using an Autocomplete code but cant work out how to get the link part to work. See below code

Code:

<html>
<head>
  <script src="jquery-latest.js"></script>
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
  <script>
  $(document).ready(function(){
    var data = "092 610 343 505 Utilities".split(" ");
$("#example").autocomplete(data);
  });
var data = [ {text:'Link A', url:'/page2'}, {text:'Link B', url: '/page2'} ];
$("...").autocomplete(data, {
  formatItem: function(item) {
    return item.text;
  }
}).result(function(event, item) {
  location.href = item.url;
});
  </script>


</head>
<body>
  Number: <input id="example" /><p></p>
</body>
</html>

Can someone help me complete this code? For example, how can I change the code so that a text entry of "092" opens "www.google.com" when I hit enter after text entry?

Your help with this is greatly appreciated
Glen

I want to use a database query to grab all of a member's friends from a table in order to add the friend's email address to a form, to ready it for POSTing.

I am using the jquery ui, so on my form.php page, I have the script and html:

Code:

<script>
$(function() {
	$( "#friendsearch" ).autocomplete({
		source: "search.php",
		minLength: 2,
		select: function( event, ui ) {
			log( ui.item ?
				"Selected: " + ui.item.id + " " + ui.item.value :
				"Nothing selected, input was " + this.value );
		}
	});
});
</script>
<form>...
    <input id="friendsearch" />
</form>

And on my search.php I have:

Code:

//code to connect to database.... etc

$query = "
    //this code goes through a table LEFT JOIN to grab a list of the logged-in member's friends' info (id, email, first name, last name)
"
$sql = mysql_query($query);
while($row = mysql_fetch_array($sql)) { 
	$fid = $row["id"];
	$firstname = $row["firstname"];
	$lastname = $row["lastname"];
	$email = $row["email"];

echo $fid <br /> $f_firstname <br /> $f_lastname <br /> $email <br /> ";

The "echo" above works. It lists out all the info perfectly, so I know my query is good. The problem, I am having, is with what comes next in the search.php:

Code:

$q = strtolower($_GET["term"]);

// supposed to do something with $q here (not sure what!)

$return = array();
    while ($row = mysql_fetch_array($query)) {
    array_push($return,array('id'=>$row['firstname'],'value'=>$row['lastname']));
}
echo(json_encode($return));

This is the part that's suppose to work with the jquery autocomplete. I know it's wrong, but I need to know how I can fix it to do the following:

1) when the user starts typing the first name or last name of the friend, auto-complete shows a drop-down list of firstname lastname.

2) once the friends' names are placed in the input box, on submit, i want to POST the friends' email addresses (not their name)!

Complex, I know... Any help would be much appreciated! Thanks,

June

Hi All,

Im a newbie when it comes to Javascript and trying to learn as I go along.

I am working on an internal work site. In the site I have a text box and on entering a specific code I want it to open a new page that links to a document that has the same name. ie. if user types red, I want it to find the document red.html in a folder.

To make my colleagues job easier, I want the text box to autocomplete.

Below is a section of the code I plan to use


Code:
<script>
var arrValues = ["red", "orange", "yellow", "green", "blue", "indigo", "violet", "brown"];
</script>
</head>
<body>
<h2>Autocomplete Textbox Example</h2>
<p>Type in a color in lowercase:<br />
<input type="text" value="" id="txt1" onkeypress="return autocomplete(this, event, arrValues)" /></p>
</body>
</html>Can anyone help me to modify this to:

1) link the text entered to the document I want opened

2) open this document upon 'enter' pressed

If anyone can provide help it will be greatly appreciated.
Thanks
Glen

http://auspost.com.au/apps/postcode.html

Basically I want to build the same thing.

The data is freely available there as a download.

I couldn't find anything existing in the jquery plugin space. Can anyone offer pointers on how to achieve it?