JavaScript - I Need Help With Printing The Whole Html Form With Currently Filled Values.

Hi,

I have a form where dob is generated using 3 select boxes, 1 for day, month and year. My output needs to be in the form dob=dd-mm-yyyy rather than day=dd, month=mm and year=yyyy.

It has been suggested that i do the following:

"On submit button click, use JS to create a hidden input (Q5) in the form and assign its value, then disable the day, month, and year fields so they are not submitted."

Does anyone know how to do this?

Greetings


I have a textarea on my page and I wonder if its possible for a visitor to type in something in the textarea and then it will store in XML is it possible?


Best Regards

Obsivus

Hi,

The following code is supposed to display and hide fields when clicking on radio buttons which is does correctly, it also gives the fields that are hidden a value so that it passes validation. T

The problem is that when the user moves from one field to the next, it deletes the value that they have just entered. :S Any ideas why this might occur? Thanks!

Code:

<script language="javascript" type="text/javascript">
		
    		 function showHideDivs(){
                var category = '';

                for(i=0; i < oRadBtns.length; i++){
                    if(oRadBtns[i].checked){
                        category = oRadBtns[i].value;
                    }
                }
                switch (category){

                        case 'empresa':
						document.getElementById("empresa_nombre").value = "";
      					document.getElementById("contacto").value = "";
                        document.getElementById("nombre").style.display = "none";
                        document.getElementById("apellido").style.display = "none";
                        document.getElementById("company").style.display = "block";
                       	document.getElementById("contact").style.display = "block";
						document.getElementById("firstname").value = "nombre";
      					document.getElementById("lastname").value = "apellido";
                        break;

                    	case 'particular':
                        document.getElementById("firstname").value = "";
      					document.getElementById("lastname").value = "";
      					document.getElementById("nombre").style.display = "block";
                        document.getElementById("apellido").style.display = "block";      
                        document.getElementById("company").style.display = "none";
                        document.getElementById("contact").style.display = "none";
      					document.getElementById("empresa_nombre").value = "empresa";
      					document.getElementById("contacto").value = "contacto";
     					 break;
                }

            }
			
			 window.onload=function(){
                oRadBtns = document.getElementById('dmsfrm').getElementsByTagName('input');
                for(i=0; i < oRadBtns.length; i++){

                    oRadBtns[i].onclick = showHideDivs;
                }
				
                showHideDivs();
            }
			 
		</script>

Code:

      <div class="radio_element">
					<input type="radio" value="empresa" class="radio" id="empresa" name="categoria" <?php echo ($leadsEngine->getElementValue('categoria')!='particular')?'checked="checked"':'' ?>  />
                    <span class="<?PHP if($leadsEngine->hasError('categoria')){echo 'error';} ?> ">Empresa</span>
             </div>
            <div class="radio_element">
					<input type="radio" value="particular" class="radio" id="particular" name="categoria" <?php echo ($leadsEngine->getElementValue('categoria')=='particular')?'checked="checked"':'' ?> />
                    <span class="<?PHP if($leadsEngine->hasError('categoria')){echo 'error';} ?>  ">Particular</span>
            </div>
	</div>

Hi,

I am trying to pass a video id value from one javascript page to another, extract the video id, append it to a utube url and then pass it to a html page for immediate display. I have managed to extract the video id value and append it to the url but cannot get it into the html section of the code. My code is posted below

<html>
<head>
<script type="text/javascript">
function getParams() {
var idx = document.URL.indexOf('?');
var urlId;
var params = new Array();
if (idx != -1) {
var url = document.URL.substring(idx+1, document.URL.length).split('&');
for (var i=0; i<url.length; i++) {
videoVal = url[i].split('=');
urlId = "http://www.youtube.com/v/" + videoVal[1];
}
}
document.getrElementById('UrlId').value=urlId;
}
params = getParams();
</script>
</head>

<body>

<object width="425" height="344">
<param name="UrlId" value=urlId;
</param><embed src=urlId type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344">
</embed>
</object>
</p>
</body>
</html>


I need to get it to appear as a complete url in the following lines in the html code
<param name="UrlId" value=urlId;
<embed src=urlId type="application/x-shockwave-flash"></embed>

Can someone please help with this.

Thanks

Hello,

I'm dynamically outputting the contents of a MySQL table using Python, to a HTML table, which users view (obviously) through a web browser. It looks great, but the problem is that I'd like users to be able to update these values. For example, I have the current value of certain fields in text boxes. I'd like users to be able to change those values, then hit a submit button or similar (ideally on-the-fly) to update the dB. I imagine javascript will need to pass values to a Python script, but I don't know what the best way to go about this is.

The table is generated with a loop like so:

Code:

# Python code embedded in a .psp file

cursor = db.cursor()
cursor.execute("SELECT from_name, from_address, project, orb_proj, app, tier, environment, network, security_zone, datacenter, server_type, num_servers, date, status FROM requests")

rows = cursor.fetchall()

for row in rows:
   new_row = """
<td>%s<br></td>
... (line repeated for each column)
""" % row[0:15]

   req.write(new_row)

Any ideas? Maybe this whole thing should be rewritten in something else.

Thanks!

so i have a navigation bar and instead of clicking on it to another page on the site where everything reloads again i want it to just reload the content area, so i have 5 tables of content each representing a different page and i just want it this way so i can implement something else that doesnt have anything to do with this

Code:

<script type="text/javascript">
var page = 1;

function setPage1()
	{
		page = 1;
	}
function setPage2()
	{
		page = 2;
	}
function setPage3()
	{
		page = 3;
	}
function setPage4()
	{
		page = 4;
	}
function setPage5()
	{
		page = 5;
	}

function setBlank1(x)
{
	if (page==1)
		{
			x.class="content";
		}
	else
		{
			x.class="blank";
		}
}

function setBlank2(x)
{
	if (page==2)
		{
			x.class="content";
		}
	else
		{
			x.class="blank";
		}
}

function setBlank3(x)
{
	if (page==3)
		{
			x.class="content";
		}
	else
		{
			x.class="blank";
		}
}

function setBlank4(x)
{
	if (page==4)
		{
			x.class="content";
		}
	else
		{
			x.class="blank";
		}
}
function setBlank5(x)
{
	if (page==5)
		{
			x.class="content";
		}
	else
		{
			x.class="blank";
		}
}

this is my javascript so whats supposed to happen is when someone clicks a link on the nav bar it sets the page to that value so only that value is showing. i put the functions setPage1-5 in class="setPage1(this)" according to what content area they go too

Code:

table.blank {
	display: none;

that is my blank class attribute so its not there but its loaded

please ask me any questions and sugest anything im not a javascript expert or anything of that sort but ive been looking this over for a couple days now and i cant find anything online either

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.

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?

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!

Hey all,

Okay, Here is what i would like to do.
I have a calculator he
http://www.nico-online.co.uk/calculator/calc1.html


which after some help from Dormilich - got working!

Now, I would like to set up some conditions, so if the use selected 'Mountainbike' then, the script will perform a different calculation to if they select the 'Rennrad' option.

Okay, so I was thinking an If..else..if..else statement would probably be best after reading up

This is what I have come up with:

Code:

 <script language="JavaScript">
function Framesize()
{
var a = parseFloat(BikeSizer.Insleg.value);
if(BikeSizer.Biketype.value = "Mountainbike")
{
b = (a * 0.572);
c = Math.round(b); 
BikeSizer.FramesizeCM.value = c;

d = (a * 0.226);
e = Math.round(d);
BikeSizer.FramesizeInch.value = e;
}


else if (BikeSizer.Biketype.value = "Trekking-, Reise- oder Cityrad")
{
b = (a * 5);
c = Math.round(b); 
BikeSizer.FramesizeCM.value = c;

d = (a * 5);
e = Math.round(d);
BikeSizer.FramesizeInch.value = e;
	}
	
else{
	
	b = (a * 10);
c = Math.round(b); 
BikeSizer.FramesizeCM.value = c;

d = (a * 10);
e = Math.round(d);
BikeSizer.FramesizeInch.value = e;
	}

}
</script> 

So, I'm not too sure if I can set the Menu values as recongnisable values!

Here are the values I have:

<select name="Biketype" style="font-size:11px;">
<option>Mountainbike</option>
<option>Trekking-, Reise- oder Cityrad</option>
<option>Rennrad</option>
</select>

Anyone out there offer any insight? Am I going horribly wrong somewhere?

Apologies for the stupidness , I am quite new to JS!

Thanks in advance

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>

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

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];}

}

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).

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">