Page 1 of 1

Sticky radios without form submission?

Posted: Sat Mar 25, 2006 11:28 am
by mattcooper
Hi guys,

Am developing a CMS, and the current page I am working on has a number of options for the user to select using radios. They have the option to include some external links, the number of which can be selected from a jump menu. The code below work perfectly, but when the page is redisplayed with input fields for the external links, the radios are reset.

Code: Select all

<form name="form1" method="post" action="">
  <table width="445" border="0" cellspacing="3" cellpadding="0">
    <tr>
      <td width="315"><strong>Do you require "back" and "next" buttons? </strong></td>
      <td width="66"><input name="bn_buttons" type="radio" value="1" checked> 
      Yes </td>
      <td width="64"><input name="bn_buttons" type="radio" value="0">
        No</td>
    </tr>
    <tr bgcolor="#CCCCCC">
      <td><strong>Would you like a "quick menu"? </strong></td>
      <td><input name="q_menu" type="radio" value="1">
      Yes</td>
      <td><input name="q_menu" type="radio" value="radiobutton">
        No</td>
    </tr>
    <tr>
      <td><strong>How many external links would you like?</strong></td>
      <td colspan="2"><select name="el_menu" class="el_menu" onChange="MM_jumpMenu('parent',this,1)">
        <option selected><? if(isset($_GET['el'])){ echo $_GET['el']; }else{ echo "None"; } ?></option>
        <option value="<? echo $_SERVER['PHP_SELF'] . "?el=1"; ?>">1</option>
        <option value="<? echo $_SERVER['PHP_SELF'] . "?el=2"; ?>">2</option>
        <option value="<? echo $_SERVER['PHP_SELF'] . "?el=3"; ?>">3</option>
        <option value="<? echo $_SERVER['PHP_SELF'] . "?el=4"; ?>">4</option>
      </select> </td>
    </tr>
    <tr bgcolor="#CCCCCC">
      <td><strong>Will the main menu display on every page? </strong></td>
      <td><input name="m_menu" type="radio" value="1">
        Yes</td>
      <td><input name="m_menu" type="radio" value="0" checked>
      No</td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr bgcolor="#CCCCCC">
      <td>
<? if(isset($_GET['el'])){
	if($_GET['el']){
	$s = s;
	}
	echo "<p><b>Please enter the URL$s and the name$s of the link$s below</b></p>";
	$el_num =  $_GET['el'];
	$i = 1;
		while($i <= $el_num){
		echo "External link # $i <input type=\"text\" name=\"el_name_$i\" value=\"Label\">&nbsp;&nbsp;<input type\"text\" name=\"el_url_$i\" value=\"URL\"><br><br>";
		$i++;
		}
	}
?>
	  
	  
	  
	  </td>
    </tr>
  </table>
</form>
Is there a way to make the radios sticky without submitting the form? If not (and I suspect this will be the case), is there a better method to use than a jump menu to reload the page with the input fields?

Thanks in advance,

Matt.

Posted: Sat Mar 25, 2006 4:36 pm
by feyd
the jump menu could submit the form for redisplay, however I usually code this sort of thing to dynamically generate and inject the additional form element tags needed. With your code, I'd add an id to the table cell where these are two be displayed and use the appendChild() DOM methods to inject the elements into the table and associate them with the form. Search my posts for appendChild for a, albeit slightly complex, example of it.

Posted: Sun Mar 26, 2006 6:12 pm
by gavinandresen
Sounds like a job for fillInFormValues(). Get all that PHP code OUT of your form's HTML; see:
http://www.onlamp.com/pub/a/php/2006/03 ... forms.html

Posted: Mon Mar 27, 2006 6:27 am
by mattcooper
Thanks guys, Javascript came to the rescue in the end with a simple fix...

Code: Select all

<form name="navigation" method="post" action="<? echo $_SERVER['PHP_SELF']; ?>">
  <table width="445" border="0" cellspacing="3" cellpadding="0">
    <tr>
      <td width="315"><strong>Do you require "back" and "next" buttons? </strong></td>
      <td width="66"><input name="bn_buttons" type="radio" value="1" <? if(isset($_POST['bn_buttons'])&&$_POST['bn_buttons']=="1"){ echo "checked"; } ?>> 
      Yes </td>
      <td width="64"><input name="bn_buttons" type="radio" value="0" <? if(isset($_POST['bn_buttons'])&&$_POST['bn_buttons']=="0"){ echo "checked"; } ?>>
        No</td>
    </tr>
    <tr bgcolor="#CCCCCC">
      <td><strong>Would you like a "quick menu"? </strong></td>
      <td><input name="q_menu" type="radio" value="1" <? if(isset($_POST['q_menu'])&&$_POST['q_menu']=="1"){ echo "checked"; } ?> onClick="document.navigation.m_menu[0].disabled = true;">
      Yes</td>
      <td><input name="q_menu" type="radio" value="0" <? if(isset($_POST['q_menu'])&&$_POST['q_menu']=="0"){ echo "checked"; } ?> onClick="document.navigation.m_menu[0].disabled = false;">
        No</td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td><strong>Will the main menu display on every page? </strong></td>
      <td><input name="m_menu" type="radio" value="1" <? if(isset($_POST['m_menu'])&&$_POST['m_menu']=="1"){ echo "checked"; } ?> onClick="document.navigation.q_menu[0].disabled = true;">
    Yes</td>
      <td><input name="m_menu" type="radio" value="0" <? if(isset($_POST['m_menu'])&&$_POST['m_menu']=="0"){ echo "checked"; } ?> onClick="document.navigation.q_menu[0].disabled = false;">
    No</td>
    </tr>
    <tr bgcolor="#CCCCCC">
      <td><strong>How many external links would you like?</strong></td>
      <td colspan="2"><select name="el_menu" class="el_menu" onChange="submitform()">
          <option selected>
          <? if(isset($_POST['el_menu'])){ echo $_POST['el_menu']; }else{ echo "None"; } ?>
          </option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
        </select>
&nbsp;<script language="JavaScript">function submitform()
{
  document.navigation.submit();
}
</script></td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td colspan="3">&nbsp;</td>
    </tr>
    <tr bgcolor="#00FF66">
      <td colspan="3"><? if(isset($_POST['el_menu'])){
	if($_POST['el_menu']>1){
	$s = s;
	}
	echo "<p><b>Please enter the URL$s and the name$s of the link$s below</b></p>";
	$el_num =  $_POST['el_menu'];
	$i = 1;
	$x = 5;
		while($i <= $el_num){
		if($el_num<$x){
		echo "External link # $i<br><input type=\"text\" name=\"el_name_$i\" value=\"Label\"> Example: Sponsor $i&nbsp;&nbsp;<input type\"text\" name=\"el_url_$i\" value=\"URL\"><a href=\"help.php?context=el_urls\" target=\"_blank\"><img src=\"images/help.gif\" border=\"0\"></a><br>";
		$i++;
			}
	else{
		echo "You've selected more links than it is possible to include in the navigation toolbar";
		break;
		}
	}
}
?></td>
    </tr>
    <tr bgcolor="#CCCCCC">
      
    </tr>
  </table>
</form>
The menu now submits the form, and I've made the radios sticky with PHP. Not too difficult in the end, maybe a bit long-winded though!

Thanks again! :)