|
JavaScript - Multiple Autocomplete Fields
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">
</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 Similar TutorialsHi folks. I am new to javascript so please go easy on me if this is a silly request Basically I have a table generated by a php script with a dynamic number of rows and columns. Here is a sample of the output from this script: Code: <tr> <td style='width:60px'><a href='index.php?inc_id=30' onclick='return confirmDelete(this)'>Remove</a></td> <td style='text-align:center'>test</td> <td ><input type='text' name='0inccol0' value='$432.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='0inccol1' value='$432.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='0inccol2' value='$432.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='0inccol3' value='$432.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='0inccol4' value='$432.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='0inccol5' value='$432.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='0inccol6' value='$432.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='0inccol7' value='$432.00' style='text-align:center; background-color:#cccccc'/></td> </tr> <tr> <td style='width:60px'><a href='index.php?inc_id=31' onclick='return confirmDelete(this)'>Remove</a></td> <td style='text-align:center'>test2</td> <td ><input type='text' name='1inccol0' value='$213.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='1inccol1' value='$213.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='1inccol2' value='$213.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='1inccol3' value='$213.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='1inccol4' value='$213.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='1inccol5' value='$213.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='1inccol6' value='$213.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='1inccol7' value='$213.00' style='text-align:center; background-color:#cccccc'/></td> </tr> <tr> <td style='width:60px'><a href='index.php?inc_id=32' onclick='return confirmDelete(this)'>Remove</a></td> <td style='text-align:center'>test3</td> <td ><input type='text' name='2inccol0' value='$65.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='2inccol1' value='$65.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='2inccol2' value='$65.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='2inccol3' value='$65.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='2inccol4' value='$65.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='2inccol5' value='$65.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='2inccol6' value='$65.00' style='text-align:center; background-color:#cccccc'/></td> <td ><input type='text' name='2inccol7' value='$65.00' style='text-align:center; background-color:#cccccc'/></td> </tr> What I want to do is create a row of 'totals' fields at the bottom of this table that will sum the fields in the column above. Looking at the naming convention above, the first number is the row, the number at the end is the column so I will want to sum all of the input values with a name ending in 0 in the first 'total' field, all the input values with names ending in 1 in the next and so on. The number of rows and columns is dynamic based on the users selections prior to buiding the table. The reason I am using input fields is that I would also like an event (onChange/onBlur?) that will update the totals fields if a user manually changes the value in one of the inputs. Any advice on this will be appreciated! I have been looking around on the webs but have not found anything. I can find how to add multiple fields, but what if they reside on different forms on the same page? For example, here is my code with two forms: Code: <FORM name="form1"> <b>Size</b><input type="text" size="12" value="" name="size">* <b>Qty</b><input type="text" size="4" value="" name="qty" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"> <b>-</b> <input type=text size="10" value="" name="a1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>mm</b> <input type="text" size="15" value="" name="xtra">* <input type="hidden" size="4" value="304.8" name="b1"> <input type="hidden" value="0" name="ans1" size="10"> <input type="text" size="5" value="0" name="w1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>Lbs/Foot</b> <input type="text" size="7" value="0" name="tw1" readonly="readonly"><b>Total Lbs<b> </FORM> <FORM name="form2"> <b>Size</b><input type="text" size="12" value="" name="size">* <b>Qty</b><input type="text" size="4" value="" name="qty" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"> <b>-</b> <input type=text size="10" value="" name="a1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>mm</b> <input type="text" size="15" value="" name="xtra">* <input type="hidden" size="4" value="304.8" name="b1"> <input type="hidden" value="0" name="ans1" size="10"> <input type="text" size="5" value="0" name="w1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>Lbs/Foot</b> <input type="text" size="7" value="0" name="tw1"><b>Total Lbs<b> </FORM> In this example, I want to sum the two fields named "tw1" (the last field on each form) into a text box. Is this possible? I found this "required fields" script for a form I built, and I'd like to know how to convert it to accept multiple required fields. I'm a total novice at JavaScript so any help is much appreciated. Here's the script: Code: <script language="javascript" type="text/javascript">
<!--
function check(form) {
if (form.firstname.value == "") {
alert("Please enter your first name!");
form.firstname.focus();
return false ;
}
return true ;
}
//-->
</script>
and the HTML is (super-shortened version)... Code: <form onsubmit="return check(this);">
<table>
<tr>
<td><label>First Name</label></td>
<td><input name="firstname" /></td>
</tr>
</table>
</form>
Thanks for any help!!! I am working with a script from Dynamic Drive (found here) that allows you to select and copy a form element. I would like to modify the code to allow me to select multiple form elements with one select all button. this is the code for the head section: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> </script>
<script language="Javascript">
<!--
/*
Highlight and Copy form element script- By Dynamicdrive.com
For full source, Terms of service, and 100s DTHML scripts
Visit http://www.dynamicdrive.com
*/
//specify whether contents should be auto copied to clipboard (memory)
//Applies only to IE 4+
var copytoclip=1
function HighlightAll(theField) {
var tempval=eval("document."+theField)
tempval.focus()
tempval.select()
if (document.all&©toclip==1){
therange=tempval.createTextRange()
therange.execCommand("Copy")
window.status="Contents highlighted and copied to clipboard"
setTimeout("window.status=''",1800)
}
}
//-->
</script>
and this is what I have so far in the body: Code: <a class="highlighttext" href="javascript:HighlightAll('form1.select1')">Select All</a><br>
<div class="form">
<form name="form1">
<textarea name="select1" rows=1 cols=50 >document name</textarea>
<textarea name="select2" rows=1 cols=50 >company</textarea>
<textarea name="select3" rows=1 cols=50 >language</textarea>
</form>
</div>
From the code, I would like to make it so that I can HighlightAll for each of the textareas (there will be lots of them). I have tried a lot of different options...I am not very experienced with Javascript, but have used it from time to time. A little more experienced with jQuery, but not enough to convert this. Any help is greatly appreciated. The simplified code below works, and should give you an idea of what Im trying to achieve. The final version will have dozens of input fields so you can see why the below method stinks Code: <html><head><title>Values</title>
<script type="text/javascript">
<!--
function getid() {
var myNum = document.frm1.field1.value;
if(myNum == "A"){
document.frm1.field2.value = "1"
} else if(myNum == "B"){
document.frm1.field2.value = "2"
} else {
document.frm1.field2.value = ""
}
var myNum2 = document.frm1.field3.value;
if(myNum2 == "A"){
document.frm1.field4.value = "1"
} else if(myNum2 == "B"){
document.frm1.field4.value = "2"
} else {
document.frm1.field4.value = ""
}
}
//-->
</script>
</head><body>
<form name="frm1" id="frm1">
<input type="text" size="40" name="field1" id="field1" onChange="JavaScript:getid();" /><input type="text" size="4" id="field2" name="field2" /> <br>
<input type="text" size="40" name="field3" id="field3" onChange="JavaScript:getid();" /><input type="text" size="4" id="field4" name="field4" /> <br>
</form>
</body>
</html>
Each text input will have A or B written in by the user, which should automatically place that letters associated ID in its partner field. If any other letter is entered the ID will automatically be left blank. With the above code I'd need to repeat it over and over for each of the dozens of input fields. The final version wont be using simply A/B either but around 50 possible inputs each with their own ID which would make around 1000 possible variations. What am I missing here that will simplify the process? Thanks 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 ? Hi all, I am trying to create a dependend autocomplete (based on JQuery) box for example: Field 1 has a autocomplete value of America. Field 2 has to fetch based on the value America the availible states like Kansas However if field 1 has the value England i want field 2 to reflect this by offering for example Schotland. I have the following code in place: Code: $(
document).ready(
function() {
var ac_config = {
source: "getcountry.php",
select: function(event, ui){
$("#
field1").val(ui.item.name),
$("#
field1hidden").val(ui.item.id);
},
minLength:3
};
$("#
field1").autocomplete(ac_config);
}
);
The code above will autocomplete the field1 (country's) input field and an hidden id field. Now i want to base the selection of field2 (the states) on the returned value in field1. i have the following code to try and do this (placed inside document.ready function()): Code:
var stateinput = document.getElementById('field1').value
var ac_config2 = {
source: "getstate.php?country=" + stateinput,
select: function(event, ui){
$("#
field2").val(ui.item.name),
$("#
field2hidden").val(ui.item.id);
},
minLength:3
};
$("#
field2").autocomplete(ac_config);
However the selection is not restricted based on the given input. Can anybody tell me what i am doing wrong? Thanx in advance..... 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 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? 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 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 Here is what I'm envisioning: The user selects a state, then in the 'Cities' box, he starts typing the name of his city. However, it autocompletes the name for him based on the state he chose. So if he chose California and started typing in "Los Angeles", it would autocomplete "Los Angeles" for him. Does that make sense? Is there a script out there that can do this? I have a JQuery autosuggest working properly on my form.php page... Now I want to get my form to actual POST the input values. So currently if I just run search.php, I get the following (using echo json_encode): {"label":"Henry Gale","value":"henrygale@gmail.com"},{"label":"Amy Gerges","value":"amy@yahoo.com"}, and the list goes on. So since the search is working properly. Now, I want to POST only the values that I place in the form's input field. I currently have: Code: <script>
$(document).ready(function() {
$( "#autocomp" ).autoSuggest("search.php", {
minChars: 2,
selectedItemProp: "label",
searchObjProps: "label",
selectedValuesProp: "value",
selectionLimit: 8,
formatList: function(data, elem){
var my_image = data.image ;
var my_label = data.label;
var new_elem = elem.html(my_image + my_label);
return new_elem;
}
});
});
</script>
<input name="contacts" type="text" id="autocomp" maxlength="35" />
But if I do an echo of the $_POST['contacts'] I just get the word: Array I am doing something wrong, just not sure what... Since my input gets a list of comma separated values, how can I: 1) make sure the input values get the "value" attribute which corresponds to the emails. 2) post the emails so I can do things with the emails (run them through format checks, insert them into a mysql db, etc). I would like to use a JavaScript to fill in the total based on the responses given by the user in this form stub:
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Formstub</title>
</head>
<body>
<form id="theform" id="theform" action="formstub.html" method="post">
<table width="90%" border = "1
" style="margin-left:40px; font-family: helvetica, ariel, sans-serif; font-size: 0.95em; color: #2D8AB9;">
<tr style="height:3em">
<td width="2em"><input type="checkbox" name="skipperReg" id="skipperReg" value="30" /></td>
<td width="12em">Registration Fee</td>
<td width="4em" >$<input type="text" name="skipperFee" id="skipperFee" readonly="readonly" size ="2" value="30" style="text-align:right" /></td>
<td width ="20em"> </td>
</tr>
<tr>
<td ><input type="checkbox" name="guestReg" id="guestReg" value="8" /></td>
<td>Guest Fee</td><td>$<input type="text" name="guestFee" id="guestFee" readonly="readonly" size ="2" value="8" style="text-align:right" /></td>
<td> # Guests <input type="text" name="guestQty" id="guestQty" size="2" /></td>
</tr>
<tr>
<td ><input type="checkbox" value="" name="miscAmt" id="miscAmt" /></td>
<td>Misc</td><td>$<input type="text" name="miscTotal" size ="2" style="text-align:right" /></td>
<td> List details <input type="text" name="miscDetails" size="35" /></td>
</tr>
<tr style="height:2em"><td > </td>
<td>Total</td><td>$<input type="text" id="total" name="total" size ="2" style="text-align:right" ></td>
</tr>
</table>
</form>
</body>
</html>
The script should add the skipperfee to the total if the skipperReg box is checked, multiply the guestFee by the guestQty and add that to the total if the guestReg box is checked, and add the miscTotal to the total if the miscAmt box is checked. The page loads and existing data is put in their correct fields. When I click 'add more' to add more fields to the form it does so and I am able to add new data. If on adding a new fields and its data I click 'add more' again it clears out the recently added data from the fields. The existing data that was present when the page first loaded is still their but all the new fields added data is cleared. how can I get it so the data stays, like in phpmyadmin when adding new fields. JS Code: function addmore(addwhat) {
// count existing boxes to find out next number to use.
// ?
if (addwhat == 'addresses') {
fieldid = 'addressesdiv';
}
if (addwhat == 'namesnumbers') {
fieldid = 'namesdiv';
}
var dv = document.getElementById(fieldid).innerHTML;
var lines = dv.match(/<br>/ig).length;
if (addwhat == 'addresses') {
document.getElementById('addressesdiv').innerHTML += '<textarea name="address' + lines + '" cols="30" rows="2"></textarea><br>';
}
if (addwhat == 'namesnumbers') {
document.getElementById('namesdiv').innerHTML += '<textarea name="name' + lines + '" cols="30" rows="2"></textarea><br>';
document.getElementById('mobilesdiv').innerHTML += '<textarea name="mobile' + lines + '" cols="30" rows="2"></textarea><br>';
}
}
PHP Code: <?
if ($_POST['Submit'] == 'Submit') {
echo("sent<br>");
for ($c = 1; $c <= (count($_POST)-1)/2; $c++) {
echo("name" . $c . " = " . $_POST['name'.$c] ." mobile" . $c . " = " . $_POST['mobile'.$c] . "<br>");
}
}
$customer_id = "11";
// get existing data.
// if not yet sent get data from databases
$ok = "no";
if ($_POST['Submit'] != "Submit") {
echo("<br>not sent<br>");
$res = db_query("SELECT * FROM `customer_client_names` WHERE `customer_id` = '". $customer_id ."'");
$maincount = mysql_num_rows($res);
echo("<br>number of clients = ".$maincount."<br>");
for ($c = 1; $c <= $maincount; $c++) {
$_POST['name'.$c] = mysql_result($res, $c-1, "client_name");
$_POST['mobile'.$c] = mysql_result($res, $c-1, "client_mobile");
echo("cn = ".$_POST['name'.$c] . " cm = ".$_POST['mobile'.$c] . "<br>");
}
} else {
// display last posted info
echo("<br>sent<br>");
$ok = "yes";
// check if info was entrted correctly or not.
for ($c = 1; $c <= ((count($_POST)-1)/2); $c++) {
if ($_POST['name'.$c] != "" && $_POST['mobile'.$c] == "") {
echo("<br>" . $_POST['name'.$c] ." was not given a mobile number<br>");
$ok = "no";
$maincount ++;
}
if ($_POST['name'.$c] == "" && $_POST['mobile'.$c] != "") {
echo("<br>" . $_POST['mobile'.$c] ." mobile was not given a name<br>");
$ok = "no";
$maincount ++;
}
}
}
if ($ok == "no") {
?>
<form name="form1" method="post" action="?ac=<?=$menu_item;?><? echo("&phpsession=" . $phpsession); ?>">
<div style="width: 850px;">
<div id="namesdiv" style="float: left; padding-right: 10px;">Client's Names<br>
<? for ($c = 1; $c <= ((count($_POST)-1)/2)+1; $c++) {
if ($_POST['name'.$c] != "" || $_POST['mobile'.$c] != "") {
?>
<textarea name="<?='name'.$c;?>" cols="30" rows="2"><?=$_POST['name'.$c];?></textarea><br>
<?
}
} ?>
</div>
<div id="mobilesdiv" style="float: left;">Client's Mobile numbers<br>
<? for ($c = 1; $c <= ((count($_POST)-1)/2)+1; $c++) {
if ($_POST['name'.$c] != "" || $_POST['mobile'.$c] != "") {
?>
<textarea name="<?='mobile'.$c;?>" cols="30" rows="2"><?=$_POST['mobile'.$c];?></textarea><br>
<?
}
} ?>
</div>
</div>
<br style="clear: both;">
<a href="#" onClick="javascript:addmore('namesnumbers'); return false;" >Add more</a>
<input type="hidden" name="customer_id" value="<?=$customer_id;?>">
<input type="submit" name="Submit" value="Submit">
</form>
<?
}
?>
I type something on the current textarea/input and all the values get removed after I add another field. Is there a solution? Code: <script language="Javascript" type="text/javascript">
<!--
//Add more fields dynamically.
function addField(area,field,limit) {
if(!document.getElementById) return; //Prevent older browsers from getting any further.
var field_area = document.getElementById(area);
var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
//Find the count of the last element of the list. It will be in the format '<field><number>'. If the
// field given in the argument is 'friend_' the last id will be 'friend_4'.
var last_item = all_inputs.length - 1;
var last = all_inputs[last_item].id;
var count = Number(last.split("_")[1]) + 1;
//If the maximum number of elements have been reached, exit the function.
// If the given limit is lower than 0, infinite number of fields can be created.
if(count > limit && limit > 0) return;
//Older Method
field_area.innerHTML += "<li><textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' /></li>";
}
//-->
</script>
<ol id="steps_area"><li>
<textarea id='steps' name='steps[]' rows='5' cols='40'></textarea><br /><input id='steps_image' name='steps_image[]' />
</li>
</ol>
<input type="button" value="Add" onclick="addField('steps_area','',15);"/>
i have this, Code: $(function() {
$('#input').autocomplete('test.php', {json: true});
});
that bring back values from the database here is my php section Code: $result = mysqli_query($db,$query);
while( $row = mysqli_fetch_array($result) )
{
$aResults[] = array( "id"=>($row['s_id']) ,"value"=>($row['s_last']), "info"=>($row['s_first']) );
}
$return = array();
foreach ($aResults as $key => $res) {
$return[] =$res['value'] . ' , ' . $res['info'];
}
echo json_encode($return);
}
}
}
i would like, when i select a name from the auto suggest to be able to have the id be filled in a input text area... uncle Google says this, but i am having a hard time implementing it. Code: myCallback = function(li, $input) {
// I need to refer to the appropriate "myXxxInput" here
alert($input.attr('id'));
}
setup = function() {
setupInput($('#myFirstInput'));
setupInput($('#mySecondInput'));
}
function setupInput($input) {
$input.autocomplete('blah.php', {onItemSelect: function(li) {
myCallback(li, $input);} });
}
|
|||||||