JavaScript - How To Set Form Text Values Based On Select Value With Javascript And Plsql

I have a form that has a pretty complicated combo box - a user starts typing text, it queries a database for matches, and displays the results to the user.

The user can then select the match they desire and it has a value id, which I am currently sending to a hidden field in the form.

So, for example: user starts typing in a movie name, Seven - it returns Seven and user selects it. The form submits the id of the movie seven (say 12) to a hidden field.

Where I am stumped: Once a user selects a movie title, I have another drop down select box that is to display the available formats of the movie by querying my database based on the product id (12) and returning the available formats in the list:

DVD
BLUERAY
VHS

I am pretty good at programming, but I cannot figure this out - how to make the select box fire and return results once the value for the textbox has been captured.

Can anyone help me?

Is there a way to call javascript functions based on the text between a span element?

In other words if I have <span id="mySpan">Bronze</span> then it will call a javascript function but if I have <span id="mySpan">Silver</span> then it will call a different function?

Thanks!

I've been having problems getting my select option to change the options of another select option. I'm not much of a javacsript coder, so I'm at a lost.

When I select the first option nothing appears in the second option.

here's the javascript code:

Code:

function createOption(OptionText, OptionValue){
var temp = document.captcha_form("option");
temp.innerHTML = OptionText;
temp.value = OptionValue;
return temp;
}

function valChange(){
    var firstList = document.getElementById("emailaddress");
    var secondList = document.getElementById("subject");
    while(secondList.hasChildNodes())
        secondList.removeChild(secondList.childNodes[0]);
    switch(firstList.value){
        case "1":{
             secondList.appendChild(createOption("Report Site Browsing Issue", Report Site Browsing Issues));
             secondList.appendChild(createOption("Report Page Errors", Report Page Errors));
             secondList.appendChild(createOption("Other", Other));
             break;
        }
        case "2":{
             secondList.appendChild(createOption("Report Unauthorized Game", Report Unauthorized Game));
             secondList.appendChild(createOption("Report Spam", Report Spam));
             secondList.appendChild(createOption("Report Harassment", Report Harassment));
			 secondList.appendChild(createOption("Report Illegal Activities", Report Illegal Activities));
			 secondList.appendChild(createOption("Request Account Removal", Request Account Removal));
             break;
        }
// ....
        default:{
             secondList.appendChild(createOption("Please select from the first list", ""));
             break;
        }
    }
}
 
window.onload = valChange;

this is the form code

Code:

<div class="mailto_form">
<form method="POST" id="captcha_form" name="captcha_form" action="../includes/mailform.php">
<div style="padding-bottom: 1em;">Choose Recipient: <select name="emailaddress" id="emailaddress" onchange="valChange();">
	<option value=""></option>
	<option value="1">Webmaster</option>
		<option value="2">Admin</option>
		</select>
  </div>
	

<div style="padding-bottom: 1em;">Subject: <br /><select name="subject" id="subject">
  </div>
  
  	<div style="padding-bottom: 1em;">From: <br /><input type="text" name="email" id="email" value="">
	</div>
  
		<div style="padding-bottom: 1em;">Enter the text contained in the image into the text box:
					<br /><img src="../includes/captcha.php" />
					<br /><input type="text" name="userpass" value="">
	</div>
	<div style="padding-bottom: 1em;">Message:
					<br /><textarea name="message" id="message" rows="10" cols="60"><?php echo "</tex" . "tarea>"; ?>				
	</div>
	
	<div style="padding-bottom: 1em;"><input name="submit" type="submit" value="Submit">
	</div>
</form>


</div>

Link to the page http://www.netgamegurus.com/contact/

Hello, I am trying to make a simple code that has a selection list (with the choice fruit or veggie). When the user chooses fruit, the second list displays the options apple, orange, banana. When the user changes their choice to veggie, the second select list then contains carrot, corn, potatoes (and the apple, orange, banana disappear).

I need some advice on how to do this

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<form name = "form1">
 <fieldset>
  <legend>Fruit or Veggie</legend>
	<select name = "S1">
	  <option name = "fruit">Fruit </option>
		<option name = "veggie">Veggie</option>
	</select>
	<select name = "S2"
	</select>
 </fieldset>
</form>

<script language="JavaScript" type="text/javascript">

???

</script>
</body>
</html>

hi ! i would like to write the code for multiple text box select as shown in the link below:


http://www.downloadplex.com/Mobile/I...ne_284120.html


please see the screen shot 3

Hi all, I'm new here and need some help. I don't know Javascript at all.

I have a paypal form that looks like this:

Code:

<FORM action="https://www.paypal.com/cgi-bin/webscr" method="post">
<INPUT type="hidden" name="cmd" value="_s-xclick">
<INPUT type="hidden" name="hosted_button_id" value="VMMCF6CUGBPAN">
<INPUT type="hidden" name="on0" value="DATA">DATA<BR>
<SELECT name="os0">
<OPTION value="250" selected="selected">DATA</OPTION>
<OPTION value="400">DATA</OPTION>
<OPTION value="1000">DATA</OPTION>
</SELECT>

<INPUT type="hidden" name="currency_code" value="USD">
<BR>
<INPUT type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><IMG alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</FORM>

This form works perfectly with my system now. I'm trying to add one fourth option that will redirect to another page, but I'm not sure if changing the name of the select will break the paypal transaction. So I tried this solution:

Code:

<FORM action="https://www.paypal.com/cgi-bin/webscr" method="post">
<INPUT type="hidden" name="cmd" value="_s-xclick">
<INPUT type="hidden" name="hosted_button_id" value="VMMCF6CUGBPAN">
<INPUT type="hidden" name="URL" value="DATA">DATA<BR>
<SELECT name="URL" onchange="window.location.href= this.form.URL.options[this.form.URL.selectedIndex].value">
<OPTION value="250" selected="selected">DATA</OPTION>
<OPTION value="500">500 Words</OPTION>
<OPTION value="1000">1000 Words</OPTION>
<OPTION value="project.html">1000+ Words</OPTION>
</SELECT>
<INPUT type="hidden" name="currency_code" value="USD">
<BR>
<br>
<INPUT type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><IMG alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</FORM>

It works great if I select the fourth option with a internal url in it. But if I choose one of the other options it tries to dynamically change to a page "250", "500", or "1000" and they don't exist.

Also, I'm not sure if changing the select name or the option value will break the transaction with paypal.

What I'd like the form to do is nothing on all options except the fourth; which is a redirect. The first, second, and third option require the used to click a paypal buy now button.

Can't I just take this...

Code:

onchange="window.location.href= this.form.URL.options[this.form.URL.selectedIndex].value"

...put it in the option tag and change it to onSelect or something?

This is as far as I can go. I copied the code and altered it. Can anyone here help please?

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

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

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?

hi everyone, this is my 1st post here in this community forum, just would like to say "HI" to everyone.

i would like to share with you my experience in developing multiple dependency selection form developed in java script, how this script works is that when 1st selection is selected, based on the value the user select, a second level selection will appear and so on.

below is the Java-script code along with my form code too

Javascript:
<script type="text/javascript">

function nextSelect(o) {

if (o.value == '0') {
var next = o.nextSibling;
while (next && next.nodeName != 'SELECT') {
next = next.nextSibling;
}
next.length = 0;

return;
}
var d = document;

var useSelect = d.getElementById(o.name + '_' + o.value);

if (!useSelect) {
alert('Unknown id: ' + o.name + '_' + o.value);
return;
}

var copy = useSelect.cloneNode(true);
copy.style.display = 'inline';

var next = o.nextSibling;
while (next && next.nodeName != 'SELECT') {
next = next.nextSibling;
}
next.parentNode.insertBefore(copy, next);
next.parentNode.removeChild(next);
}
</script>

my form:
<div style="display: none;">

<!-- ##### First Selection ####### -->

<select name="second" id="first_dp" onchange="nextSelect(this);">
<option value="0">Choose</option>
<option value="dp_2_38">2 3/8'</option>
<option value="dp_4">4'</option>
</select>

<select name="second" id="first_hw" onchange="nextSelect(this);">
<option value="0">Choose</option>
<option value="hw_3_12">3 1/2'</option>
<option value="hw_4">4'</option>
</select>

<!-- ####### 2nd Selection ####### -->

<select name="third" id="second_dp_2_38" onchange="nextSelect(this);">
<option value="0">Choose</option>
<option value="dp_2_38_4.85">4.85 lbs/ft</option>
<option value="dp_2_38_6.65">6.65 lbs/ft</option>
</select>
<select name="third" id="second_dp_2_78" onchange="nextSelect(this);">
<option value="0">Choose</option>
<option value="dp_2_78_6.85">6.85 lbs/ft</option>
<option value="dp_2_78_10.4">10.4 lbs/ft</option>
</select>

>>>>>>and so on till 3rd selection<<<<<<<<<

</div>

<form action="pdfHandle.php" method="post" id="pdfsearch">
<fieldset>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="142" height="146">
<p>
Type:<br />
Size:<br />
Weight:<br />
</td>
<td width="266"><select name="first" onclick="nextSelect(this);">
<option value="0">Choose</option>
<option value="dp">Drill Pipe</option>
<option value="hw">Heavy Weight</option>
</select><br/>
<select name="select">
</select>
<br/>
<select name="select">
</select>
<br/>
<select name="select">
</select>

</td>
</tr>
</table>
<p>
<input type="submit" name="submit" id="submit" value="Create PDF" />
<input type="reset" value="Reset Selection" />
</p>
</fieldset>
</form>
-----------------------------------------------------------------------

i would like to know what i am missing here and what is making Safari n chrome not to run this page properly, when u execute this code, only the 1st selection will appear while the rest of the selections are Null, i hope someone will guide me through this or direct me to solution or any other way of doing this perhaps

i thank you for viewing this post.

Hi gud mng,

I have one problem...

How to process textbox values/ call textbox values in JS through a Java program.
My text box values are dates. I have to process these dates.

Like in online banking we select day to know our transactions. After submitting we get results. remember my files are in my directory only. No need of database.

My files are look like 20100929, 20100930, 20101001

For epoch_classes.js, epoch_styles.css u can download coding from this link : http://www.javascriptkit.com/script/...ch/index.shtml


Code:


Code:

<html>

<table width="900" border="0" cellpadding="10" cellspacing="10" style="padding:0"> 
<tr><td id="leftcolumn" width="170" align="left" valign="top"> 
<div style="margin-left:0px;margin-top:0px"><h3 class="left"><span class="left_h2">Select Option</span></h3> 
<a rel="nofollow" target="_top" href="day_wise.htm" >Day-wise</a><br />  <br />
<a rel="nofollow" target="_top" href="between.htm" >Between Days</a> 

<link rel="stylesheet" type="text/css" href="epoch_styles.css" />


<script type="text/javascript" src="epoch_classes.js"></script>

<script type="text/javascript">

var cal1, cal2;      
window.onload = function () 
{
cal1= new Epoch('epoch_popup','popup',document.getElementById('popup_container1'));
cal2= new Epoch('epoch_popup','popup',document.getElementById('popup_container2'));
};

/*............*/
function confirmation(f) 
{
	
	var startdate = f.fromdate.value
        var enddate = f.todate.value
        var myday=new Date()

        var yr=myday.getFullYear()
        var mn=myday.getMonth()+1
        var dt=myday.getDate()

        var today=""
        var present, ys, ms, ds, ye,me,de, start, end
           
        if(mn < 10) {  mn = "0" + mn }

        if(dt <10) { dt = "0" + dt } 
 
        today= yr + "/" + mn + "/" + dt
	
        present=yr + "/" + mn + "/" +dt

                     
        if (today < startdate ) 
           {
            alert (" Start date should not be exceed to-day's date " + present )
            startdate.focus()
            return false
           } 
  
        if (today < enddate )
           {
            alert (" End date should not be exceed to-day's date " + present )
            enddate.focus()
            return false
           }

         

         if (today == startdate ) 
           { 
            alert(" You are selected to-days date as Starting day" );
           

            }
   
        var answer = confirm("Do you want to continue ?")        

        if (answer)
           {    if( startdate < enddate)         
		 alert("Dates between " + startdate + " to " + enddate + " are confirmed" )
		else
                  alert("Dates between " + enddate + " to " + startdate + " are confirmed" )     
	   }
	
        else
           {
		alert("Date not confirmed")
                window.location="to_date.htm"; 
           }

        ys= startdate.substring(0,4);
	ms= startdate.substring(5,7);
	ds= startdate.substring(8,10);

        start=ys + "" + ms + "" +ds          
  
        ye= enddate.substring(0,4);
	me= enddate.substring(5,7);
	de= enddate.substring(8,10);
 
        end=ye + "" + me + "" +de

      
}
/*.......................................................*/
</script>

<div style="margin-left:100px;">


<body>
<style type="text/css">
#conf
{
margin-left:115px;
} 
</style>


<td align="left" valign="top"> 
<table width="100" border="0" cellpadding="0" cellspacing="0"> 
<td style="padding-top:0px"> 
</table>

<h4>From Date</h4>

<form name= "formbet" id="placeholder" method="post" action="#" >
<input id="popup_container1" type="text" name= "fromdate" maxlength="10" size="20"/>


<td align="left" valign="top"> 
<table width="300" border="0" cellpadding="0" cellspacing="0"> 
<td style="padding-top:20px"> 


<h4>To Date</h4>
<input id="popup_container2" type="text" name= "todate" maxlength="10" size="20"/> <br /> <br />
<input id="conf" type="button" onclick="confirmation(this.form)" value="Submit">
</form>


</body>
</html>

In my coding, ys, ms, ds represents year starting, month starting, starting day...
ye, me, de represents end...

start,end gives file names in the format of yyyymmdd

now i want to process files from 20100101 to 20100930

means from date is 2010/01/01 and to date is 2010/09/30

if i press submit button the files from 20100101 to 20100930 are processes

here ys=2010 ms=01 ds =01 and ye=2010 me=09 de= 30

For this how do i call these textbox values (from date text box and todate) to another program (java)

Thanks in advance.

Ok so let's say I have this dropdown with a list of these items:

PALCO
TRIBUNA
ORO

And in a button on the page I want to send it one of those names, let's say I send it ORO, and through Javascript select that in the dropdown list. How is this done? Do I have to iterate through everything, and how?

Thanks for any help in the subject.

I am trying to change a character limit based on items changed in a drop down menu. To do this I have one function that will change the posted count based on the currently selected option and another function that is a commonly used char count with a few tweaks.

The main issue is getting the value of the currently selected option. I know that selectedIndex will return the position of the selected element rather than the actual value. I tried to code around that. I've tried every method I could find on google and nothing works. So, I may have a bigger problem on a higher level that I just don't understand. If any of you can take a look at my code and give me your thoughts I would be most appreciative. Thanks!

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" xml:lang="en" lang="en">
<head>
  <title></title>
 <script type="text/javascript"> 
function checkTextArea(fromto){

var textstring = "textarea";
var id = textstring + fromto;
var destination = document.forms["form1"].[id.selectedIndex].text;

if (destination=="1") {
var limit = "500";

}
else {
var limit = "1000";

}


     if (document.getElementById(id)){
         var txt = document.getElementById(id).value;
         if (txt.length>limit){
             document.getElementById(id).value = txt.substr(0,limit);
         }
         len = document.getElementById(id).value.length;
         span_id = "span" + id;
         if (document.getElementById(span_id)){
           document.getElementById(span_id).innerHTML = (limit-len);
         } // if
     } //if
} //function


function chardisplay(fromto) {

var deststring = "dest";
var identifier = deststring + fromto;

// no idea how to make this work...seems to stop working whenever I try to assign it to any kind of variable
// I have also tried assigning .value and .text
// I have also tried naming it with document.forms["form1"].[identifier.selectedIndex]
   // also using .value and .text
var harmless = document.getElementById('identifier').selectedIndex;
alert("value="+document.getElementById('identifier').value);
alert("text="+document.getElementById('identifier').options.[harmless].text);

var spanstring = "spantextarea";
var spanidentifier = spanstring + fromto;

if (harmless=="1") {
document.getElementById(spanidentifier).innerHTML = "500";
}

else {
document.getElementById(spanidentifier).innerHTML = "1000";
}

}
</script>
  
</head>
<body>

<form id="form1" name="form1" method="POST" action="myurl">

<p><span id="spantextareafrSOMENUMBER">500</span> characters left </p>

<select name="destfrSOMENUMBER" onchange="javascript:chardisplay('frSOMENUMBER');\" onfocusout="javascript:chardisplay('frSOMENUMBER');\" onblur="javascript:chardisplay('frSOMENUMBER');\">
<option value="opt1">display option 1</option>
<option value="opt2">display option 2</option>
<option value="opt3">display option 3</option>
</select>

<textarea onkeyup="checkTextArea('textareafrSOMENUMBER');" name="mesgfrSOMENUMBER" id="textareafrSOMENUMBER" cols=50 rows=4></textarea>
</form>
</table>
</body>
</html>

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 all,
Can anyone help me with this… I do not know if this is possible to be done…
Instead of text:

"Your favorite color is <b>Green</b> right?"

I need to show form like this:
Code:

<form action="auto.htm" method="get" >
Your state<br> 
<select name="statecode" id="statecode">
<option value="">Choose State...</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
</select> 
<input type="submit" name="search" value="Get Quotes" />
</form>

Thank you in advance

This is code I wish to modify.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
html,body {
    padding:0;
    height:100%;
 }
#right {
    width:500px;
    height:100%;
    background-color:#999;
    text-align:center;
    float:right;
 }
#left {
    height:100%;
    margin-right:500px;
    background-color:#f00;
    text-align:center;
 }   
</style>
<script type="text/javascript">
function change()
{
   switch (document.getElementById("select").value)
   {
      case "1":
      document.getElementById("change").innerHTML = "Your favorite color is <b>Green</b> right?"
      break;
      case "2":
      document.getElementById("change").innerHTML = "Your favorite color is <b>Red</b> right?"
      break;
      case "3":
      document.getElementById("change").innerHTML = "Your favorite color is <b>Yellow</b> right?"
      break;
   }
}
</script>
</head>
<body>
What is your favorite color
<select onchange="change()" id="select">
   <option value="">------</option>
   <option value="1">Green</option>
   <option value="2">Red</option>
   <option value="3">Yellow</option>
</select>
<div id="change" style="margin:10px;width:200px;height:100px;padding:5px;">
   Original Text
</div>
</body>
</html>