JavaScript - Values Disappearing In Form

I have 4 text boxes that are supposed to load 4 seperate values of data from one field in one table from a database. The field is called interface_cropsettings (from the interface table) and these values have been concatenated and comma seperated in this field.

Code:

<TR>
	<TD WIDTH="350" CLASS="tabledata"><INPUT TYPE="TEXT" SIZE="55" NAME="txtInterfaceXPosition" maxlength="10" <CFIF IsDefined("isEdit")>VALUE="#qryEditInterface.interface_cropsettings#"></CFIF></TD>
</TR>
<TR>
	<TD WIDTH="350" CLASS="tabledata"><INPUT TYPE="TEXT" SIZE="55" NAME="txtInterfaceYPosition" maxlength="10" <CFIF IsDefined("isEdit")>VALUE="#qryEditInterface.interface_cropsettings#"></CFIF></TD>
</TR>
<TR>
	<TD WIDTH="350" CLASS="tabledata"><INPUT TYPE="TEXT" SIZE="55" NAME="txtInterfaceCropHeight" maxlength="10" <CFIF IsDefined("isEdit")>VALUE="#qryEditInterface.interface_cropsettings#"></CFIF></TD>
</TR>
<TR>
	<TD WIDTH="350" CLASS="tabledata"><INPUT TYPE="TEXT" SIZE="55" NAME="txtInterfaceCropWidth" maxlength="10" <CFIF IsDefined("isEdit")>VALUE="#qryEditInterface.interface_cropsettings#"></CFIF></TD>
</TR>

Once the form is filled out and saved, the data is inserted into the database and the values from these 4 text boxes are concatenated, comma seperated and inserted into that one field correctly.

(Example)

If the 4 text boxes have the following values:

X Position = 12.34
Y Position = 56.78
Crop Height = 250
Crop Width = 500

in the database field they become:

12.34,56.78,250,500

However, if the form is closed and then re-opened, each text box displays the entire database field rather then each value seperated in the corresponding text box.

(Example)

All 4 text boxes display this:

12.34,56.78,250,500

I already know why the data appears like this in the form, my problem is that I'm not sure how to write the javascript to seperate the values into the correct corresponding fields, assuming javascript is what I should be using! Can anyone help me out with this??

Also, this is kind of irrelevant but just in case you're wondering, this form is part of a cold fusion application!

Hi, I'm having a bit of trouble with this here...

Before I submit the form with JS I update an input field with js like this:
Code:
Code:

document.getElementById('IC_Checksum').value = data;
imaginaryform.submit();

The problem is that the updated value is not sent along with the post data. Instead the old value is sent along.

When i submit the form with a button afterwards though (not auto submit after the value is set), then the value is sent along fine.

But that's not how I want it to work...

Can anyone tell me how I can send the value that I'm setting with JS along with the post data like this?

Hi there,

I'm absolute newbie in javascript, so the question may look not worth asking for you. Sorry for that.

My situation is like that: I want to make a preview of form data using javascript. After the button "preview" is clicked I start showing div dialog which should contain data entered by users. The problem is that because my div dialog is coded in the same page as form I can get only default values. It means - after making some changes, they are not visible.

To get and print the value of input I use this code:

Code:

<script type="text/javascript">
mytext = document.getElementById('name').value;
document.write(mytext);
</script>

How it would be possible to update the values on "on click" event.

Thank you very much for considering this question.

Hello,

I have a form that works out some basic math questions e.g. area etc.

I run a function when a form field is updated to do the calculations, however I'd like to run a different calculation depending on which form element was updated.

Is there a way to say something like:

if (area1 was updated) {
work out this calculation
}
if(area2 was updated) {
work out this calculation
}

and so on?

Thanks,

Nicola

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'd like to create a basic form where 3 text input fields are named with the following names referrerId, referrerId2 & referrerId3.

My goal is once the text fields within the form are populated with the users data, then once the user clicks submit, a new browser window opens up (in parent window preferably), navigating to the following url exactly as shown. Highlighted in red is the dynamic information I'd like appended.

Vacation Packages &referrerId=FIRSTNAME&referrerId2=LASTNAME&referrerId3=AGENTNUMBER

Any help would be greatly appreciated. Thanks!

I am having some trouble trying to fix my math equation to calculate the total rent by aquiring values from my form fields. Converting the date fields to days and finding the number of days via two date fields is mainly where I am having trouble. Also, I am trying to have a window pop up before submission but the onclick event does not seem to function properly. Any suggestions would be greatly appreciated. Thank you.

Below is the math equation I have come up with:
Code:

//calculate days from date field
				
				function calcTotal(date1, date2) {
					
					//assign variables
					
					var equip = parseFloat(document.forms[0].equipment.value)
					var pDate = parseFloat(document.forms[0].pickupDate.value)
					var pHours = parseFloat(document.forms[0].pickupHours.value)
					var pMinutes = parseFloat(document.forms[0].pickupMinutes.value)
					var rDate = parseFloat(document.forms[0].returnDate.value)
					var rHours = parseFloat(document.forms[0].returnHours.value)
					var rMinutes = parseFloat(document.forms[0].returnMinutes.value)
					
    				// The number of milliseconds in one day
   					 var ONE_DAY = 1000 * 60 * 60 * 24
	
    				// Convert both dates to milliseconds
   					 var date1_ms = rDate.getTime()
   					 var date2_ms = pDate.getTime()

    				// Calculate the difference in milliseconds
   					 
   					var difference_ms = Math.abs(date1_ms - date2_ms)
    
   					 
   					//calculate total cost and diplay in window.confirm() dialog box
   					 	
   					var pTime = pHours + pMinutes;
					var rTime = rHours + rMinutes;
					var total = (((difference_ms/ONE_DAY) - 1) * 24) * equip + ((rTime + (24 - pTime)) * equip);
					var OK = window.confirm(" The total rental cost is $" + total + "\n Click OK to accept, Cancel to decline");

					if (OK) {return true}
					else {return false}
				
				}

Below is the body section of the form:
Code:

<input type = "submit" name = "submit" value = "Submit Reservation" onclick = "calcTotal()"/>

This form collects info of the customer who wishes to select add-ons that would be applied to their digital photos. Examples of add-ons:
Photo makeover Add object or person Crop image
Have a look at the form


Once a customer selects one of the options (Photo Manipulation or Photo Restoration for example - radio buttons) and then one or more Add-ons (check boxes in the Html form), enter their details and upload a photo, they hit the submit button and it then takes them to the PayPal checkout page where the total amount is shown. (see image below)



The Issue:

In the PayPal page, it now shows the total amount whichever add-ons you select, however it keeps showing "Add object or person" as well as all the 5 main options (radio buttons on the form) no matter what I select. This will be an issue as I will not know exactly which add-ons the customer has selected.

Can someone please help me complete the coding so that the add-ons show on the PayPal checkout page.

I look forward to your reply/replies.

Kind Regards

Rafi






p.s: Could this be a possible solution? Even if it is, can someone help by completing the code?

In order to send the options/add-ons the customer selects I may need to use the onX and osX variables (Where X is a number starting with 0 and incrementing by 1 see below), These can be used to set options for the add-onsthey select. The onO is the "option name" and os0 is the "option choice". So for example:

<input type="hidden" name="on0" value="Photo manipulation">
<input type="hidden" name="os0" value="Whatever add-ons the customer selects">

<input type="hidden" name="on1" value="Photo restoration">
<input type="hidden" name="os1" value="Whatever add-ons the customer selects">

I want to loop through a form containing various fields and replace them with values I have in a JS object.

E.g.

(1)

<form id="theform">
<input type="text" name="field_1" value="" />
<input type="checkbox" name="field_2" value="" />
</form

(2)

object.field_1 = "Dave";
object.field_2 = ""; // empty as not checked, else holds value of checked one

--

The problem is: what about checkboxes and <select> drop downs, and radios??

Is there a script like this around as I'm guessing this could be useful for Ajax to populate input boxes in some situations (depending on the content etc.) so I'm guessing I'm not the only one who needs this?

I'm trying to add the ui autocomplete function to some form fields using a facebook style, but I'm not sure how to get more than one value to actually pass to the form field. As my script is now it only takes the last selected value into the hidden form field. Here's my current script:
Code:

				<div id="editcbprofileinterests">
		<div id="formWrap">
<div id="interests" class="ui-helper-clearfix">
<input id="cb_intereststerm" type="text">
<input id="cb_interests" name="cb_interests" type="hidden">
					</div>
				
			
		</div></div>
		<script type="text/javascript" src="autocomplete/js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="autocomplete/js/jquery-ui-1.8.custom.min.js"></script>
		<script type="text/javascript">
			$(function(){
				
				//attach autocomplete
				$("#cb_intereststerm").autocomplete({
					
					//define callback to format results
					source: function(req, add){
					
						//pass request to server
						$.getJSON("autocomplete/autocominterests.php?callback=?", req, function(data) {
							
							//create array for response objects
							var suggestions = [];
							
							//process response
							$.each(data, function(i, val){								
								suggestions.push(val.cb_intereststerm);
							});
							
							//pass array to callback
							add(suggestions);
						});
					},
					
					//define select handler
					select: function(event, ui) {
						
						//create formatted interest
						var interest = ui.item.value,
							span = $("<span>").text(interest),
							a = $("<a>").addClass("remove").attr({
								href: "javascript:",
								title: "Remove " + interest
							}).text("x").appendTo(span);
						
			//add interest to interests div		          
                        span.insertBefore("#cb_intereststerm");	
                                
                  //add interest to hidden form field
                  $('input[name=cb_interests]').val(interest);
					},
					
					//define select handler
					change: function() {
						
						//prevent 'to' field being updated and correct position
						$("#cb_intereststerm").val("").css("top", 2);
					}
				});
				
				//add click handler to activities div
				$("#interests").click(function(){
					
					//focus 'to' field
					$("#cb_intereststerm").focus();
				});
				
				//add live handler for clicks on remove links
				$(".remove", document.getElementById("interest")).live("click", function(){
				
					//remove current activity
					$(this).parent().remove();
					
					//correct 'to' field position
					if($("#interests span").length === 0) {
						$("#cb_intereststerm").css("top", 0);
					}				
				});				
			});
		</script>

Hi people, I'm a novice in javascript and have no clue how to get get the following logic through in a form. Any help will be greatly appreciated. I have searched the forums and looked at a few similar script but can't make out head and tail of it Sorry if this is a oft repeated question.

Here is the form I need, the post method is email :

Name (txtfield)

DOB (Date)

Address (txtarea)

Programme (Select list) : Options : Programme1, Programme2, Programme3

Date (Select list) : options : 10/10/2009 to 12/09/2009
15/10/2009 to 16/10/2009

Venue : Mainland
Harvey
Waterloo

Time : 9am - 12 noon
1 pm - 3 pm
3 pm - 5 pm

Here is the Logic :

Date : Conditions

If Programme1 is selected then date options 10/10/2009 to 12/09/2009 and 15/10/2009 to 16/10/2009 should both be selectable.

If Programme2 is selected then date options 10/10/2009 to 12/09/2009 and 15/10/2009 to 16/10/2009 should both be selectable.

If Programme3 is selected then date option 15/10/2009 to 16/10/2009 should auto selected and greyed out so that user don't have to select this.

Venue : Conditions

If Programme = Programme1 then all the venues should be selectable.

If Programme = Programme2 and date = 10/10/2009 to 12/09/2009 then all the venues should be selectable.

If Programme = Programme2 and date = 15/10/2009 to 16/10/2009 then only venues Harvey and Waterloo should be selectable.

If Programme = Programme3 and date = 15/10/2009 to 16/10/2009 then only venue Waterloo should be selectable.... in fact venue Waterloo should be auto selected and greyed out so that user cannot change it.

Time :Conditions : Always should be default selection and greyed out

If Programme = Programme1 and venue is any one of Mainland, Harvey, Waterloo then the time should default to 9 am - 12 noon.

If Programme = Programme2, Date = 10/10/2009 to 12/09/2009 and venue is any one of three then, the time should default to 1 pm - 3 pm.

If Programme = Programme2, Date = 15/10/2009 to 16/10/2009 and venue is one of Harvey or Waterloo then the time should default to 1 pm - 3 pm

If Programme = Programme3, Date = 15/10/2009 to 16/10/2009 and venue = Waterloo then the default time should be 3 pm to 5 pm

Sorry for the long post and so many conditions. I'm trying to get a hang of how to go about doing this. This looks a pretty complicated logic but if you can point me in the right direction I'm sure I will get my head around this.

Thanks for having a look and thanks in advance for any help.

Cheers

Can someone help me I am trying to get these two values, firstname and lastname to both go into the same output box on a form. I want them
to show up alongside one another like so nameform.output2.value=firstname + " " + lastname; but the values are assigned within seperate if statements as you can see below.. so I dont know how to get them to merge.. I am kinda new with javascript so any help will be very useful. Thakns very much.


Code:

function checkform(nameform){

var firstname=new Array(); 
firstname[0]="johndefinition";       
firstname[1]="jamesdefinition";

var lastname=new Array(); 
lastname[0]="smithdefinition";       
lastname[1]="simpsondefinition";


if (document.getElementById("namebox").value.indexOf("John")!=-1)
{nameform.output2.value= firstname[0];}

if (document.getElementById("namebox").value.indexOf("James")!=-1)
{nameform.output2.value= firstname[1];}

if (document.getElementById("namebox").value.indexOf("Smith")!=-1)
{nameform.output2.value=lastname[0];}

if (document.getElementById("namebox").value.indexOf("Simpson")!=-1)
{nameform.output2.value=lastname[1];}

}

Hey CF, I'm currently working on a website called 'eXtreme Gaming' I've almost completed it, apart from two things.

- Adding two values on my checkout page for the Grandtotal (I've tried everything, but I'm too much of a noob and have probably missed something small).

- Validation of forms (I don't know where to start here, I've looked on w3schools for tuts etc but I'm having difficulty incorporating it on my site)

I'm going to put the code for my checkOut page only, if you are able to help me many thanks in advance.

[quote] Code:

<HTML>

<HEAD>

<script language="JavaScript" src="laptopsCookie.js">
</script>

<script language="JavaScript" src="desktopsCookie.js">
</script>

<script language="JavaScript"><!--
function calculateTotalPurchaseLaptop(formRef)
{
	var laptopTotal=0;
	for (var i=0; i<LaptopListPurchase.length/2;i++)
	{
	 var subTotal = formRef.elements['quantity'+i].value * formRef.elements['price'+i].value;
	 formRef.elements['subTotal'+i].value = subTotal.toFixed(2);
	// document.orderForm2.grandTotal.value = document.orderForm.laptopTotal.value + document.orderForm2.desktopTotal.value
	 
	 laptopTotal += subTotal;
	}
	
	formRef.laptopTotal.value = laptopTotal.toFixed(2); 
}
//--></script>

<script language="JavaScript"><!--
function calculateTotalPurchaseDesktop(formRef)
{
	var desktopTotal=0;
	for (var i=0; i<DesktopListPurchase.length/2;i++)
	{
	 var subTotal = formRef.elements['quantity'+i].value * formRef.elements['price'+i].value;
	 formRef.elements['subTotal'+i].value = subTotal.toFixed(2);
	
	 
	 desktopTotal += subTotal;
	}
	
	formRef.desktopTotal.value = desktopTotal.toFixed(2); 
}
//--></script>

<script language="Javascript"><!--

function checkform()
{
	if (document.payment.Name.value == "")
	{
		alert('Please enter a name');
		return false;
	}
	//else if(isNaN(document.payment.CreditCard.value) || document.payment.CreditCard.length !== 10)
	//{
	//	alert('Invalid Credit Card Number');
	//	return false;
	//}
	else if (document.payment.Adress.value == "")
	{
		alert('Please enter your adress.');
		return false;
	}
	else if (document.payment.State.selectedIndex == 0)
	{
		alert('Please select a state');
		return false;
	}

	return true;
}


</script>
</HEAD>

<BODY>

<TITLE>Check Out</TITLE>

<script>
var html = "";

	html += '<TABLE align="center"><tr><td><img src = "images/checkOutTitle.png" align="center" style="border:none" /></td></tr></TABLE>';
	html += '<TABLE align = "center" border="2" cellpadding="2" cellspacing="2" width="80%">'
	html += '<form id = "orderForm" name = "orderForm" method = POST action="javascript:void(0)">';
	html += '<tr>';
	html += '<th>Product</th><th>Quantity</th><th>Price</th><th>Sub Total</th>';
	html += '</tr>';

    for (var i=0; i<LaptopListPurchase.length;i=i+2)
	{	
				
      html += '<tr><td>' + LaptopListPurchase[i] + '</td>';
	  html += '<td><select NAME="quantity' + i/2 + '"  onChange="calculateTotalPurchaseLaptop(this.form)">';
	  html += '<OPTION VALUE="0">0</OPTION><OPTION VALUE="1">1</OPTION><OPTION VALUE="2">2</OPTION>';
	  html += '<OPTION VALUE="3">3</OPTION><OPTION VALUE="4">4</OPTION><OPTION VALUE="5">5</OPTION>';
	  html += '</select></td>';
	  html += '<td>$<input type="text" name="price' + i/2 + '" size=5 value="' + LaptopListPurchase[i+1] + '" readonly></td>';
	  html += '<td>$<input type="text" name="subTotal' + i/2 + '" size=5 value="0.00" readonly></td>';
	  html += '</tr>';
	}
	html += '<tr>';
	html += '<td></td>';
	html += '<td></td>';
	html += '<td></td>';
	html += '<td>$<input type=TEXT name="laptopTotal" value="" readonly size=7></td></tr>';
	html += '</form>';
	html += '</table>';
	
	document.write(html);

	// Update the quantities
	//
	var quantityLaptop;
	for (var i=0; i<LaptopList.length/2;i++)
	{
		// Get the quantity of each type of Laptop
		//
		quantityLaptop = getCookie("Laptop" + i);
		document.orderForm.elements("quantity"+i).value = quantityLaptop;
	}
	
	// Update the totals
	//
	calculateTotalPurchaseLaptop(document.orderForm)
	

var html = "";

	html += '<TABLE align = "center" border="2" cellpadding="2" cellspacing="2" width="80%">'
	html += '<form id = "orderForm2" name = "orderForm2" method = POST action="javascript:void(0)">';
	html += '<tr>';
	html += '<th>Product</th><th>Quantity</th><th>Price</th><th>Sub Total</th>';
	html += '</tr>';

    for (var i=0; i<DesktopListPurchase.length;i=i+2)
	{	
				
      html += '<tr><td>' + DesktopListPurchase[i] + '</td>';
	  html += '<td><select NAME="quantity' + i/2 + '"  onChange="calculateTotalPurchaseDesktop(this.form)">';
	  html += '<OPTION VALUE="0">0</OPTION><OPTION VALUE="1">1</OPTION><OPTION VALUE="2">2</OPTION>';
	  html += '<OPTION VALUE="3">3</OPTION><OPTION VALUE="4">4</OPTION><OPTION VALUE="5">5</OPTION>';
	  html += '</select></td>';
	  html += '<td>$<input type="text" name="price' + i/2 + '" size=5 value="' + DesktopListPurchase[i+1] + '" readonly></td>';
	  html += '<td>$<input type="text" name="subTotal' + i/2 + '" size=5 value="0.00" readonly></td>';
	  html += '</tr>';
	}
	html += '<tr>';
	html += '<td></td>';
	html += '<td></td>';
	html += '<td></td>';
	html += '<td>$<input type=TEXT name="desktopTotal" value="0.00" readonly size=7></td></tr>';
	html += '<td></td>';
	html += '<td></td>';
	html += '<td align = "center"><b>Grand Total</b></td>';
	html += '<td>$<input type=TEXT name="grandTotal" value="0.00" readonly size=7></td></tr>';
	html += '</form>';
	html += '</table>';
	
	document.write(html);

	// Update the quantities
	//
	var quantityDesktop;
	for (var i=0; i<DesktopList.length/2;i++)
	{
		// Get the quantity of each type of Desktop
		//
		quantityDesktop = getCookie("Desktop" + i);
		document.orderForm2.elements("quantity"+i).value = quantityDesktop;
	}
	
	// Update the totals
	//
	calculateTotalPurchaseDesktop(document.orderForm2)
</script>


<table  align = 'center'>
<tr>
<td><h1>Pay for your Purchase Below</h1></td>
</tr>
</table>

<table border="1" align = 'center' >
<form name="payment" method="post">

<tr>
	<td>
		Name on Credit Card: <input type="text" name="Name" /><br />
		Credit Card number: <input type="text" name="CreditCard" /><br />
		Street Adress: <input type="text" name="Adress" /><br />
		Town: <input type="text" name="Town" /><br />
		State/Territory: <select NAME="State"><OPTION VALUE="Null">--</OPTION><OPTION VALUE="Australian Capital Territory">ACT</OPTION><OPTION VALUE="South Australia">SA</OPTION><OPTION VALUE="Northen Territory">NT</OPTION><OPTION VALUE="Queensland">QLD</OPTION><OPTION VALUE="Victoria">Vic</OPTION><OPTION VALUE="Western Australia">WA</OPTION><OPTION VALUE="Tasmania">Tas</OPTION></select>
	</td>
	<td>
		<INPUT TYPE="RADIO"  NAME="Master Card" VALUE="Master Card">Master Card<BR>
		<INPUT TYPE="RADIO"  NAME="Visa" VALUE="Visa">Visa<BR>
		<INPUT TYPE="RADIO"  NAME="AMEX" VALUE="American Express">American Express<BR>
	</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" onclick="return checkform()"></td>
</tr>

</table>

</BODY>

</HTML>[

/quote]