Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Jun 2009
    Posts
    121
    Thanks
    22
    Thanked 3 Times in 3 Posts

    Need help with an Onchange command

    I have a form with 5 "duplicated" input fields for contact information.

    Here is the full code:
    Code:
    <p>Contact 1: <br />
            <select name="conType1" id="conType1">
            	<Option value=" " <?php if (array_key_exists('proofupdate', $_POST) && ($_POST['conType1'] == " ")) { echo "selected=\"selected\""; } else { echo ""; } ?> >  </Option>
                <Option value="E" <?php if (array_key_exists('proofupdate', $_POST) && ($_POST['conType1'] == "E")) { echo "selected=\"selected\""; } else { echo ""; } ?> >Email</Option>
                <Option value="O" <?php if (array_key_exists('proofupdate', $_POST) && ($_POST['conType1'] == "O")) { echo "selected=\"selected\""; } else { echo ""; } ?> >Office</Option>
                <Option value="T" <?php if (array_key_exists('proofupdate', $_POST) && ($_POST['conType1'] == "T")) { echo "selected=\"selected\""; } else { echo ""; } ?> >Telephone</Option>
                <Option value="F" <?php if (array_key_exists('proofupdate', $_POST) && ($_POST['conType1'] == "F")) { echo "selected=\"selected\""; } else { echo ""; } ?> >Fax</Option>
                <Option value="C" <?php if (array_key_exists('proofupdate', $_POST) && ($_POST['conType1'] == "C")) { echo "selected=\"selected\""; } else { echo ""; } ?> >Cell</Option>
                <Option value="TF" <?php if (array_key_exists('proofupdate', $_POST) && ($_POST['conType1'] == "TF")) { echo "selected=\"selected\""; } else { echo ""; } ?> >Toll Free</Option>
                </select>&nbsp; &nbsp;
            <input name="con1" id="con1" width="200px" type="text" value="<?php if (array_key_exists('proofupdate', $_POST)) { echo $_POST['con1'];}  else { echo ""; }?>" /></p>

    The simplified without all the "selected" info:
    Code:
    Contact 1: <br />
            <select name="conType1" id="conType1">
            	<Option value=" ">  </Option>
                <Option value="E">Email</Option>
                <Option value="O">Office with Ext.</Option>
                <Option value="T">Telephone</Option>
                <Option value="F">Fax</Option>
                <Option value="C">Cell</Option>
                <Option value="TF"> >Toll Free</Option>
                </select>&nbsp; &nbsp;
            <input name="con1" id="con1" width="200px" type="text" value="" />
    This is repeated 4 more times and name/id'd accordingly sequential.
    What I need to be able to do is to have the Text Input change between 3 different layouts based on whether they select Email, Office, or the other 4 phone options.
    I can and have written a basic Javascript like this:
    Code:
    function showinput(me,id) {
        showme = document.getElementById(id);
    	checkbox.className = 'showme';
    	return;
    	}
    to change the style and handle the input processing with some back end PHP If/Then statements in the past, but I'm not sure how to do this with multiple class selectors. I should also add that the values of the drop down list need to stay as they are because they are variable values for later on. I could write a comparison script to change them later if necessary, but would rather avoid that.

    Any help would be appreciated. I'm sure it's easy and I've just been staring at it for too long...

    Thank you!

    P.S. if anyone has a cleaner way to set the "select" value when the form updates, that would be great!
    I'll try again to find, the thing that was my mind...
    The only other sign, it says I've lost my mind.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,116
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    Not 100% sure I know what you mean, but I *THINK* something like this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    input.t_none {
        width: 200px;
        background-color: #eeeeee;
    }
    input.t_email {
        width: 200px;
        background-color: pink;
    }
    input.t_office {
        width: 150px;
        background-color: lightblue; 
    }
    input.t_phone {
        width: 100px;
        background-color: lightgreen;
    }
    </style>
    </head>
    <body>
    <form id="myform">
        Contact 1: <br />
        <select class="t_none" name="conType1">
                <option value=""></option>
                <option value="E">Email</option>
                <option value="O">Office with Ext.</option>
                <option value="T">Telephone</option>
                <option value="F">Fax</option>
                <option value="C">Cell</option>
                <option value="TF"> >Toll Free</option>
        </select>&nbsp; &nbsp;
        <input name="con1" type="text" value="" />
    <hr/>
        Contact 2: <br />
        <select class="t_none" name="conType2">
                <option value=""></option>
                <option value="E">Email</option>
                <option value="O">Office with Ext.</option>
                <option value="T">Telephone</option>
                <option value="F">Fax</option>
                <option value="C">Cell</option>
                <option value="TF"> >Toll Free</option>
        </select>&nbsp; &nbsp;
        <input name="con2" type="text" value="" />
    <hr/>
        Contact 1: <br />
        <select class="t_none" name="conType3">
                <option value=""></option>
                <option value="E">Email</option>
                <option value="O">Office with Ext.</option>
                <option value="T">Telephone</option>
                <option value="F">Fax</option>
                <option value="C">Cell</option>
                <option value="TF"> >Toll Free</option>
        </select>&nbsp; &nbsp;
        <input name="con3" type="text" value="" />
    <hr/>
    
    <script type="text/javascript">
    var form = document.getElementById("myform");
    form.conType1.onchange = choose;
    form.conType2.onchange = choose;
    form.conType3.onchange = choose;
    
    function choose( )
    {
        var which = this.name.substring(7);
        var txtinp = form.elements["con" + which];
        switch ( this.value )
        { 
            case "" : txtinp.className = "t_none"; break;
            case "E": txtinp.className = "t_email"; break;
            case "O": txtinp.className = "t_office"; break;
            default : txtinp.className = "t_phone"; break;
        }
    }
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Alith7 (07-08-2013)

  • #3
    Regular Coder
    Join Date
    Jun 2009
    Posts
    121
    Thanks
    22
    Thanked 3 Times in 3 Posts
    Not quite...

    I need the chosen option for each "select" to change the "text" input.
    something like this:
    Code:
    Contact 1: <br />
        <select name="conType1">
                <option value=""></option>
                <option value="E">Email</option>
                <option value="O">Office with Ext.</option>
                <option value="T">Telephone</option>
                <option value="F">Fax</option>
                <option value="C">Cell</option>
                <option value="TF"> >Toll Free</option>
        </select>&nbsp; &nbsp;
        <input name="con1email" type="text" value="" width="200px" class="conNone" />
        <input name="con1PhExt" type="text" value="" maxlength="22" class="conNone" />
        <input name="con1RegPh" type="text" value="" maxlength="12" class="conNone" />
    Where they would be hidden until a contact type is selected, then the corresponding Text input would appear.

    In going back through old scripts, I found some I did with a similar concept, only it used a check box to activate an empty DIV and called a PHP include file to input into the DIV. Is that maybe my best bet?
    I'll try again to find, the thing that was my mind...
    The only other sign, it says I've lost my mind.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,116
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    Next time, be more explicit about what you need, please.

    I had no idea there were 3 <input type="text"> per <select> from your first posting.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    input.conNone {
        display: none;
    }
    input.conShow {
        display: inline;
    }
    </style>
    </head>
    <body>
    <form id="myform">
        Contact 1: <br />
        <select class="t_none" name="conType1">
                <option value=""></option>
                <option value="E">Email</option>
                <option value="O">Office with Ext.</option>
                <option value="T">Telephone</option>
                <option value="F">Fax</option>
                <option value="C">Cell</option>
                <option value="TF"> >Toll Free</option>
        </select>&nbsp; &nbsp;
        <input name="con1email" type="text" value="email" width="200px" class="conNone" />
        <input name="con1PhExt" type="text" value="office" maxlength="22" class="conNone" />
        <input name="con1RegPh" type="text" value="phone" maxlength="12" class="conNone" />
    <hr/>
        Contact 2: <br />
        <select class="t_none" name="conType2">
                <option value=""></option>
                <option value="E">Email</option>
                <option value="O">Office with Ext.</option>
                <option value="T">Telephone</option>
                <option value="F">Fax</option>
                <option value="C">Cell</option>
                <option value="TF"> >Toll Free</option>
        </select>&nbsp; &nbsp;
        <input name="con2email" type="text" value="email" width="200px" class="conNone" />
        <input name="con2PhExt" type="text" value="office" maxlength="22" class="conNone" />
        <input name="con2RegPh" type="text" value="phone" maxlength="12" class="conNone" />
    <hr/>
        Contact 1: <br />
        <select class="t_none" name="conType3">
                <option value=""></option>
                <option value="E">Email</option>
                <option value="O">Office with Ext.</option>
                <option value="T">Telephone</option>
                <option value="F">Fax</option>
                <option value="C">Cell</option>
                <option value="TF"> >Toll Free</option>
        </select>&nbsp; &nbsp;
        <input name="con3email" type="text" value="email" width="200px" class="conNone" />
        <input name="con3PhExt" type="text" value="office" maxlength="22" class="conNone" />
        <input name="con3RegPh" type="text" value="phone" maxlength="12" class="conNone" />
    <hr/>
    
    <script type="text/javascript">
    var form = document.getElementById("myform");
    form.conType1.onchange = choose;
    form.conType2.onchange = choose;
    form.conType3.onchange = choose;
    
    function choose( )
    {
        var which = this.name.substring(7);
        var em = form.elements["con" + which + "email"];
        var ex = form.elements["con" + which + "PhExt"];
        var ph = form.elements["con" + which + "RegPh"];
        em.className = "conNone";
        ex.className = "conNone";
        ph.className = "conNone";
    
        var txtinp = form.elements["con" + which];
        switch ( this.value )
        { 
            case "" : /* show none of the inputs */ break;
            case "E": em.className = "conShow"; break;
            case "O": ex.className = "conShow"; break;
            default : ph.className = "conShow"; break;
        }
    }
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Alith7 (07-08-2013)

  • #5
    Regular Coder
    Join Date
    Jun 2009
    Posts
    121
    Thanks
    22
    Thanked 3 Times in 3 Posts
    that looks like it should do it.

    Thank you!
    I'll get it put into the rest this afternoon and let you know.
    I'll try again to find, the thing that was my mind...
    The only other sign, it says I've lost my mind.

  • #6
    Regular Coder
    Join Date
    Jun 2009
    Posts
    121
    Thanks
    22
    Thanked 3 Times in 3 Posts
    Finally got back to it.

    it works great!
    thank you for your help!
    I'll try again to find, the thing that was my mind...
    The only other sign, it says I've lost my mind.

  • #7
    Regular Coder
    Join Date
    Jun 2009
    Posts
    121
    Thanks
    22
    Thanked 3 Times in 3 Posts
    ok, change in validation requirements.

    Looking to have a DIV instead of the input, so that I can swap what the input is. Basically, to call a PHP "echo" to fill the DIV depending on the option.

    So, PHP echo 1 for email:
    Code:
    <?php echo "<input name="con1email" id="con1" type="text" />"; ?>
    PHP echo 2 for phone w/extension:
    Code:
    <?php echo "<input name='con1px1' id='con1px1' type='text' maxlength='3' />
    &nbsp;-&nbsp;<input name='con1px2' id='con1px2' type='text' maxlength='3' />
    &nbsp;-&nbsp;<input name='con1px3' id='con1px3' type='text' maxlength='4' />
    &nbsp;ext.&nbsp;<input name='con1px4' id='con1px4' type='text' maxlength='4' />"; ?>
    PHP echo for everything else:
    Code:
    <?php echo "<input name='con1ph1' id='con1ph1' type='text' maxlength='3' />
    &nbsp;-&nbsp;<input name='con1ph2' id='con1ph2' type='text' maxlength='3' />
    &nbsp;-&nbsp;<input name='con1ph3' id='con1ph3' type='text' maxlength='4' />"; ?>
    I can write most of the code, but I'm going cross-eyed on how to even start the functions to make the switch. If you have a min to point me in the right direction, otherwise I'll take a crack at it in the AM.

    Thank you for all your patience and help with my fumbling!
    I'll try again to find, the thing that was my mind...
    The only other sign, it says I've lost my mind.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,116
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    You can't do that.

    Oh, you can, but that means you have to submit the <form> back to the server and have your PHP code *COMPLETELY REWRITE THE ENTIRE PAGE*.

    JavaScript can *NOT* invoke PHP code except by making a round trip to the server, either by submitting the page (e.g., a <form> or using a URL with querystring) or via AJAX (which has nothing to do with what you are trying here).

    You don't seem to understand the basic nature of web programming and how the server and client (usually browser) interact. PHP is entirely INAPPROPRIATE for this usage.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,116
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    Stick with JavaScript:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    .contacts div {
        display : none;
    }
    </style>
    </head>
    <body>
    <form id="myform">
        Contact 1: <br />
        <select name="conType1">
                <option value=""></option>
                <option value="E">Email</option>
                <option value="O">Office with Ext.</option>
                <option value="T">Telephone</option>
                <option value="F">Fax</option>
                <option value="C">Cell</option>
                <option value="TF">Toll Free</option>
        </select>&nbsp; &nbsp;
        <div id="con1" class="contacts">
            <div>
                 <input name="con1email" />
            </div>
            <div>
                 <input name="con1px1" maxlength="3" />
                 &nbsp;-&nbsp;<input name="con1px2" maxlength="3" />
                 &nbsp;-&nbsp;<input name="con1px3" maxlength="4" />
                 &nbsp;ext.&nbsp;<input name="con1px4" maxlength="4" />
            </div>
            <div>
                 <input name="con1ph1" maxlength="3" />
                 &nbsp;-&nbsp;<input name="con1ph2" maxlength="3" />
                 &nbsp;-&nbsp;<input name="con1ph3" maxlength="4" />
            </div>
        </div>
    <hr/>
        Contact 2: <br />
        <select name="conType2">
                <option value=""></option>
                <option value="E">Email</option>
                <option value="O">Office with Ext.</option>
                <option value="T">Telephone</option>
                <option value="F">Fax</option>
                <option value="C">Cell</option>
                <option value="TF">Toll Free</option>
        </select>&nbsp; &nbsp;
        <div id="con2" class="contacts">
            <div>
                 <input name="con2email" />
            </div>
            <div>
                 <input name="con2px1" maxlength="3" />
                 &nbsp;-&nbsp;<input name="con2px2" maxlength="3" />
                 &nbsp;-&nbsp;<input name="con2px3" maxlength="4" />
                 &nbsp;ext.&nbsp;<input name="con2px4" maxlength="4" />
            </div>
            <div>
                 <input name="con2ph1" maxlength="3" />
                 &nbsp;-&nbsp;<input name="con2ph2" maxlength="3" />
                 &nbsp;-&nbsp;<input name="con2ph3" maxlength="4" />
            </div>
        </div>
    <hr/>
        Contact 3: <br />
        <select name="conType3">
                <option value=""></option>
                <option value="E">Email</option>
                <option value="O">Office with Ext.</option>
                <option value="T">Telephone</option>
                <option value="F">Fax</option>
                <option value="C">Cell</option>
                <option value="TF">Toll Free</option>
        </select>&nbsp; &nbsp;
        <div id="con3" class="contacts">
            <div>
                 <input name="con3email" />
            </div>
            <div>
                 <input name="con3px1" maxlength="3" />
                 &nbsp;-&nbsp;<input name="con3px2" maxlength="3" />
                 &nbsp;-&nbsp;<input name="con3px3" maxlength="4" />
                 &nbsp;ext.&nbsp;<input name="con3px4" maxlength="4" />
            </div>
            <div>
                 <input name="con3ph1" maxlength="3" />
                 &nbsp;-&nbsp;<input name="con3ph2" maxlength="3" />
                 &nbsp;-&nbsp;<input name="con3ph3" maxlength="4" />
            </div>
        </div>
    <hr/>
    
    <script type="text/javascript">
    var form = document.getElementById("myform");
    for ( var n = 1; n < 9999; ++n )
    { 
        var sel = form.elements["conType" + n];
        if ( sel == null ) break;
        sel.onchange = choose;
    }
    
    function choose( )
    {
        var connum = this.name.substring(7);
        var cdivs = document.getElementById("con" + connum).getElementsByTagName("div");
        var which = this.selectedIndex;
    
        cdivs[0].style.display = which == 1 ? "block" : "none";
        cdivs[1].style.display = which == 2 ? "block" : "none";
        cdivs[2].style.display = which >= 3 ? "block" : "none";
    
    }
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Alith7 (07-12-2013)

  • #10
    Regular Coder
    Join Date
    Jun 2009
    Posts
    121
    Thanks
    22
    Thanked 3 Times in 3 Posts
    Thank you for your help. Yes, I don't completely understand how it works. I have learned by trial and error, and utilize the tools that I know. I appreciate forums like this where I can get help when I get stuck. I have shelves full of textbooks and help books, but they only go so far, and hands on knowledge is king. I learn quickly and can adapt, but all the google searches in the world can't help with all the coding problems out there. This isn't something I do all day everyday, I code bits and pieces to put together to get what my boss wants on the website. I have a good head for the logic of coding, I just don't always know/understand all the concepts. So basically, no need to call out that I'm a coding moron, I am aware of that. but if you point me in the right direction and maybe take a few seconds to educate, it would help me from making future moronic blunders.

    Thank you again for your help with this. I'll put the code in and try it out.
    I'll try again to find, the thing that was my mind...
    The only other sign, it says I've lost my mind.

  • #11
    Regular Coder
    Join Date
    Jun 2009
    Posts
    121
    Thanks
    22
    Thanked 3 Times in 3 Posts
    works great!
    thank you again for all your help!
    I'll try again to find, the thing that was my mind...
    The only other sign, it says I've lost my mind.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,116
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    *sigh*...you are not a "coding moron" and I never said or tried to imply that.

    Your PHP code, for example, would surely work. Just not the way you want it to.

    All I was saying is that you need to try to find something (book, online, whatever) that will help you understand the role of the web server versus the role of the browser.

    In shortest form the rule is simple: The HTTP protocol specifies that a client (e.g., a browser) makes a request for a specific URL and then the server sends back an ENTIRE ANSWER, typically a web page full of HTML and optionally JavaScript. One request, one response. And this means that you can't use JavaScript code in the middle of a page to say "Hey, server, change just this part of the page." It has to be a complete request/response round trip.

    Now, we *do* use AJAX to get around this limitation, to some degree. That is, we use the XMLHTTP control built into all browsers to allow JavaScript to make a request, behind the scenes, and receive a response (still behind the scenes). But it's still a complete request/response. And you would normally only use it for retrieving *content* from the server, not for just changing the appearance of the page when that can be done with just DHTML.

    Anyway, see if you can't find something that discusses how PHP responds to HTTP requests and I will bet that all of a sudden you will have an epiphany.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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