SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    remove form value with checkbox

    i have this script that enables a form textbox when the checkbox is ticked..

    however.. if the user ticks the checkbox..

    enters text into the textbox..

    and then unticks the textbox..

    the textbox remains inactive but the text they entered is still inside it..

    therefore i just need to alter this slightly to make sure that when the tickbox is not ticked.. the textbox is always empty.. therefore.. it will have to delete anything at all from the textbox if it is unticked..

    here is the script

    Code:
    <script language="JavaScript">
    
    function textme () {
    if(document.booking.mycheckbox.checked)
    {
    document.booking.textinput.disabled=false;
    }
    else
    {
    document.booking.textinput.disabled=true;
    }
    }
    </script>

  2. #2
    SitePoint Addict ALL's Avatar
    Join Date
    Oct 2005
    Location
    South Dakota
    Posts
    215
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    umm... that code will not work in other browsers but IE... you should use getElementById() rather than do it that way....

    anyway... you just need to clear it...

    Code:
    <script language="JavaScript">
    
    function textme () {
    if(document.booking.mycheckbox.checked)
    {
    document.booking.textinput.disabled=false;
    }
    else
    {
    document.booking.textinput.disabled=true;
    document.booking.textinput.innerHTML=''; //<-use this if it is a text area
    //document.booking.textinput.value=''; //<-- use this if it is a textbox
    }
    }
    </script>
    Did I help you?
    You can repay me, support one of my projects (no money needed):
    JavaScript Wiki, Another Web Forum, Paranormal Site

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    would you be as kind as to show me a way that is more cross browser friendly

  4. #4
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    im sure it is something like this..


    document.getElementById(target).value="";

  5. #5
    SitePoint Addict ALL's Avatar
    Join Date
    Oct 2005
    Location
    South Dakota
    Posts
    215
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    yes...

    here is an example:

    HTML Code:
    <html>
    <head>
    <script type="text/javascript">
    function submit_check(){
      alert("document.getElementById('txtboxid').value = "+document.getElementById('txtboxid').value);
      alert("document.getElementById('txtareaid').innerHTML = "+document.getElementById('txtareaid').innerHTML);
      //you can also do:
      alert("document.getElementsByName('txtboxname')[0].value = "+document.getElementsByName('txtboxname')[0].value);
      alert("document.getElementsByName('txtareaname')[0].innerHTML = "+document.getElementsByName('txtareaname')[0].innerHTML);
    }
    </script>
    </head>
    <body>
      <form onsubmit="submit_check()" method="POST" action="script.ext">
        <input type="text" id="txtboxid" name="txtboxname" value="">
        <textarea name="txtareaname" id="txtareaid" cols="10" rows="10"></textarea>
        <input type="submit" name="submit" value="submit">
    </body>
    </html>
    look at that example... that should help you a understand better,
    -ALL
    Did I help you?
    You can repay me, support one of my projects (no money needed):
    JavaScript Wiki, Another Web Forum, Paranormal Site

  6. #6
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    im sorry, i dont really understand that..

    where does the checkbox go?

  7. #7
    SitePoint Addict ALL's Avatar
    Join Date
    Oct 2005
    Location
    South Dakota
    Posts
    215
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    oh a checkbox is different... example:

    <input type="checkbox" name="checkboxname" id="checkboxid" value="ON">

    the javascript would be:

    document.getElementById('checkboxid').checked;

    that will return true or false to weather it is checked or not. you can put the html anyhwere in the page, because it gets it by the id not by which form it is in.
    Did I help you?
    You can repay me, support one of my projects (no money needed):
    JavaScript Wiki, Another Web Forum, Paranormal Site

  8. #8
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok..let me illustrate it a little better.. this is the url of the page im dealing with

    http://www.londonheathrowcars.com/h2treturn.asp

    the bit we are looking at is the Meet & Greet checkbox and the NAMEBOARD textbox

    here is the code for that

    Code:
    <p class="mainbody"><b>MEETING THE DRIVER</b><br><br>Meet & Greet Service&nbsp;&nbsp;<input type="checkbox" onclick="textme()" name="mgcheck" id="mgcheck" value="on" ><br><br>NAME-BOARD (Meet & Greet Only)<br><input type="text" disabled size="25" class="txtbox" name="nameboard" id="nameboard">
      </p>

    so would the code be something like..

    document.getElementById('mgcheck').checked;
    ...

    and this is where i get stuck.. the code you gave me

    alert("document.getElementsByName('txtboxname')[0].value = "+document.getElementsByName('txtboxname')[0].value);

    is this an alert??.. im sorry if i seem silly.. if you test on the page.. you cant type in the nameboard when the tickbox isnt ticked.. when you tick it.. you can.. BUT then if you untick it.. the writing is still inside.. i just want that writing to always disappear when it is unticked..

  9. #9
    SitePoint Addict ALL's Avatar
    Join Date
    Oct 2005
    Location
    South Dakota
    Posts
    215
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    then try this html:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    
    
    
    
    <head>
    <title>Heathrow Page</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <link rel="stylesheet" type="text/css" href="style.css">
    
    <script type="text/javascript">
    function prefill(actor,source,target) {
      if(document.getElementById(actor).checked==true){
        document.getElementById(target).value = document.getElementById(source).value;
      } else {
        document.getElementById(target).value="";
      }
    }
    </script>
    
    <script language="JavaScript">
    
    function textme () {
    chkbox = document.getElementById('mgcheck');
    if(chkbox.checked)
    {
    document.getElementById('nameboard').disabled=false;
    }
    else
    {
    document.getElementById('nameboard').disabled=true;
    document.getElementById('nameboard').value='';
    }
    }
    </script>
    
    </head>
    
    <body>
    
    <div id="wrap">
    
    <div id="bleft">
    <h1 class="top">Airport Pickup</h1>
    <form name="booking" method="post" action="h2treturncontact.asp">
    <input name="postcode" type="hidden" id="postcode" value="">
    <input name="price" type="hidden" id="price" value="">
    <input name="car" type="hidden" id="car" value="">
    <p class="main6">* Pickup Date:<br>
    
    <select class="droppy" name="pday">
    <option value="">Day  
    <option value="1">1
    <option value="2">2
    <option value="3">3
    <option value="4">4
    <option value="5">5
    <option value="6">6
    <option value="7">7
    <option value="8">8
    <option value="9">9
    <option value="10">10
    <option value="11">11
    <option value="12">12
    <option value="13">13
    <option value="14">14
    <option value="15">15
    <option value="16">16
    <option value="17">17
    <option value="18">18
    <option value="19">19
    <option value="20">20
    <option value="21">21
    <option value="22">22
    <option value="23">23
    <option value="24">24
    <option value="25">25
    <option value="26">26
    <option value="27">27
    <option value="28">28
    <option value="29">29
    <option value="30">30
    <option value="31">31
    </select>&nbsp;&nbsp;<select class="droppy" name="pmonth">
    <option value="">Month
    <option value="January">January
    <option value="February">February
    <option value="March">March
    <option value="April">April
    <option value="May">May
    <option value="June">June
    <option value="July">July
    <option value="August">August
    <option value="September">September
    <option value="October">October
    <option value="November">November
    <option value="December">December
    </select>&nbsp;&nbsp;<select class="droppy" name="pyear">
    <option value="">Year  
    <option value="2006">2006
    <option value="2007">2007
    </select><br></p>
    <p class="main6">* Pickup Time:<br>
    <select name="phour" class="droppy">
    	<option value="">Hour
    	<option value="1AM">01 AM
    	<option value="2AM">02 AM
    	<option value="3AM">03 AM
    	<option value="4AM">04 AM
    	<option value="5AM">05 AM
    	<option value="6AM">06 AM
    	<option value="7AM">07 AM
    	<option value="8AM">08 AM
    	<option value="9AM">09 AM
    	<option value="10AM">10 AM
    	<option value="11AM">11 AM
    	<option value="Midday">Midday
    	<option value="1PM">01 PM
    	<option value="2PM">02 PM
    	<option value="3PM">03 PM
    	<option value="4PM">04 PM
    	<option value="5PM">05 PM
    	<option value="6PM">06 PM
    	<option value="7PM">07 PM
    	<option value="8PM">08 PM
    	<option value="9PM">09 PM
    	<option value="10PM">10 PM
    	<option value="11PM">11 PM
    	<option value="Midnight">Midnight</select>&nbsp;&nbsp;<select class="droppy" name="pminutes"><option value="">
    Minute<option value="00">00
    	<option value="05">05
    	<option value="10">10
    	<option value="15">15
    	<option value="20">20
    	<option value="25">25
    <option value="30">30
    <option value="35">35
    <option value="40">40
    <option value="45">45
    <option value="50">50
    <option value="55">55</select><br><br></p>
    
    <p class="mainbody"><b>INCOMING FLIGHT DETAILS</b><br><br>* Flight No:<br><input class="smalltxtbox" name="pflight" type="text" id="pflight" size="12"></p>
    <p class="mainbody">Coming From (Departure Airport):<br><input class="txtbox" name="flightfrom" type="text" id="flightfrom" size="20"></p>
    <p class="mainbody">Flight Arrival Time:<br><input class="smalltxtbox" name="eta" type="text" id="eta" size="12"></p><br>
    
    <p class="mainbody"><b>PLEASE READ</b><br><br>There are 2 ways to meet the 
    driver.<br><br>For an additional 6 the passenger/s can expect their driver to 
    &quot;Meet &amp; Greet&quot; them in the arrivals hall holding a nameboard.<br><br>
    Alternatively, our driver can meet the passenger/s outside IF a Mobile Phone 
    Number that we can call on the day has been provided.<br><br>The driver will be 
    dispatched from our office and will reach the passenger/s in approximately 15 
    minutes. This has no additional cost.</p><br>
    <p class="mainbody"><b>MEETING THE DRIVER</b><br><br>Meet &amp; Greet Service&nbsp;&nbsp;<input type="checkbox" onclick="textme()" name="mgcheck" id="mgcheck" value="on" ><br><br>
    NAME-BOARD (Meet &amp; Greet Only)<br><input type="text" disabled size="25" class="txtbox" name="nameboard" id="nameboard">
      </p><br>
    <p class="mainbody"><b>DESTINATION DETAILS</b><br><br></p>
    <p class="mainbody">Please provide the full <b></b> Address:
              <textarea class="area" name="dadd" cols="35" rows="3" id="dadd"></textarea></p><br><br>
    
    </div>
    
    <div id="bright">
    
    <h1 class="top">Return Transfer</h1>
    
    <p class="main6">* Pickup Date:<br>
    <select class="droppy" name="rday">
    <option value="">Day  
    <option value="1">1
    <option value="2">2
    <option value="3">3
    <option value="4">4
    <option value="5">5
    <option value="6">6
    <option value="7">7
    <option value="8">8
    <option value="9">9
    <option value="10">10
    <option value="11">11
    <option value="12">12
    <option value="13">13
    <option value="14">14
    <option value="15">15
    <option value="16">16
    <option value="17">17
    <option value="18">18
    <option value="19">19
    <option value="20">20
    <option value="21">21
    <option value="22">22
    <option value="23">23
    <option value="24">24
    <option value="25">25
    <option value="26">26
    <option value="27">27
    <option value="28">28
    <option value="29">29
    <option value="30">30
    <option value="31">31
    </select>&nbsp;&nbsp;<select class="droppy" name="rmonth">
    <option value="">Month
    <option value="January">January
    <option value="February">February
    <option value="March">March
    <option value="April">April
    <option value="May">May
    <option value="June">June
    <option value="July">July
    <option value="August">August
    <option value="September">September
    <option value="October">October
    <option value="November">November
    <option value="December">December
    </select>&nbsp;&nbsp;<select class="droppy" name="ryear">
    <option value="">Year  
    <option value="2006">2006
    <option value="2007">2007
    </select><br></p>
    <p class="main6">* Pickup Time:<br>
    <select name="rhour" class="droppy">
    	<option value="">Hour
    	<option value="1AM">01 AM
    	<option value="2AM">02 AM
    	<option value="3AM">03 AM
    	<option value="4AM">04 AM
    	<option value="5AM">05 AM
    	<option value="6AM">06 AM
    	<option value="7AM">07 AM
    	<option value="8AM">08 AM
    	<option value="9AM">09 AM
    	<option value="10AM">10 AM
    	<option value="11AM">11 AM
    	<option value="Midday">Midday
    	<option value="1PM">01 PM
    	<option value="2PM">02 PM
    	<option value="3PM">03 PM
    	<option value="4PM">04 PM
    	<option value="5PM">05 PM
    	<option value="6PM">06 PM
    	<option value="7PM">07 PM
    	<option value="8PM">08 PM
    	<option value="9PM">09 PM
    	<option value="10PM">10 PM
    	<option value="11PM">11 PM
    	<option value="Midnight">Midnight</select>&nbsp;&nbsp;<select class="droppy" name="rminutes"><option value="">
    Minute<option value="00">00
    	<option value="05">05
    	<option value="10">10
    	<option value="15">15
    	<option value="20">20
    	<option value="25">25
    <option value="30">30
    <option value="35">35
    <option value="40">40
    <option value="45">45
    <option value="50">50
    <option value="55">55</select><br><br></p>
    <p class="mainbody"><b>PICKUP DETAILS</b><br><br></p>
    <p class="mainbody">Same as Destination Address&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="tickme" id="tickme" value="yes" onclick="prefill('tickme','dadd','padd');" /><br><Br>
              <textarea class="area" name="padd" cols="35" rows="3" id="padd"></textarea></p><br>
    <p class="mainbody"><b>OUTGOING FLIGHT DETAILS</b><br><br>Flight No:<br><input class="smalltxtbox" name="oflight" type="text" id="oflight" size="12"></p>
    <p class="mainbody">Going To (Arrival Airport):<br><input class="txtbox" name="flightto" type="text" id="flightto" size="20"></p>
    <p class="mainbody">Flight Departure Time:<br><input class="smalltxtbox" name="dep" type="text" id="dep" size="12"></p><br>
    <p class="mainbody"><b>GENERAL DETAILS</b><br><br>Are you travelling with young 
    children? If so please provide details including child age:
    <textarea class="long" name="baby" cols="45" rows="2" id="baby"></textarea></p>
    <p class="mainbody">Additional Comments<br>(e.g. Passenger and Luggage 
    Requirements):
    <textarea class="long" name="extra" cols="45" rows="4" id="extra"></textarea></p>
    <p><input style="margin-top:15px;margin-bottom:15px;margin-left:35px;background-color:#666666;font-weight:bold;font-size:12px;font-family:arial;color:white;width:105px;" value="Next Step" name="B1" type="submit"><input style="margin-top:15px;margin-bottom:15px;margin-left:17px;background-color:#666666;font-weight:bold;font-size:12px;font-family:arial;color:white;width:105px;" value="Reset Form" name="B2" type="reset"></p>
    </form>
    </div>
    
    
    </div>
    
    </body>
    
    </html>
    Did I help you?
    You can repay me, support one of my projects (no money needed):
    JavaScript Wiki, Another Web Forum, Paranormal Site

  10. #10
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah it worked ALL thanks a lot..

    just one point for the future.. when i copy code from the code box in your post.. it doesnt separate the lines..

    it puts the whole thing in one paragraph.. why?? its annoying?

  11. #11
    SitePoint Addict ALL's Avatar
    Join Date
    Oct 2005
    Location
    South Dakota
    Posts
    215
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    probably the html editor you are using.
    Did I help you?
    You can repay me, support one of my projects (no money needed):
    JavaScript Wiki, Another Web Forum, Paranormal Site


Bookmarks

Posting Permissions

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