www.webdeveloper.com
Results 1 to 4 of 4

Thread: Disabling or Clearing Field

  1. #1
    Join Date
    Mar 2014
    Posts
    2

    Question Disabling or Clearing Field

    What I am trying to do: I have 2 drop-down fields on my form. They each ultimately go into the same field in the database, but contain different lists, depending on whether they are a department or an external customer. Using PHP on the next page, I have it set to accept the first field entered (with a back button to go change it). A couple of people testing it requested either 1) a button to clear the contents of a field with a button, instead of having to scroll up to the null value, or 2) when you select a second item, the first is automatically cleared out.

    Is there a way with javascript to accomplish this? I found this code while searching online, but I'm not sure how to attach it to a button on my form:
    document.getElementById('numquest').value=null;
    I am assuming in this example that 'numquest' is the field name to clear.

    Thanks in advance for any assist!

    Trish

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,670
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>title</title>
    <style>
    body{text-align:center;padding-top:200px;}
    input,select{cursor:pointer;}
    #db_data{cursor:default;text-align:center;}
    div > #db_data{margin-top:15px;margin-bottom:15px;}
    </style>
    <script>
    function $(id){return document.getElementById(id);}
    
    onload=function(){
    $('digs').onchange=$('lets').onchange=function(){
    var val=this.value,
        id=this.id,
    	another=id=='digs'?'lets':'digs';
    if(val){
    $(another).selectedIndex=0;
    $('db_data').value=val;
    }
    this.blur();
    }
    }
    </script>
    </head>
    <body>
    <form name="myform" action="">
    <select id="digs"><option value="">Select</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select>
    <select id="lets"><option value="">Select</option><option value="a">a</option><option value="b">b</option><option value="c">c</option><option value="d">d</option><option value="e">e</option></select>
    <div><input type="text" id="db_data" name="db_data" size="70" placeholder="only this field value will be sent to the DB, set this type 'hidden'" /></div>
    <input type="reset" value="Reset" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="Send" />
    </form>
    </body>
    </html>
    Last edited by Padonak; 03-15-2014 at 11:19 AM.

  3. #3
    Join Date
    Mar 2014
    Posts
    2

    resolved Yes, Thank you SO Much!

    YES, that is exactly what I was trying to achieve! Thank you SO much, Padonak!![

    QUOTE=Padonak;1319989]
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>title</title>
    <style>
    body{text-align:center;padding-top:200px;}
    input,select{cursor:pointer;}
    #db_data{cursor:default;text-align:center;}
    div > #db_data{margin-top:15px;margin-bottom:15px;}
    </style>
    <script>
    function $(id){return document.getElementById(id);}
    
    onload=function(){
    $('digs').onchange=$('lets').onchange=function(){
    var val=this.value,
        id=this.id,
    	another=id=='digs'?'lets':'digs';
    if(val){
    $(another).selectedIndex=0;
    $('db_data').value=val;
    }
    this.blur();
    }
    }
    </script>
    </head>
    <body>
    <form name="myform" action="">
    <select id="digs"><option value="">Select</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select>
    <select id="lets"><option value="">Select</option><option value="a">a</option><option value="b">b</option><option value="c">c</option><option value="d">d</option><option value="e">e</option></select>
    <div><input type="text" id="db_data" name="db_data" size="70" placeholder="only this field value will be sent to the DB, set this type 'hidden'" /></div>
    <input type="reset" value="Reset" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="Send" />
    </form>
    </body>
    </html>
    [/QUOTE]

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,670
    you're welcome )

Thread Information

Users Browsing this Thread

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

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