JavaScript - How Can I Populate The Form Values Onx And Osx Variables Using Javascript

I am working on a page where the user will select a location from a dynamically generated dropdown list.

I was able to create the php multidimensional array (tested and working) from a MySql database using the users information at login, but I'm having problems converting it to a javascript multidimensional array. I need to be able to access variables that I can pass to a number of text fields within an html form.

For instance, if a user belongs to a company with multiple addresses, I need to be able to let them select the address they need to prepopulate specific text fields.

php array creation:
Code:

if ($row_locations) 
{ 
	while ($row_locations = mysql_fetch_assoc($locations))  
	{ 
		$mail[$row_locations['comp_id']]=array('mailto'=>$row_locations['mailto'], 'madd'=>$row_locations['madd'], 'madd2'=>$row_locations['madd2'], 'mcity'=>$row_locations['mcity'], 'mstate'=>$row_locations['mstate'], 'mzip'=>$row_locations['mzip'], 'billto'=>$row_locations['billto'], 'badd'=>$row_locations['badd'], 'badd2'=>$row_locations['badd2'], 'bcity'=>$row_locations['bcity'], 'bstate'=>$row_locations['bstate'], 'bzip'=>$row_locations['bzip']);
	} 
}

javascript function - this should create the array and send variables to text fields.
Code:

function updateAddress() {
var mail = $.parseJSON(<?php print json_encode(json_encode($mail)); ?>);
{
if (comp_id in mail) {
document.getElementById('mailto').value=mail.comp_id.mailto.value;
document.getElementById('madd').value=mail.comp_id.madd.value;
document.getElementById('madd2').value=mail.comp_id.madd2.value;
document.getElementById('mcity').value=mail.comp_id.mcity.value;
document.getElementById('mstate').value=mail.comp_id.mstate.value;
document.getElementById('mzip').value=mail.comp_id.mzip.value;
} else {
document.getElementById('mailto').value='';
document.getElementById('madd').value='';
document.getElementById('madd2').value='';
document.getElementById('mcity').value='';
document.getElementById('mstate').value='';
document.getElementById('mzip').value='';
}
}
}

Where is this breaking?
Thanks in advance.

I have a form with allot of form items on it that posts to itself. I am trying to pass those form values to another page with out using the action attribute in the form. Is there a way to do this? I have tried jquery and javascript but coming up blank. Just trying to pass all the values at one time to another page. Seems a little difficult to me since im a intermediate javascript programmer. Any ideas are welcome and thank you in advance if someone knows how to get this going.

Here is what i am trying to do script wise.

theform is the ID of the form. I have a switch statement that is based on the button pressed would get into that statement. So if one of the three buttons on the page is "excel report" it should get into that statement and pass the values of the form to another page.

I have tried this:

Code:

<cfswitch expression="#LCase(Trim(FORM.submit))#"> 
	   <cfcase value="Excel Report">
		   <cfoutput>
		   	<script>
		   		function formSubmit() {
					var form = document.forms.theForm;
					// change the url
					form.action ="index.cfm?keyword=Report PDF New";   
					form.submit();  
						}
		</cfoutput>
                     </script>
          </cfcase>
</cfswitch>

AND This:

Code:

<cfswitch expression="#LCase(Trim(FORM.submit))#"> 
          <cfcase value="PDF Report">
		<script>
			$('##submit').click(function(){
				open('',"results");
				with(document.print)
				{
				method = "POST";
				action = "index.cfm?keyword=Report PDF New";
				target = "results";
				submit();
				}
				});
		</script>
	   </cfcase>
</cfswitch>

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

Afternoon All,

I have managed to secure some JavaScript code from another site that allows me to access values from within my Google Analytics cookie:


<!-- begin Referer Check -->

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write("<script src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'>" + "</sc" + "ript>");
</script>

<script type='text/javascript'>
var pageTracker = _gat._getTracker("UA-1-1");
pageTracker._trackPageview();

//
// This is a function that I "borrowed" from the urchin.js file.
// It parses a string and returns a value. I used it to get
// data from the __utmz cookie
//
function _uGC(l,n,s) {
if (!l || l=="" || !n || n=="" || !s || s=="") return "-";
var i,i2,i3,c="-";
i=l.indexOf(n);
i3=n.indexOf("=")+1;
if (i > -1) {
i2=l.indexOf(s,i); if (i2 < 0) { i2=l.length; }
c=l.substring((i+i3),i2);
}
return c;
}

//
// Get the __utmz cookie value. This is the cookies that
// stores all campaign information.
//
var z = _uGC(document.cookie, '__utmz=', ';');
//
// The cookie has a number of name-value pairs.
// Each identifies an aspect of the campaign.
//
// utmcsr = campaign source
// utmcmd = campaign medium
// utmctr = campaign term (keyword)
// utmcct = campaign content
// utmccn = campaign name
// utmgclid = unique identifier used when AdWords auto tagging is enabled
//
// This is very basic code. It separates the campaign-tracking cookie
// and populates a variable with each piece of campaign info.
//
var source = _uGC(z, 'utmcsr=', '|');
var medium = _uGC(z, 'utmcmd=', '|');
var term = _uGC(z, 'utmctr=', '|');
var content = _uGC(z, 'utmcct=', '|');
var campaign = _uGC(z, 'utmccn=', '|');
var gclid = _uGC(z, 'utmgclid=', '|');
//
// The gclid is ONLY present when auto tagging has been enabled.
// All other variables, except the term variable, will be '(not set)'.
// Because the gclid is only present for Google AdWords we can
// populate some other variables that would normally
// be left blank.
//
if (gclid !="-") {
source = 'google';
medium = 'cpc';
}
// Data from the custom segmentation cookie can also be passed
// back to your server via a hidden form field
var csegment = _uGC(document.cookie, '__utmv=', ';');
if (csegment != '-') {
var csegmentex = /[1-9]*?\.(.*)/;
csegment = csegment.match(csegmentex);
csegment = csegment[1];
} else {
csegment = '(not set)';
}

//
// One more bonus piece of information.
// We're going to extract the number of visits that the visitor
// has generated. It's also stored in a cookie, the __utma cookis
//
var a = _uGC(document.cookie, '__utma=', ';');
var aParts = a.split(".");
var nVisits = aParts[5];

/*

function populateHiddenFields(f) {
f.source.value = source;
f.medium.value = medium;
f.term.value = term;
f.content.value = content;
f.campaign.value = campaign;
f.segment.value = csegment;
f.numVisits.value = nVisits;

alert('source='+f.source.value);
alert('medium='+f.medium.value);
alert('term='+f.term.value);
alert('content='+f.content.value);
alert('campaign='+f.campaign.value);
alert('custom segment='+f.segment.value);
alert('number of visits='+f.numVisits.value);

return false;
}

*/

document.forms["cforms2"].elements["cf2_field_1"].value = source;

</script>




The key outputs from this code are the vars:

source
medium
term
content
campaign
csegment
nVisits

My question is, how can I get the source var into the hidden field in the form in my footer http://www.yogaholidays.co?

I have tried to pass just the source var from within the <script> tags.

document.forms["cforms2"].elements["cf2_field_1"].value = source;

I have commented out part of original code that I did not think I needed.

Any help that can be offered I would be grateful, ultimately I would like to be able to pass all these values to hidden fields.

Thanks

Paul Brown

I have a web page created using plsql web toolkit. I want to set the text box values for street line 2 and zip based on user selection in select drop down which is street line 1. The select drop down list is based on a cursor selecting data from the Oracle database. I'm not sure if I need to use an array in the javascript code or if I can set the values some where in my package. Any advice would be appreciated.

cursor:
Quote:
cursor bldglistc
is
select stvbldg_code,
stvbldg_desc,
slbbldg_street_line1,
slbbldg_city,
slbbldg_stat_code,
slbbldg_zip
from stvbldg, slbbldg
where stvbldg_code = slbbldg_bldg_code (+)
and stvbldg_desc not like 'DNU%'
and stvbldg_desc not like 'Online%'
order by slbbldg_bldg_code;

bldg_record bldglistc%ROWTYPE;
Javascript in package:
Quote:
htp.p('
<SCRIPT LANGUAGE="JavaScript" TYPE = "text/javascript">
function UpdateNextField(which1,which2,fld1,fld2) {
document.getElementById(fld1).value = which1.value;
document.getElementById(fld2).value = which2.value;
}

</SCRIPT>
');
Form code from package:
Quote:
HTP.formopen ('bwgkogad.P_ProcAddrUpdate', 'post');
twbkfrmt.P_FormHidden ('atyp', atyp);
twbkfrmt.P_FormHidden ('seqno', seqno);


twbkfrmt.p_tableopen (
'DATAENTRY',
cattributes =>G$_NLS.Get('BWGKOAD1-0003','SQL','SUMMARY="This table shows Address Selected for Update."')
);
twbkfrmt.p_tablerowopen;
twbkfrmt.p_tabledataheader (stvatyp_rec.stvatyp_desc, ccolspan => '5');
twbkfrmt.p_tablerowclose;

twbkfrmt.p_tablerowopen;
twbkfrmt.p_tabledatalabel (
twbkfrmt.f_formlabel (
g$_nls.get ('BWGKOAD1-0007', 'SQL', 'Address Line 1:'),
idname => 'street_line1_input_id'
)
);
twbkfrmt.p_tabledataopen (ccolspan => '5');
HTP.formselectopen (
'str1',
'',
1,
cattributes => 'ID="street_line1_input_id" onChange="javascript: UpdateNextField(this,this,''street_line2_input_id' ',''zip_input_id'')"'
);


OPEN bldglistc;

LOOP
FETCH bldglistc INTO bldg_record;

IF bldglistc%NOTFOUND
THEN
EXIT;
END IF;

IF address_rec.spraddr_street_line1 = bldg_record.slbbldg_street_line1
THEN
twbkwbis.p_formselectoption (
bldg_record.slbbldg_street_line1,
bldg_record.slbbldg_street_line1,
'selected'
);
ELSE
twbkwbis.p_formselectoption (
bldg_record.slbbldg_street_line1,
bldg_record.slbbldg_street_line1
);
END IF;
END LOOP;

CLOSE bldglistc;

HTP.formselectclose;
twbkfrmt.p_tabledataclose;
twbkfrmt.p_tablerowclose;


twbkfrmt.p_tablerowopen;
twbkfrmt.p_tabledatalabel (
twbkfrmt.f_formlabel (
g$_nls.get ('BWGKOAD1-0008', 'SQL', 'Address Line 2:'),
idname => 'street_line2_input_id'
)
);
twbkfrmt.p_tabledata (
twbkfrmt.f_formtext (
'str2',
70,
75,
address_rec.spraddr_street_line2,
cattributes => 'ID="street_line2_input_id" readonly'
),
ccolspan => '5'
);
twbkfrmt.p_tablerowclose;

twbkfrmt.p_tablerowopen;
twbkfrmt.p_tabledatalabel (
twbkfrmt.f_formlabel (
g$_nls.get ('BWGKOAD1-0013', 'SQL', 'ZIP or Postal Code:'),
idname => 'zip_input_id'
)
);
twbkfrmt.p_tabledata (
twbkfrmt.f_formtext (
'zip',
NULL,
30,
address_rec.spraddr_zip,
cattributes => 'ID="zip_input_id" readonly'
),
ccolspan => '5'
);
twbkfrmt.p_tablerowclose;

twbkfrmt.p_tableclose;
HTP.para;
--
HTP.formsubmit (NULL, G$_NLS.Get('BWGKOAD1-0054','SQL','Submit'));
HTP.formreset (g$_nls.get ('BWGKOAD1-0055', 'SQL', 'Reset'));
HTP.formclose;

Need help please asap. It might be simple but i couldn't work out the script. help!
----------------
Formfield.anzahl1 = number entered by customer
Formfield.Price1 = Ergebnisfeld1
e.g.
Anzahl1= 1
Price = 270
*if Anzahl1 = 2 then Price = 270*2

I need to do this for two form option. 2nd field would be as follows

Formfield.Anzahl2= number entered by customer
Formfield.Price2 = Ergebnisfeld2

Then Formfield.Total = Ergebnisfeld1 + Ergebnisfeld2
-------------------
How can I convert these above to javascript?

hello
i am trying to fire a form which after the call to retrieve the data, populate the form with the data. i can see from firebug that the json data is being captured, but cannot seem to be able to populate the form with it. i am using a jquery plugin facybox, that opens the form, but the fields are blank. i have attached my code and would be grateful if someone could tell me where i am going wrong? many thanks

js code

Code:

<script type="text/javascript">
function edit(com, grid) {
if (com == 'Edit') {
        if($('.trSelected').length>0){
            if($('.trSelected').length>1){
                alert('Please select just one row');
                return;
            }
            var items = $('.trSelected');
            var itemlist ='';
            for(i=0;i<items.length;i++){
                itemlist+= items[i].id.substr(3);
            }
			$.ajax({
			   type: "POST",
			   dataType: "json",
			   url: "tempcontact.php",
			   data: "items="+itemlist,
			   success: function(data){
			   	document.getElementById('id').value = data.id;
            document.getElementById('email').value = data.email;
			    
			   $("#flex1").flexReload();
			   }
			 });
            
            /*and so on then you can call facybox*/
           jQuery.facybox({ div: "#editform"});
		   
        } else{
            alert('Please select a row to edit.');
        }
    }
      }
</script>

form

Code:

<div id="editform" style="display:none;">
  <form action="conedit.php" method="post" class="webform">  
<fieldset>  
<legend><span>Update Contact</span></legend>
<br /> <div id="dataText">Please delete the fields if there is no data 'No data to display'.</div>
  <label for="id">ID:</label>  
<input id="id" name="id" class="text" type="text" value="" />
<label for="name">Full Name:</label>  
<input id="name" name="name" class="text" type="text" value="" />  
  
<label for="email">Email address:</label>  
<input id="email" name="email" class="text" type="text" value="" />  
  
<label for="phone">Telephone:</label>  
<input id="phone" name="phone" class="text" type="text" value="" />  
  
<label for="mobile">Mobile:</label>  
<input id="mobile" name="mobile" class="text" type="text" value="" />  
 
<label for="fax">Fax:</label>  
<input id="fax" name="fax" class="text" type="text" value="" />  
  
<label for="notes">Notes:</label>  
<textarea name="notes" cols="25" rows="3"></textarea>  


</fieldset>
<input class="submit" type="submit"  name="submit" value="Update" />
</form>
</div>

Hi,

I'm new to Javascript and need to help with something, I'll try and explain this as best as I can but feel free to ask questions if it doesn't make sense. I'm basically building a javascript/html calculator but I need the calculation to appear gradually in a table, the table need to be 3 columns accross and add a row each time a calculation button is pressed, the first column can remain blank for now but will need to contain a text field eventually, second column needs to show the calculation symbol, third column shows the number. Here's an example:

4+2+7-5=8

|Blank| | 4 |
|Blank| + | 2 |
|Blank| + | 7 |
|Blank| - | 5 |
|Blank| = | 8 |

Here's the code I have so far so you can get a feeling of what it looks like, this table need to go into the area div and will replace what is currently the

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Sample Widget</title>
		    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="basic.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="basic.js"></script>
        <meta name="generator" content="Nokia WRT extension for Visual Studio 2.0" />
        <script type="text/javascript" language="javascript">
            function UpdateInput(a, b) {
                    var MyElement = document.getElementById("Input");
                    MyElement.innerHTML = MyElement.innerHTML + a;
                    var MyElement = document.getElementById("Area");
                    MyElement.innerHTML = MyElement.innerHTML + b;
                }
                function Calculate() {
                    var result = eval(document.getElementById("Input").innerHTML);
                    var total = document.getElementById("Total");
                    total.innerHTML = result;
                    var MyElement = document.getElementById("Area");
                    MyElement.innerHTML = MyElement.innerHTML + '<br>=' + result;
            }
        </script>
    </head>
    <body onLoad="init()">
    <div id="Main">
        <table cellpadding="0" cellspacing="0" width="100%">
        <div id="Area">
        </div>
        </table>
        <table cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td class="style1">Total:</td>
                <td>
                    <div id="Total"></div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <div id="Input"></div>
                </td>
            </tr>
        </table>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td><img src="Images/plus.png" onclick="UpdateInput('+','<br>+')" /></td>
                <td><img src="Images/minus.png" onclick="UpdateInput('-','<br>-')" /></td>
                <td><img src="Images/times.png" onclick="UpdateInput('*','<br>*')" /></td>
                <td><img src="Images/divide.png" onclick="UpdateInput('/','<br>/')" /></td>
            </tr>
            <tr>
                <td><img src="Images/7.png" onclick="UpdateInput(7,7)" /></td>
                <td><img src="Images/8.png" onclick="UpdateInput(8,8)" /></td>
                <td><img src="Images/9.png" onclick="UpdateInput(9,9)" /></td>
                <td><img src="Images/percent.png" onclick="UpdateInput('%','<br>%')" /></td>
            </tr>
            <tr>
                <td><img src="Images/4.png" onclick="UpdateInput(4,4)" /></td>
                <td><img src="Images/5.png" onclick="UpdateInput(5,5)" /></td>
                <td><img src="Images/6.png" onclick="UpdateInput(6,6)" /></td>
                <td><img src="Images/oneoverx.png" /></td>
            </tr>
            <tr>
                <td><img src="Images/1.png" onclick="UpdateInput(1,1)" /></td>
                <td><img src="Images/2.png" onclick="UpdateInput(2,2)" /></td>
                <td><img src="Images/3.png" onclick="UpdateInput(3,3)" /></td>
                <td><img src="Images/plusminus.png" /></td>
            </tr>
            <tr>
                <td><img src="Images/0.png" onclick="UpdateInput(0,0)" /></td>
                <td><img src="Images/dot.png" onclick="UpdateInput('.','.')" /></td>
                <td><img src="Images/equals.png" onclick="Calculate()" /></td>
                <td><img src="Images/sub.png" /></td>
            </tr>
        </table>
    </div>
	</body>
</html>

I have two slightly different forms on the same page, but I want the values in form1 to auto populate the same form fields in form2. 1 field is a text field, the rest are drop down menus. How would I accomplish this? Link to tutorial would be much appreciated. Thanks

Hi,
I'm working on a menu update form. I'm pulling the existing data from mysql and posting it into a form, using php. This works fine. But now I want the user to be able to modify the data and perform and update query to the database with the changes. I cannot figure out how to get the modified php text box data into my html form text boxes so I can run an update query. I would be ok with a button that transfers the php text box data to the html form data. Hope this is clear what I'm trying to do, seems simple enough, but I can't figure it out. Thanks in advance for any ideas.

I want to create a table in javascript with a predefined height and width and put html code in its td.
I wanna know when i should stop writing html code when my table have reached the predefined height.
Is there any way to do that?
I started by doing this :


var srcTable = document.createElement("table");
srcTable.border = 1;
srcTable.borderColor = "Black";
srcTable.height = 768;
srcTable.width = 1024;
var tmpRow = null;
var tmpCell = null;
for (i = 0; i < rowCount; i++) {
tmpRow = AppendRow(srcTable)
for (j = 0; j < colCount; j++) {
tmpCell = AppendCell(tmpRow);
tmpCell.innerHTML = document.getElementById("div").innerHTML;
tmpCell = null;

}
tmpRow = null;
}

The html code in "div" element is way big then 768 px. I wanna know how to loop over and break it when table reaches 768 px height.

Hi all

I have relatively easy task I need to accomplish but as per usual I have very little idea of how to do it. I have done a google search to no avail.

Basically I need to:

1. Pull a value from inside a div
Code:

<div id="number">(invoice #1017)</span>

2. Populate a form input field with that value.

Does this make sense? If not let me know if you need any more info.

Thanks

I would like to set up an image gallery so that when customer clicks on their chosen image, the image caption populates into the associated field in the form below the gallery, on the same page.

Any way you know of to do this?

I am not really a coder, I only know this and that, so examples or detailed instructions will be most helpful.

Thanks very much.

Ok so Im going to break down what Im trying to do and hopefully someone can point me to a possible solution without getting all technical. I have 2 div tags. the first is a content container more or less. the second is a container for a php built calender (using html tables). Basically when the page loads the php builds the calenders html table code. each td element has an onclick event handler. The goal is to have the javascript handler execute when any non empty cell is clicked (non empty being that it has a date associated with it and is not a blank space filler). This is the easy part. The hard part is that each calendar day potentially has certain information associated with it stored in a mysql database. Im wanting input fields within the first container div to autopopulate with the information from the database (if any) for whatever day is clicked. Ive search around and heard things like javascript cant do mysql queries directly, and heard mention of ajax. So im stumped as to how to accomplish this. whether i need an external php script for the queries (perhaps inside a php function that can return data to the javascript that calls it?), but if that is plausable would it cause page loads or the like to the user? i really dont want to have to learn ajax for this one page, just seems excessive, but i do need a way to make the content in the first div populate with the respective database data for the selected day on the calendar. any thoughts, comments, or solutions that dont involve yet another web language would be greatly appreciated. thanks

Hi All! Thanks in advance to any and all who help me.

What we are trying to do is have a form where customers can use a conditional logic based form that upon submission will redirect to checkout with an appropriate product bundle being populated in the shopping cart. I have some experience with creating forms, in fact I have made a decent form that I have modified from an online form builder... the problem is I have no idea how to auto-fill the shopping cart... period.

From what I have read in my research this should be a function of Javascript. I have a decent working knowledge of php, and html, but I am pretty clueless when it comes to Javascript, if anyone could point me in the right direction for this project I would really appreciate it.