www.webdeveloper.com
Results 1 to 4 of 4

Thread: How to make new field appear ONLY when an option is selected?

  1. #1
    Join Date
    Mar 2012
    Posts
    1

    Angry How to make new field appear ONLY when an option is selected?

    Yikes- I am at my wits end; I've been searching the internet for codes to help but no luck.

    Currently I create forms in Marketo and have been using a code to make it so that a field appears only when a certain option is selected.

    The code is below. If a person selects "Yes" in the "Contact" field, the dynamic field "FirstName" pops up for them to input their name.

    If they select "No" in the "Contact" field, the dynamic field stays hidden.

    However, I need to replicate this action on a form I'm creating in Eloqua. I tried essentially copying and pasting the code onto the landing page, but it isn't working and nothing happens to the "FirstName" field, which makes me think the code below was made specifically to be made for Marketo.

    Please take a look and let me know how to address this- Thank you so much!!!


    <SCRIPT type=text/javascript src="/js/public/jquery-latest.min.js"></SCRIPT>

    <SCRIPT type=text/javascript>
    var $jQ = jQuery.noConflict();
    $jQ(document).ready(function(){

    // some variables to track the LI and input element of the dynamic field
    var websiteRow = $jQ("#FirstName").parents("li:first");
    var websiteField = $jQ("#FirstName");

    // when the triggering field changes...
    $jQ("#Contact").change(function() {
    var value = this.value;
    // when "Yes", show the dynamic field and make it required
    // when "No", hide the dynamic field
    switch(value)
    {
    case "Yes":
    websiteField.addClass("mktFReq");
    websiteRow.addClass("mktFormReq").slideDown();
    break;
    default:
    websiteRow.removeClass("mktFormReq").slideUp();
    websiteField.removeClass("mktFReq");
    }
    }).change();
    });
    </SCRIPT>

  2. #2
    Join Date
    Sep 2008
    Location
    Jackson MS
    Posts
    374
    Code:
        if (n)
          bReset.style.visibility = 'visible'
        else
          bReset.style.visibility = 'hidden'
    It is used here to hide a Restart button when round 1 is being displayed.

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    Code:
    var value = this.value; //is this correct?
    var value = $(this).val(); //shouldn't this be used instead?

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    after looking at your script once again i found it can't do what (as i understood) you would like it to do. so here is another script which demonstrates how to make the field required for submitting when it's displayed and not requiered when it's hidden. i hope this may help:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>123</title>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <style type="text/css">
    body{text-align:center;font-family:Verdana,Arial;font-size:11px;background-color:#fff;color:#000;padding-top:200px;}
    div{padding:20px;}
    select{margin-left:20px;}
    #firstname{display:none;margin-left:20px;text-align:center;}
    b.r{color:Crimson;text-decoration:underline;}
    .btn{border:none;font-weight:bold;font-size:12px;margin-right:10px;margin-left:10px;background-color:transparent;color:Navy;}
    </style>
    <script type="text/javascript">
    var j=jQuery.noConflict(),
    submit_allowed=true,
    tips=['Now the field <b>firstname</b> is <b class="r">required</b> for submitting','The field <b>firstname</b> is <b class="r">not required</b> for submitting'];
    j(document).ready(function($){
    // when the triggering field changes...
    j('#contact').change(function() {
    var val=j(this).val();
    switch(val){
    // when "Yes", show the dynamic field and make it required
    case "Yes":j('#firstname').slideDown('fast',function(){j(this).focus();j('#tiprow').html(tips[0]);j(this).blur(function(){if(j(this).val()==''){submit_allowed=false;}});});break;
    // when "No", hide the dynamic field and make it not required
    default:j('#firstname').slideUp("fast",function(){submit_allowed=true;j('#tiprow').html(tips[1]);});
    }
    j(this).blur();
    });
    j('#myform').submit(function(){return submit_allowed;});
    j('input[type=reset]').click(function(){if(j('#firstname').css('display')!='none'){j('#firstname').slideUp("fast",function(){submit_allowed=true;j('#tiprow').html(tips[1]);});}});
    });
     </script>
    </head>
    <body>
    <center>
    <form id="myform" method="post">
    <div id="tiprow">The field <b>firstname</b> is not required for submitting yet</div>
    <div>Contact<select id="contact" name="contact"><option value="Yes">Yes</option><option selected="selected" value="No">No</option></select><input type="text" size="30" name="firstname" id="firstname" /></div>
    <div><input class="btn" type="reset" /><input class="btn" type="submit" /></div>
    </form>
    </center>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles