• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 247
  • Last Modified:

Form field drop down, with selection and different loading...

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21354864.html

I wrote a question above needing something like this.  But not what I need now.  So... from the code I have, I've tried very hard to get the drop down to spit out different results based on my selection from the drop down box.  I put everything in div tags with id's named as they would be in the javascript.

here's my code:

function doit(obj)
{
var temp = obj.options[obj.selectedIndex].value
if(temp == "revshare")
document.getElementById('ranges_perc').style.display = 'block';
else if(temp == "All")
{
document.getElementById('ranges_perc').style.display = 'none';
document.getElementById('ranges_dol').style.display = 'none';
}
else

document.getElementById('ranges_dol').style.display = 'block';


what im basically needing is the following
someone comes to the site, they select say "All" or "Revshare" the box drops down, as it's supposed to in the code but if I go to change that to say "per signup" or something, it leaves whatevers in the revshare div tag, and also puts the per signup stuff below that.  I'm not sure how to get this worke out or situated...

let me know!
0
lamerhooDJV
Asked:
lamerhooDJV
  • 9
  • 7
1 Solution
 
archrajanCommented:
post ur html now
0
 
lamerhooDJVAuthor Commented:
<html>
<head>
      <title>beta search</title>
</head>
<style>
body
{
      background-color: #FFFFF;
      font-family: Verdana;
      font-size: 12px;
      color: #000000;
}
table
{
      font-family: Verdana;
      font-size: 12px;
      color: #00000;
}
.heading
{
      font-family: Verdana;
      font-size: 18px;
      font-weight: bold;
      color: #336699;
}
.smallheading
{
      font-family: Verdana;
      font-size: 14px;
      font-weight: bold;
      color: #336699;
}
</style>

<script>
function doit2(obj)
{
var temp = obj.options[obj.selectedIndex].value
if(temp == 1)
document.getElementById('processor').style.display = 'block';
else
document.getElementById('processor').style.display = 'none';
}

function doit(obj)
{
var temp = obj.options[obj.selectedIndex].value
if(temp == "revshare")
document.getElementById('ranges_perc').style.display = 'block';
else if(temp == "All")
{
document.getElementById('ranges_perc').style.display = 'none';
document.getElementById('ranges_dol').style.display = 'none';
}
else
document.getElementById('ranges_dol').style.display = 'block';
/*var temp = obj.options[obj.selectedIndex].value
      if(temp == "All")
      {
            document.getElementById('ranges1').style.display = 'none';
            document.getElementById('ranges2').style.display = 'none';
      }
      else
      {
            if(temp == "revshare")
            {
                  //document.getElementById('ranges1_perc').style.display = 'block';
                  document.getElementById('ranges_perc').style.display = 'block';      
            }
            else
            {
                  //document.getElementById('ranges1_dol').style.display = 'block';
                  document.getElementyById('ranges_perc').style_display = 'none';
                  document.getElementById('ranges_dol').style.display = 'block';      
            }
      }*/
}

/*function doit(obj)
{
if(obj.selectedIndex >0)
document.getElementById('ranges').style.display = 'block';
else
document.getElementById('ranges').style.display = 'none'
}
*/
function loadit()
{
doit2(document.getElementById('stats_system')) // this line was wrong in my previous post
doit(document.getElementById('progtype'))
}
</script>
<body onload =" loadit();">

<span class="heading">
Search (beta)
</span>
<br />

<br />
Please choose your payment methods and program types below.<br /><br />
<form action="/work/webmasterdepot.com/search.php" method="GET">
<table border="0" cellspacing="0" cellpadding="0" width="800">
      <tr valign="top">
            <td width="300">
            <span class="smallheading">
            Category:<br />
            </span>
            <select name="cat"><option value="All">All</option><option value="1">Mainstream Affiliate Programs</option><option value="2">Casino Affiliate Programs</option><option value="3">Dating Affiliate Programs</option><option value="4">Medical Affiliate Programs</option><option value="5">Adult Affiliate Programs</option><option value="6">Adult Verification Systems</option><option value="7">Billing Services Affiliates</option><option value="8">Billing Services Merchants</option><option value="9">Pay-Per-Click Search Engines</option></select>

            </td>
            <td width="300">
            <span class="smallheading">
            Stats System:<br />
            </span>
            <select NAME="stats_system" id="stats_system" onchange="doit2(this);"><option SELECTED value="All">All</option><option value="1">Processor</option><option value="2">Custom</option><option value="5">Affiliate Wiz</option><option value="4">AffiliateLink</option><option value="32">AssocTRAC</option><option value="33">B&C</option><option value="8">ClickMAN</option><option value="9">Code Worx</option><option value="10">DHDRevEx</option><option value="29">DirectTrack</option><option value="12">EAffiliate</option><option value="38">Executive Stats</option><option value="13">EZPartner</option><option value="41">FriendFinder Network</option><option value="36">HealthStop</option><option value="42">iDevAffiliate</option><option value="14">Monolith</option><option value="15">MPA2</option><option value="16">MPA3</option><option value="17">MyAffiliateProgram</option><option value="18">MystroEnterprises</option><option value="19">NATS</option><option value="43">No Credit Card</option><option value="31">Playtech</option><option value="40">Post Affiliate Pro</option><option value="21">RiverStyx</option><option value="22">ShowMeStats</option><option value="24">StatsMegaPlex</option><option value="27">SysRefer</option><option value="28">Ultimate Affiliate</option><option value="39">X3 PartnerSoft</option></select><div id="processor" style="display:none"><SELECT NAME="proc" id="proc"><OPTION VALUE="1">CC Bill</OPTION><OPTION VALUE="2">Epoch</OPTION><OPTION VALUE="3">Ibill</OPTION><OPTION VALUE="5">Jettis</OPTION><OPTION VALUE="7">No Credit Card</OPTION><OPTION VALUE="4">Verotel</OPTION><OPTION VALUE="6">VXS Bill</OPTION></select><br /><br /></div>

            
            </td>
      </tr>
      <tr>
            <td>&nbsp;</td>
      </tr>
            <tr valign="top">
            <td width="300">
            <span class="smallheading">
            Currency:<br />

            </span>
            <select name="cur"><option value="All">All</option><option value="1">AUD</option><option value="2">EUR</option><option value="3">USD</option><option value="4">GBP</option><option value="5">SEK</option>
            </td>
      </tr>
      <tr>
            <td>&nbsp;</td>

      </tr>
      <tr valign="top">
            <td width="300">
            <span class="smallheading">
            Payment Methods:<br />
            </span>
            <select name="payment"><option value="All">All</option><option value="1">Standard Check</option><option value="2">Overnight Check</option><option value="3">Wire Transfer</option><option value="4">Direct Deposit</option><option value="5">Epassporte</option><option value="6">PayPal</option><option value="7">MoneyBookers</option><option value="8">Other</option></select>

            </td>
            <td width="300">
            <span class="smallheading">
            Program Types:<br />
            </span>
            <select name="progtype" id="progtype" onchange =" doit(this);"><option value="All">All</option><option value="revshare">Revshare</option><option value="persignup">Per signup</option><option value="perconversion">Per conversion</option><option value="perlead">Per lead</option><option value="perclick">Per click</option><option value="peremail">Per email</option><option value="perdownload">Per download</option><option value="perinstall">Per install</option><option value="dialer">Dialer</option><option value="webmasterreferral">Webmaster referral</option></select><div id="ranges_dol" style="display:none">dfsf</div><div id="ranges_perc" style="display:none"><input type="text" id =" ranges1" size="2" name="ranges1" value="ranges here">%<input type="text" id =" ranges2" size="2" name="ranges2" value="ranges here">%</div>

            </td>
      </tr>
</table>
<br /><br />
<input type="submit" name="search" value="   Search   "></html>

----------------------------------------------------

oh hey, you already know the situation since you've helped me :)
0
 
archrajanCommented:
>>>someone comes to the site, they select say "All" or "Revshare" the box drops down, as it's supposed to in the code but if I go to change that to say "per signup" or something, it leaves whatevers in the revshare div tag, and also puts the per signup stuff below that.  I'm not sure how to get this worke out or situated..


yup! can u explain this a bit on how to recreate the steps to see the problem
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
lamerhooDJVAuthor Commented:
alright...

as you know, All doesn't show anything (or I'd it that way, if at all possible)...

Anyways.  Say a user goes to the site and selects revshare" their selection would esentially drop down two boxes with a % sign at the end of each box.  And if they go to any other selection (afer selecting revshare) it will keep the revshare on the page and display the new selection under it.

Hope that helps :)
0
 
archrajanCommented:
so now the revshare should not be there right?
0
 
lamerhooDJVAuthor Commented:
If anything else is selected, that's correct :)
0
 
archrajanCommented:
This is ur updated function

function doit(obj)
{
var temp = obj.options[obj.selectedIndex].value
if(temp != "revshare")
document.getElementById('ranges_perc').style.display = 'none';
else
document.getElementById('ranges_perc').style.display = '';
if(temp == "All")
{
document.getElementById('ranges_perc').style.display = 'none';
document.getElementById('ranges_dol').style.display = 'none';
}
else
document.getElementById('ranges_dol').style.display = 'block';
}
0
 
lamerhooDJVAuthor Commented:
Hmm... it doesn't seem to like that, no box drops :/
0
 
archrajanCommented:
How come.. it works for me...?
0
 
lamerhooDJVAuthor Commented:
Error: syntax error
Source File: http://localhost/work/webmasterdepot.com/search.php
Line: 80
Source Code:
}

Scratch that, I had an error with the code... I left a trailing "}"...

Anyways... alright.  Now it seems to load the '"dsf" text I put into the second div tag, when I select revshare from the list.... Have a look for yourself :)
0
 
lamerhooDJVAuthor Commented:
Sorry, the text is "dfsf"
0
 
archrajanCommented:
I have tuned it up a little more
check it working here
http://www.archanapatchirajan.com/EE-lamerhooDJV.html
0
 
archrajanCommented:
yeah../. i saw that it loads the text  dfsf
i made that change:

the link above has the correct code

This is the script that is changed:

function doit(obj)
{
var temp = obj.options[obj.selectedIndex].value
if(temp != "revshare")
document.getElementById('ranges_perc').style.display = 'none';
else
document.getElementById('ranges_perc').style.display = '';
if(temp == "All")
{
document.getElementById('ranges_perc').style.display = 'none';
document.getElementById('ranges_dol').style.display = 'none';
}
if(temp!= "revshare" && temp != "All")
document.getElementById('ranges_dol').style.display = '';
else
document.getElementById('ranges_dol').style.display = 'none';
}
0
 
lamerhooDJVAuthor Commented:
wow, im gonna be a javascript expert in no time! LOL thanks man!
0
 
archrajanCommented:
U r welcome.. thanks for the grade:)
And soon u will be a good expert.. All the best!
0
 
COBOLdinosaurCommented:
Nice piece of work Archana. :^)

Cd&
0
 
archrajanCommented:
Thats the biggest compliment i cud ever get...

Thanks Cd&
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 9
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now