SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    a fresh, new start... dujmovicv's Avatar
    Join Date
    Aug 2006
    Location
    Earth
    Posts
    559
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML Radio button

    Hi, I didn't know where to post, hope it's OK here...
    How to solve this:
    2 radio buttons, by default, the first is selected and an input field(text) after the second radio button is disabled. When the second radio button is selected, the text field is enabled and ready for input ?
    Thank's!

  2. #2
    SitePoint Wizard silver trophy Jelena's Avatar
    Join Date
    Feb 2005
    Location
    Universum, 3rd Corner
    Posts
    3,000
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It looks like a javascript question to me, so I'm moving this thread there.
    -- Jelena --

  3. #3
    SitePoint Addict darkwater23's Avatar
    Join Date
    Nov 2005
    Location
    Omaha, NE
    Posts
    335
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a very simple example. You'll have to jazz it up a bit.

    The code simply disables the textbox without removing any content. You could also add a line like:

    document.myForm.textfield.value = '';

    to clear the text in the input.

    It works in IE6 and FF, although you can't tell the field is disabled in IE until you try to click on it. You may want to change the style of the box to better indicate that it is disabled. Also, I think IE and FF behave differently on posting disabled textboxes. One of them does post it and the other doesn't, I vaguely recall.

    I hope this helps!

    Code:
    <script language="javascript" type="text/javascript">
    function toggleInput(radio){
    
    	if(radio.value == "value1"){
    		document.myForm.textfield.disabled = true;
    	}
    
    	if(radio.value == "value2"){
    		document.myForm.textfield.disabled = false;
    	}
    
    
    }
    </script>
    <body>
    <form name="myForm" action="whatever.php" method="post">
    <table width="400" border="0" cellspacing="0" cellpadding="2">
      <tr>
        <td width="27"><input name="radiobutton" type="radio" value="value1" checked onClick="toggleInput(this);"></td>
        <td width="365">&nbsp;</td>
      </tr>
      <tr>
        <td><input name="radiobutton" type="radio" value="value2" onClick="toggleInput(this);"></td>
        <td><input type="text" name="textfield" disabled></td>
      </tr>
    </table>
    </form>

  4. #4
    a fresh, new start... dujmovicv's Avatar
    Join Date
    Aug 2006
    Location
    Earth
    Posts
    559
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I really appreciate your help, but I'm afraid that won't help me...
    I have to make a questionnarie for the costumers for the product type they want to transport. If "Bulk" is selected, the input fields below it must be disabled , and if "Containers" is selected, the "Bulk Load" must be disabled, and the rest is enabled.
    The "questionnarie.php" doesn't need to be reloaded, these changes must have an immediate effect on the page.
    Hope this is clear to you. Is it possible to solve this in PHP?
    Attached Images Attached Images

  5. #5
    SitePoint Addict darkwater23's Avatar
    Join Date
    Nov 2005
    Location
    Omaha, NE
    Posts
    335
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm afraid its not clear then. The radio buttons could have values of "Bulk" and "Containers". Those values can be used to enable or disable any number of input fields. You just need to add the fields to the function.

    PHP will not allow for an immediate effect on the page because PHP needs to be processed by the server first.

    Perhaps if you posted the HTML that you have or attach the "questionnarie.php" file, I could demonstrate the technique better.

  6. #6
    a fresh, new start... dujmovicv's Avatar
    Join Date
    Aug 2006
    Location
    Earth
    Posts
    559
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, here is a part of the quest.php
    PHP Code:
    <table border = "1" bordercolor="#333333" cellpadding="0" cellspacing="0" width=100%>
    <tr>
        <td colspan="4"></td>
        <td width="30%" align="right"><input type="radio" checked="checked" name="pack" value="unpacked"><? print ($pack1); ?></td> // if this radio is "ON", disable the select and all text fields below, 
                               // except text field named "load1"
        <td></td>
        <td align="right"><? print ($load); ?></td><td align="right"><input type="text" name="load1" size="10"></td>
        <td>kg/m2</td>
    </tr>
    <tr bgcolor = "#ffffff">
        <td colspan="4"></td>
        <td width="30%" align="right"><input type="radio" name="pack" value="packed"><? print ($pack2); ?> // if this radio is "ON", disable the text field named "load1"
        </td><td align="left"><select name="packing" size="1"><option value="">--- Select ---
                                          <option value="pet"><? print ($pet); ?>
                                          <option value="crates"><? print ($crates); ?>
                                          <option value="glass"><? print ($glass); ?>
                                          <option value="cans"><? print ($cans); ?>
                                          <option value="metal"><? print ($metal); ?>
                                          <option value="aluminium"><? print ($aluminium); ?>
                                          <option value="plastic"><? print ($plastic); ?>
                                          <option value="cardboard"><? print ($cardboard); ?>
                                          <option value="other"><? print ($other); ?>
                                          </select></td>
        <td align="right"><? print ($load); ?></td><td align="right"><input type="text" name="load2" size="10"></td>
        <td>kg/m2</td>
    </tr>
    <tr bgcolor = "#ffffff">
        <td colspan="4"></td>
        <td></td>
        <td></td>
        <td align="right"><? print ($diam); ?></td>
        <td align="right"><input type="text" name="diam" size="10"></td>
        <td>mm</td>
    </tr>
    <tr bgcolor = "#ffffff">
        <td colspan="4"></td>
        <td></td>
        <td></td>
        <td align="right"><? print ($weight); ?></td>
        <td align="right"><input type="text" name="weight" size="10"></td>
        <td>gr</td>
    </tr>
    </table>

  7. #7
    SitePoint Addict darkwater23's Avatar
    Join Date
    Nov 2005
    Location
    Omaha, NE
    Posts
    335
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code example I supplied is correct for you. It just had to be modified for your particular application. Observe how I applied it to your form. Note that I had to add the attribute "ID" to your form elements because your source didn't include the name of your form.

    First, the Javascript:

    Code:
    <script language="javascript" type="text/javascript">
    function toggleInput(radio){
    
    	if(radio.value == "unpacked"){
    		document.getElementById("weight").disabled = true;
    		document.getElementById("diam").disabled = true;
    		document.getElementById("load2").disabled = true;
    		document.getElementById("packing").disabled = true;
    		
    		document.getElementById("load1").disabled = false;
    	}
    
    	if(radio.value == "packed"){
    		document.getElementById("weight").disabled = false;
    		document.getElementById("diam").disabled = false;
    		document.getElementById("load2").disabled = false;
    		document.getElementById("packing").disabled = false;
    		
    		document.getElementById("load1").disabled = true;
    	}
    
    
    }
    </script>
    Now, your code, modified to work with the above JS.

    Code:
    <table border = "1" bordercolor="#333333" cellpadding="0" cellspacing="0" width=100%>
    <tr>
        <td colspan="4"></td>
        <td width="30%" align="right"><input type="radio" checked="checked" name="pack" value="unpacked" onClick="toggleInput(this);"><?php print ($pack1); ?></td> <!-- if this radio is "ON", disable the select and all text fields below, except text field named "load1" -->
        <td></td>
        <td align="right"><?php print ($load); ?></td><td align="right"><input type="text" name="load1" size="10" id="load1"></td>
        <td>kg/m2</td>
    </tr>
    <tr bgcolor = "#ffffff">
        <td colspan="4"></td>
        <td width="30%" align="right"><input type="radio" name="pack" value="packed" onClick="toggleInput(this);"><?php print ($pack2); ?> <!-- if this radio is "ON", disable the text field named "load1" -->
        </td><td align="left"><select name="packing" size="1" id="packing"><option value="">--- Select ---
                                          <option value="pet"><?php print ($pet); ?>
                                          <option value="crates"><?php print ($crates); ?>
                                          <option value="glass"><?php print ($glass); ?>
                                          <option value="cans"><?php print ($cans); ?>
                                          <option value="metal"><?php print ($metal); ?>
                                          <option value="aluminium"><?php print ($aluminium); ?>
                                          <option value="plastic"><?php print ($plastic); ?>
                                          <option value="cardboard"><?php print ($cardboard); ?>
                                          <option value="other"><?php print ($other); ?>
                                          </select></td>
        <td align="right"><?php print ($load); ?></td><td align="right"><input type="text" name="load2" size="10" id="load2"></td>
        <td>kg/m2</td>
    </tr>
    <tr bgcolor = "#ffffff">
        <td colspan="4"></td>
        <td></td>
        <td></td>
        <td align="right"><?php print ($diam); ?></td>
        <td align="right"><input type="text" name="diam" size="10" id="diam"></td>
        <td>mm</td>
    </tr>
    <tr bgcolor = "#ffffff">
        <td colspan="4"></td>
        <td></td>
        <td></td>
        <td align="right"><?php print ($weight); ?></td>
        <td align="right"><input type="text" name="weight" size="10" id="weight"></td>
        <td>gr</td>
    </tr>
    </table>

  8. #8
    a fresh, new start... dujmovicv's Avatar
    Join Date
    Aug 2006
    Location
    Earth
    Posts
    559
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, that was taht, THANKS A LOT!


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
  •