JavaScript - Cycle Through Form And Populate With Values From Js Object

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

Hello All,

I have a form where the number of input fields (lets call them B through N) is determined by the length of a php array. Above those input fields is another field (lets call this field input A) that I would like to be auto populated based on what the user enters in fields B through N.

Here is my code. The first table (with all of the "totals" fields) holds all of the input fields that I would like to auto update. These fields should auto update so that every input in EACH of the "fy" fields in the second table is added together. Example: every input in the id="fy_{$fy.fy}_high_impact_cost" field should be added together as the user enters them, and the id="totals_high_impact_cost" field should be auto updated with that total.

Code:

<form method="post" name="submit" action="new_item.php" accept-charset='UTF-8'>

<table border="box" width="100%">
<tr>
<td align="center">$<input id="totals_high_impact_cost" size="3" name="totals_high_impact_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_most_likely_impact_cost" size="3" name="totals_most_likely_impact_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_low_impact_cost" size="3" name="totals_low_impact_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_actual_expense" size="3" name="totals_actual_expense" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_high_mitigation_cost" size="3" name="totals_high_mitigation_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_most_likely_mitigation_cost" size="3" name="totals_most_likely_mitigation_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_low_mitigation_cost" size="3" name="totals_low_mitigation_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_cost_in_scope" size="3" name="totals_cost_in_scope" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_unfunded_threat" size="3" name="totals_unfunded_threat" maxlength="20" style="text-align: right" />M</td>
</tr>
</table>

{foreach value=fy from=$php_array}
<table>
<tr>
<td align="center">$<input id="fy_{$fy.fy}_high_impact_cost" size="3" name="fy_{$fy.fy}_high_impact_cost" maxlength="20" style="text-align: right" value="{$fy.high_impact_cost}" onchange="update_totals_high_impact_cost()" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_most_likely_impact_cost" size="3" name="fy_{$fy.fy}_most_likely_impact_cost" maxlength="20" style="text-align: right" value="{$fy.most_likely_impact_cost}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_low_impact_cost" size="3" name="fy_{$fy.fy}_low_impact_cost" maxlength="20" style="text-align: right" value="{$fy.low_impact_cost}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_actual_expense" size="3" name="fy_{$fy.fy}_actual_expense" maxlength="20" style="text-align: right" value="{$fy.actual_expense}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_high_mitigation_cost" size="3" name="fy_{$fy.fy}_high_mitigation_cost" maxlength="20" style="text-align: right" value="{$fy.high_mitigation_cost}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_most_likely_mitigation_cost" size="3" name="fy_{$fy.fy}_most_likely_mitigation_cost" maxlength="20" style="text-align: right" value="{$fy.most_likely_mitigation_cost}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_low_mitigation_cost" size="3" name="fy_{$fy.fy}_low_mitigation_cost" maxlength="20" style="text-align: right" value="{$fy.low_mitigation_cost}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_cost_in_scope" size="3" name="fy_{$fy.fy}_cost_in_scope" maxlength="20" style="text-align: right" value="{$fy.cost_in_scope}" />M</td>
</tr>
</table>
{/foreach}

</form>

Please email me at alexhall12315@yahoo.com if you would like more explanation. Thanks in advance for any help!!! =)

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.

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

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.

Hello,

Into an external js file, I'm trying to use the facebook graph api to read values of "shares" and "comments" and import them into js variables.
As example, using http://graph.facebook.com/?id=http://www.google.com in the browser, I get the following response:
Code:

{
   "id": "http://www.google.com",
   "shares": 3208837,
   "comments": 2
}

In my js code, I need something like:
var val_shares=xx;
var val_comments=xx;

Here's the code I'm using to (try) do it:
Code:

function getNewHTTPObject()
{
        var xmlhttp;

        /** Special IE only code ... */
        /*@cc_on
          @if (@_jscript_version >= 5)
              try
              {
                  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
              }
              catch (e)
              {
                  try
                  {
                      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                  }
                  catch (E)
                  {
                      xmlhttp = false;
                  }
             }
          @else
             xmlhttp = false;
        @end @*/

        /** Every other browser on the planet */
        if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
        {
            try
            {
                xmlhttp = new XMLHttpRequest();
            }
            catch (e)
            {
                xmlhttp = false;
            }
        }

        return xmlhttp;
}

var xmlHttp = getNewHTTPObject();
function getDynamicData()
{
  var url = "http://graph.facebook.com/?id=http://www.google.com";

  xmlHttp.open('GET', url, true);
  xmlHttp.onreadystatechange = callbackFunction;
  xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xmlHttp.send(null);
}
 var syndLinkRequest = getNewHTTPObject(); 

function callbackFunction()
{
  if (syndLinkRequest.readyState != 4)
    return;

  var result = xmlHttp.responseText;


}

into the HTML I call getDynamicData() at <body onload=getDynamicData()>...

Using Firefox in console mode, I see that the results arrive at this point of code:
Code:

  xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xmlHttp.send(null);

But I do not know (or understand) how and where to get those value to associate them to a js variable.
I understood I will need to use json to achieve this but I don't know where to start.
In addition, I can't use jQuery or php to do it.

After 2 days of searches, I'm about to give up.

Does anyone have an idea how to do or where I can find a concrete sample to show me the right way ?
Thanks a lot.

Gino

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 order form page and on submitting it opens a new web page that displays the order totals. Below is my code and most probably wrong but for me it seems logic. Please assist.

Order Form:
Code:

<td colspan="1" height="120" align="left"> 
<select style="margin-left: 60px; background-color: #00FF77;" name="prod_bed_359"  onchange="calculateValue(this.form)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select> R359</td></tr>

New page I called a unction to print:
Code:

function itemsOrdered() {
var beds = document.forms[2].prod_bed_359.value;
document.write("<pre><strong>Description\t\tQuantity\tPrice</strong></pre>");
document.write("<pre>Doggie Bed\t\t" + beds + "</pre>");	
}

This is still basic as I need to get this right before adding the prices and totals which is also extracted from the order page.

Hi I have a built this Jquery code:

http://blog.mehdi.biz/2010/02/vertic...ry-lovers.html

I want the buttons to auto cycle insted of hovering can anyone help please?

Hey all,
Hopefully I can explain this so it makes sense.

I have a div with some buttons in it going horizontally. Kind of like a top menu of sorts. The div is of a fixed width and these buttons are spaced evenly across it. What I would like to do (and the hardest part is finding the right words for all this) is add more buttons. But because of the limited space I want to leave the current buttons as they are but provide a way, either by hovering over the left or right end of the div ideally or clicking << or >> types of links to 'cycle' through the buttons. So end result would be the user would see lets say 5 buttons upon load but be able to access the other buttons by cycling/scrolling left or right. It would be great if the buttons would loop around so they would never reach the 'end' going left or right. Does this make sense? I haven't been able to find anything close to this but that could possibly be because I am not sure what to call it.

Thanks for any help!

Hi,

Does anyone know how to make the cycle function in jquery unobtrusive?

I've got the following code and when I disable javascript, I get a nasty long list of images

Jquery code:

$(document).ready(function() {
$('.homepage-slideshow').cycle({
fx: 'fade',
befo onAfter,
pause: 1,
timeout: 0,
pager: '#nav'
});
});

function onAfter() {

var cycle_href = this.href;
var brokenstring = this.title.split(" :: ");

var cycle_title = brokenstring[0];
var cycle_descr = brokenstring[1];

$('#output').html('<a href="'+cycle_href+'">'+cycle_title+'</a>');
$('#output-descr').html(cycle_descr);


}

Html code:

<div class="homepage-slideshow">
<a href="http://url.com/" title="Info goes here."><img src="<?=SITE_URL?>/images/image1.jpg" alt="Click here for more on ..." ></a>

<a href="http://url2.com/" title="Info goes here."><img src="<?=SITE_URL?>/images/image2.jpg" alt="Click here for more on ..." ></a>




</div>
<div class="homepage-pagination" id="nav" >Click the links to start the Google Tour: </div>
<div class="homepage-metadata">
<p id="output-descr"></p>
<h3 id="output"></h3>
</div>

We've been attempting to set up a drop-down selection box with hidden tables under it for use on a company website. The site has a lot of CSS sheets (like 20 of them) and more could be added at any point so we'd like to write the code to cycle through each one of them to find the correct variable associated with the selections in the drop-down. The code below works fine in dreamweaver, even with the multiple sheets attached, but stops working immediately when putting it in a browser. Any thoughts/suggestions are greatly appreciated.

Code:

<style type="text/css">
		.al {display:none}
		.ca {display:none}
		.ct {display:none}
		.ga {display:none}
		.il {display:none}
		.la {display:none}
		.ma {display:none}
		.mi {display:none}
		.mn {display:none}
		.mo {display:none}
		.ms {display:none}
		.nc {display:none}
		.ne {display:none}
		.nh {display:none}
		.nv {display:none}
		.ny {display:none}
		.or {display:none}
		.sc {display:none}
		.tn {display:none}
		.tx {display:none}
		.va {display:none}
		.vt {display:none}
		.wa {display:none}
		.wi {display:none}
    </style>
    <script type="text/javascript">
      function showHide(cls, show) {
        for (var i=0; i<document.styleSheets.length; i++) {
               // browser-compatibility 
               var rule = document.styleSheets[i].rules ? document.styleSheets[i].rules : document.styleSheets[i].cssRules;
               for (var j = 0; j < rule.length; j++) {
                       if (rule[j].selectorText == "." + cls) { //find css selector
                               rule[j].style.display = (show) ? 'block' : 'none';
                       }
               }
        }
}

        function selAction(sel) {
            for (var i = 0; i < sel.options.length; i++) {
                showHide(sel.options[i].value, i == sel.selectedIndex);
            }
        }
    </script>
</head>

<body>
    <table>
      <tr>
        <td colspan="3">
          <select name="type" onchange="selAction(this);">
            <strong><option value="et">
              Please Select Your State:
            </option>
            <option value="al">Alabama</option>
            <option value="ca">California</option>
            <option value="ct">Connecticut</option>
            <option value="ga">Georgia</option>
            <option value="il">Illinois</option>
            <option value="la">Louisiana</option>
            <option value="ma">Massachusetts</option>
            <option value="mi">Michigan</option>
            <option value="mn">Minnesota</option>
            <option value="mo">Missouri</option>
            <option value="ms">Mississippi</option>
            <option value="nc">North Carolina</option>
            <option value="ne">Nebraska</option>
            <option value="nh">New Hampshire</option>
            <option value="nv">Nevada</option>
            <option value="ny">New York</option>
            <option value="or">Oregon</option>
            <option value="sc">South Carolina</option>
            <option value="tn">Tennessee</option>
            <option value="tx">Texas</option>
            <option value="va">Virginia</option>
            <option value="vt">Vermont</option>
            <option value="wa">Washington</option>
            <option value="wi">Wisconsin</option></strong> </select>
        </td>
      </tr>
      <tr class="al">
        <td>
        No issues in your state at this time.</td>
      </tr>
      <tr class="ca">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="ct">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="ga">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="il">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="la">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="ma">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="mi">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="mn">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="mo">
        <td> No issues in your state at this time. </td>
      </tr>
      <tr class="ms">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="nc">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="ne">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="nh">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="nv">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="ny">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="or">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="sc">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="tn">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="tx">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="va">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="vt">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="wa">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      <tr class="wi">
        <td>
          No issues in your state at this time.
        </td>
      </tr>
      </table>
</center></td>
  </tr>
</table>
</body>
</html>

Hi,

I'm building a website which uses javascript to cycle through and fade images in the header portion of each web page. The javascipt os located in an external file and called via the master page. Here is the code in the content.js file which specifies where the images are located:

Code:

// create array of images
var CyclingImages = new Array("header/images/tankimage1.gif",
                              "header/images/tankimage2.gif", 
                              "header/images/tankimage3.gif",
                              "header/images/tankimage4.gif")

Here is the code in the master page which finds the javascript:

Code:

 <script language="javascript" src="<%= Page.ResolveUrl("~/content/content.js") %>"  type="text/javascript"></script>

Here is the function call in the masterpage to fade and cycle the images:

Code:

<body onload="FadeAndCycleImages()">

Here is the code in the masterpage which references the cycling images:

Code:

<span class="fadingimages">
                <img src="<%= Page.ResolveUrl("header/images/tankimage1.gif") %>" width="142" height="124" title="" alt="" name="cyclingimage"  />
            </span>

Each webpage loads the masterpage. If the webpage is located at the root of the project, the cycle and fade functionality works great. When I start to place some of the webpages in separate folders - which I need to do - the cycling and fading functionality breaks down, meaning the images cannot be found. The image place holder is there with the standard red "x" in the upper left. I have done a lot of research and tried many approaches to try to resolve this issue, but with no success. The root of the problem seems to lie in the fact that I cannot apply Page.ResolveUrl within the content.js file. Any suggestions would be greatly appreciated.


Thank you,
petela

Hello!

I'm trying to figure out a way of having + and - buttons which cycle through the options in a select box such as:

<select name="distance" id="jr_radius">
<option value="0.5">0.5 Miles</option>
<option value="1">1 Mile</option>
<option value="3" selected="selected">3 Miles</option>
<option value="5">5 Miles</option>
<option value="10">10 Miles</option>
</select>

So far I've only been able to have a button change the select box to a specific value, or add or subtract to a numerical value. Both of which aren't quite right.

Ideally if the default value is "3" then clicking the + button could make it "5" and clicking the same button again would make it "10". Visa versa, the minus button would make the value "1" and then if pressed again it would become "0.5".

Does that make sense? Any help will be greatly appreciated!

Hello everybody,

I'll quit new as it comes to programming, so please forgive this nono on forehand.

I've used a script and would like to add an other feature. Now the text is fading in and out. What I would like now is instead of the TEXT in the DIV, the script uses the text array, so you see a different text fading in after the last fadeout.

Thanks for your help.

Code:

<html>
<head>

<script language='javascript'>
function blink(elementid){ 
	colorarray = Array(
		'#ECFFEC','#ECFFEC','#ECFFEC','#ECFFEC','#ECFFEC','#E9F6E3',
		'#E5EAD8','#E0DDCA','#DACDBB','#D4BCAA','#CEAA99','#C79786',
		'#C18474','#BA7161','#B45F50','#AE4E3F','#A83E30','#A33122',
		'#9F2517','#9c1c0f','#9c1c0f','#9c1c0f','#9c1c0f','#9c1c0f',
		'#9c1c0f'); 
i=0;
setInterval ("changecolor('"+elementid+"')",200);
}

function changecolor(x) { 
	var x= document.getElementById(x);
	if (x != null){
		x.style.color = colorarray[i];
		if (i==24){ i= 0;
			colorarray = colorarray.reverse();
			}
	}
	i++;
}

var text=new Array();
  text[0] = "text 1";
  text[1] = "text 2";
  text[2] = "text 3";


</script>

</head>
<body bgcolor="#ECFFEC">
<script language="javascript">blink('fade');</script>
// INSTEAD OF 'TEXT' I'LL LIKE IF TO BE ONE OF THE TEXT ARRAY
<div id="fade">TEXT</div>

</body>
</html>