JavaScript - Auto Populating Inputs Based On Value Of Another Input

I am using this script to automatically set the current date on a form... However, when I post the form, it is actually putting the Day +1 into the database (the year and month are correct). So for example if I set the date to June 8, 2011 on the form, it will post into the db as 2011-06-09. I am not sure whats going on...

Also, if the form has a missing input field (and the form reloads), the date resets back to the current date, instead of retaining the php-printed date values.

In the head, I have:
Code:

<script>
var monthtext=['January','February','March','April','May','June','July','August','September','October','November','December'];

function populatedropdown(dayfield, monthfield, yearfield){
var today=new Date()
var dayfield=document.getElementById(dayfield)
var monthfield=document.getElementById(monthfield)
var yearfield=document.getElementById(yearfield)
for (var d=1; d<32; d++)
dayfield.options[d]=new Option(d, d+1)
dayfield.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today's day
for (var m=0; m<12; m++)
monthfield.options[m]=new Option(monthtext[m], monthtext[m])
monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month
var thisyear=today.getFullYear()
for (var y=0; y<4; y++){
yearfield.options[y]=new Option(thisyear, thisyear)
thisyear-=1
}
yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}

</script>

In the form I have:
Code:

<script type="text/javascript">
			//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
			window.onload=function(){
				populatedropdown("daydropdown", "monthdropdown", "yeardropdown")
			}
			</script>
 
          <tr>
            <td>
              <select name="Month" id="monthdropdown">
                <option value="<?php print "$Month"; ?>"><?php print "$Month"; ?></option>
              </select>
              
              <select name="Day" id="daydropdown">
                <option value="<?php print "$Day"; ?>"><?php print "$Day"; ?></option>
				
              </select>
          
              <select name="Year" id="yeardropdown">
                <option value="<?php print "$Year"; ?>"><?php print "$Year"; ?></option>
				
              </select>
            </td>
          </tr>

Does anyone know how to go about getting a function a bit like fckeditor / ckeditor where when you type a full URL into the 'link to' box it automatically removes the 'http://' part on the fly (i.e. as soon as another character after the initial 'http://' is typed), just leaving the user with www.etc.... in the input?

I am trying to build something similar, and am a bit lost going through the fckeditor code!

Thanks,
Neil

Hello, I am trying to change the value of #name and #category inputs based on the value of select. A friend gave me the code below, but I can't get it to work. Thanks so much for your help

Code:

     
<script type="text/javascript">  
$('#Gift_Type').change(function(){
if ($(this).val() == 'Monthly'){
$('#name').val('Partnership')
$('#category').val('Partnership')
} else {
$('#name').val('Donation')
$('#category').val('Donations')
}
})
</script>

Code:

<SELECT NAME="sub_frequency" ID="Gift_Type" onchange="OnSelectionChanged (this)">
<OPTION VALUE="1m">Monthly</OPTION>
<OPTION VALUE="">One Time</OPTION>
</SELECT>

Code:

<input type="text" id="name" name="name" value="Partnership" />
<input type="text" id="category" name="category" value="Partnership" />

Dear expert (Ok, i am new to this and should maybe not address this as a letter )

I hope someone can help me ... this is what i want to achieve (I am using frontpage)

I want to create a table (this i can do!) that require a user input (number of guests).

It then has SEVERAL options:

- Select an option from a drop down list, and a price is then loaded from somewhere to create a total for that option and display it in the table (And keep that total for adding later)

- Check a box, and if checked it creates a further calculation, displaying and storing the number for further calculation.

a number of the above options, and a grand total on the bottom.

I found more or less a page on a site that does what i am looking for, but after looking at the code, i have even LESS of an idea how it works

Can someone PLEASE help me, or point me in the right direction?

(I am not looking for someone to just write the code for me, as this will not teach me anything, and i want to learn)

Below is a link to the example ..

http://www.ouma-se-kombuis.co.za/test.html

Thank you!

Hi there, I'll try to be brief:

When a user submits a website in the input field on my site, I'd like there to be a background process that takes a screenshot of that website and then displays that image to the user.

This website does it perfectly. The user writes the website to the right, and the screenshot is displayed to the left. I'm looking for a free alternative, and read that perhaps webkit(s) might be the solution? I'm a total newbie when it comes to this so any feedback is gold to me.

Thank you so much guys/gals.

Hi..

I have forms and I only need to input is the Demanded Qty, and from Demanded Qty that I input it will compute the demanded qty for each Item Code.

Now my problem is I don't know on how can it possible that while i input the quantity it will also autodisplay the demanded qty for each materials.

Noted: the Demanded Qty that will auto display is display only on the Demanded Qty you input per Items.
For Example:

On Item = P28 i input demanded qty, only on the ItemCode will display the output.

and when i input on P30 the computation will display on the ItemCode for P30.

here is my code:

PHP Code:
<?php                                                                          
   error_reporting(0);
   date_default_timezone_set("Asia/Singapore"); //set the time zone  
$con = mysql_connect('localhost', 'root','');

if (!$con) {
    echo 'failed';
    die();
}

mysql_select_db("mes", $con);
?>
<html>
<title>Stock Requisition</title>
<head>
<link rel="stylesheet" type="text/css" href="kanban.css">

<script type="text/javascript">
function compute_quantity(){
    var DemandedQty = document.getElementById('DemandedQty').value;
    var Quantity = document.getElementById('Quantity').value;
    
    var SubQty = (DemandedQty * Quantity);
}
</script>
</head>
<body>
<form name="stock_requisition" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
 <div>
<table>
<thead>
<th>Items</th>
<th>Sub Items</th>
<th>Item Code</th>
<th>Demanded Qty</th>
<th>UoM</th>
<th>Class</th>
<th>Description</th>
<th>BIN Location</th>
</thead>
<?php

$DemandedQty = $_POST['DemandedQty'];

$sql = "SELECT DISTINCT Items FROM bom_subitems ORDER BY Items";
$res_bom = mysql_query($sql, $con);

while($row = mysql_fetch_assoc($res_bom)){
    
    $Items = $row['Items'];
    $Items_ = substr($Items, 12, 3);
    
echo "<tr>
        <td style='border: none;font-weight: bold;'>&nbsp;<input type='name' value='$Items_' name='Items_[]' id='Items' readonly = 'readonly' style = 'border:none;width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td>
        <td style='border:none;'>&nbsp;</td>
        <td style='border:none;'>&nbsp;</td> 
        <td style='border: none;'><center><input type='text' name='DemandedQty[]' id='DemandedQty' value='' size='12' onkeypress = compute_quantity()></center></td>     
        </tr>"; 
             
$sql = "SELECT Items, SubItems, ItemCode, UoM, Class, Description, BINLocation, Quantity FROM bom_subitems WHERE Items = '$Items' ORDER BY Items"or die(mysql_error());

$res_sub = mysql_query($sql, $con);  
 
 while($row_sub = mysql_fetch_assoc($res_sub)){

     $Items1 = $row_sub['Items'];
     $SubItems = $row_sub['SubItems'];
     $ItemCode = $row_sub['ItemCode'];
     $UoM = $row_sub['UoM'];
     $Class = $row_sub['Class'];
     $Description = $row_sub['Description'];
     $BINLocation = $row_sub['BINLocation'];
     $Quantity = $row_sub['Quantity']; 
   
    echo "<input type='hidden' name='Quantity' id='Quantity' value='$Quantity'>";
    echo "<tr>
        <td style='border: none;'>&nbsp;<input type='hidden' value='$Items1' id='Items1' name='Items1[]'></td>
        <td style='border: none;'>&nbsp;<input type='text' name='SubItems[]' value='$SubItems' id='SubItems' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td>
        <td style='border: none;'>&nbsp;<input type='text' name='ItemCode[]' value='$ItemCode' id='ItemCode' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td>
        <td style='border: none;'><center><input type='text' name='SubQty[]' id='SubQty' value='' size='12' style></center></td>
        <td style='border: none;' size='3'>&nbsp;<input type='text' name='UoM[]' value='$UoM' id='UoM' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;' size='3'></td>
        <td style='border: none;'>&nbsp;<input type='text' name='Class[]' value='$Class' id='Class' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td>
        <td style='border: none;'>&nbsp;<input type='text' name='Description[]' value='$Description' id='Description' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;' size= '30'></td>
        <td style='border: none;'>&nbsp;<input type='text' name='BINLocation[]' value='$BINLocation' id='BINLocation' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td>     
        </tr>";    
        
}
}               
?>
</table>
</div>

</form>
</body>
</html>

Thank you so much

Hi all,

I use a javascript to generate a checkbox list.
It works well but all the <input type="checkbox"> generated have the same id.

I would like to find a way to auto-implement the id (with a unique id). So if my javascript generates 10 checkboxes, I will get id from 1 to 10 or something similar.

Code:

// here I build the filter checkboxes based on all the class names
$.each(arrayUniqueClasses, function() {
$('<li><input class="styled" type="checkbox" checked="checked" name="1" value="'+this+'" id="1" />
<label class="check" for="1"></label>
<label class="info" for="filterID'+this+'">'+this+'<\/label><\/li>').appendTo('ul.filters');
});

so I tried something but it doesn't work at all (I'm a beginner as you can guess) :

Code:

var getUniqueId =
(function ()
{
var id=0;
return function()
{
if (arguments[0]==0) id=0;
return id++;
}
}
)();

Thanks for helping


here the full script if needed :
Code:

function unique(a) {
	tmp = new Array(0);
	for(i=0;i<a.length;i++){
		if(!contains(tmp, a[i])){
			tmp.length+=1;
			tmp[tmp.length-1]=a[i];
		}
	}
	return tmp;
}


function contains(a, e) {
	for(j=0;j<a.length;j++)if(a[j]==e)return true;
	return false;
}

function removeItems(array, item) {
	var i = 0;
	while (i < array.length) {
		if (array[i] == item) {
			array.splice(i, 1);
		} else {
			i++;
		}
	}
	return array;
}


$(document).ready(function () {
	
	
	if ($('.filterThis > li').length < 2) { return; }
	
	var stringOfClassNames = '';
	
	$('.filterThis > li').each( function (i) {
		var thisClassString = $(this).attr('class');
		stringOfClassNames = stringOfClassNames +' '+ thisClassString
	});

	stringOfClassNames = jQuery.trim(stringOfClassNames);

	var arrayClasses = stringOfClassNames.split(' ');
	
	var arrayClasses = arrayClasses.sort();
	totalNumberOfItemsToFilter = $('.filterThis > li').length;

	var result = new Object();
	for (var filterClass in arrayClasses) {
		if (result[arrayClasses[filterClass]] === undefined) {
			result[arrayClasses[filterClass]] = 1;
		} else {
			result[arrayClasses[filterClass]]++;
		}
	}
	var resultsToRemoveFromFilters = new Array();
	for (var item in result) {
		if (result[item] == totalNumberOfItemsToFilter) {
			resultsToRemoveFromFilters.push(item);
		}
	}

	arrayUniqueClasses = (unique(arrayClasses));

	if (arrayUniqueClasses.length > 1) {


		$('<ul class="filters"><\/ul>').insertAfter('h3');

		$.each(arrayUniqueClasses, function() {
			$('<li><input class="styled" type="checkbox" checked="checked" name="1" value="'+this+'" id="0" /><label class="check" for="0"></label><label class="info" for="filterID'+this+'">'+this+'<\/label><\/li>').appendTo('ul.filters');
		});

		var classesStringOfSin = new Array();
		classesStringOfSalvation = arrayUniqueClasses;

		$('.filterThis > li').addClass('filterTriggerShown');

		$('.filters input').click( function() {
			var value= $(this).val();
			stringValue = '.filterThis > li.'+value;

			if ($(this).is(':checked')) {

				classesStringOfSalvation.push(value);

				classesStringOfSin = removeItems(classesStringOfSin, value);

				$(stringValue).removeClass('filterTriggerHidden').addClass('filterTriggerShown').slideDown();

			} else {

				classesStringOfSin.push(value);
				classesStringOfSalvation = removeItems(classesStringOfSalvation, value);

				$(stringValue).removeClass('filterTriggerShown').addClass('filterTriggerHidden');
				$.each(classesStringOfSalvation, function() {
					var newStringValue = stringValue+'.'+this;
					$(newStringValue).removeClass('filterTriggerHidden').addClass('filterTriggerShown');
				});
				$('.filterTriggerHidden').slideUp();
			}

		});
	}
});

I have a registration form that I am working on in which I need to assign a price to each option in a selection box then write that price in the document.
Then I have a radio button that will add (different amounts based on selection) to that price before it is written. Then I have another radio button that just needs to write a price based on its selection. Both of these values will be written and then totaled. (See below for a less confusing explanation)

On HTML form:
>drop down list (name courseName, value of selections 1,2,3,4)
> radio button (name returnStudent, value of selections 1,2)
> radio button (name bookNeeded, value of selections 1,2)


Table (name totalprice) at the bottom of the form:
price1: price of courseName plus returnStudent (td with name tuitionprice)
price2: price of bookNeeded (td with name bookprice)
Total of the above (td with name totalprice)

This is what I am trying to make work...
Code:

var selectedCourse = document.onsiteRegistration.courseName.value;
var selectedStudent = document.onsiteRegistration.returnStudent.value;
function setTuition()
{
	if (selectedCourse == "1" && selectedStudent =="1")
	{
		document.write("12345");
	}

	if (selectedCourse == "1" && selectedStudent =="2")
	{
		document.write("54321");
	}
}

Then in my HTML I have simply put this to call the function and write it where I need it to be placed. <script>setTuition()</script>

I am trying to find some examples of something like this but all I am coming up with is shopping carts and that is not what I need here. I am fairly confident that I can program the second part (totaling) if I can only get the selections to populate the different prices for me. If someone could point me in the right direction I would be very grateful!

Hi Guys,

I'm fairly new to Javascript and would be grateful for any help you can give me. I've had a search on Google and found a couple of potential solutions but nothing seems to work quite right for what I need.

Basically I have a form with several questions followed by Yes/No radio buttons. Dependent on which answer is given, I want to display a different message above the text box.

For example, if you answered 'no' to a certain question then the message above the text box would change to say "Please fill in additional information" or something along those lines.

Below is the HTML to give you an idea of what I mean.

Code:

<table>
<tr>
<td>&nbsp;</td>
<td><label class="bold">Yes</label></td>
<td><label class="bold">No</label></td>
</tr>
<tr>
<td><label for="property_q1"> - Is this your house?</label></td>

<td><input name="property_q1" id="property_q1" type="radio" value="Yes" /></td>

<td><input name="property_q1" id="property_q1" type="radio" value="No" /></td>
</tr>
</table>

<br />

<div id="fine">It's fine, don't worry about filling it in.</div>
<div id="fill" style="display:none">Please fill in the form below.</div>
<table>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><textarea name="info" id="info" cols="60" rows="5"></textarea></td>
</tr>
</table>
<input type="submit" />

Hi ya all,
how can I show / hide the content of sub divs based on whether the input is != or =

and be able to repeat this.

I tried to hide the sub divs using , onclick if bla bla = '' ;
Code:

document.getElementById('hideme').innerHTML = '';

which works, but once I try to enter a new input, then nothing happens, even if the content of the sub divs is = input

thx

So I am trying to make a form that will eventually take the user to a specified link. It is a form that uses drop down menus. I based this off of someone elses code (with permission ), but it shows everything <= user input. I cannot for the life of me figure out how to make it only show only one of the next options.
here is the JS code:
Code:

<script language="JavaScript">
function ShowMenu(num, menu, max)
        {
                
                for(i = 1999; i <= num; i++){
                     var menu2 = menu + i;
                        document.getElementById(menu2).style.display = 'block';
                }
                var num2 = num;
                num2++;
                while(num2 = max){
                        var menu3 = menu + num2;
                            document.getElementById(menu3).style.display = 'none';
                        num2=num2+1;
                }
        }
</script>

This is only the JS code. I didn't want to waste space with the rest of the code. If you want to see it let me know and I can include that.

I am sure this is rather basic, but my JS knowledge is less than that...It has been some time since undergrad computer science class.
Thanks in advance for any help!

Hi, what would be the best way to have a hidden array of possible text directed at a textarea and then if something is not within that array "onfocus", a certain select option is chosen within that form?

Thanks

Hi,

I'm hoping this will be an easy one for you experts out there.

I am working on a convention registration form.

What I'm trying to do is have the text "50.00" pop into the COST field when any text (even if it's only one character) is entered into the NAME field.

If the text in the NAME field is deleted, the "50.00" should also be deleted.

Does anyone have a script that does this?

Thanks!

I am fairly new at Javascript, but there is something happening I do not understand. Please someone explain it to me and help with a solution.

In the function, I pull data from an URL and I have done this with several different data fields and populate the HTML input, option, and check boxes with no problem with the following method.

Code:

document.getElementById("othertxt").value=strValue;
document.getElementById("radsig").checked=true;
document.getElementById("eventtime").value=strValue;

But for some reason this method for textarea does not work and I know that there is a value in strValue because check it right before the line of code.

Code:

document.getElementById("othertxt").value=strValue;

Is textarea just treated differently? I have searched the internet and seen examples but for some reason I can not find the correct solution.

Hi,
Iam trying a simple fill listbox on the body load, but its not working. Can someone please help me on this
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script language="javascript" src="script.js"></script>
<body onload="fillCategory();">
<form id="drop_list" name="form1" method="post" action="">
  <label>
    <select name="Category" id="Category">
    </select>
  </label>
</form>
</body>
</html>

and my script.js:
Code:

function fillCategory(){ 
addOption(document.form1.Category, "Fiji", "Fiji", "");
addOption(document.form1.Category, "Australia", "Australia", "");
addOption(document.form1.Category, "New Zealand", "New Zealand", "");
}