Removing input fields in a form by checkbox or radiobuttons
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 5 of 5

Thread: Removing input fields in a form by checkbox or radiobuttons

  1. #1
    Join Date
    Feb 2007
    Posts
    3

    Question Removing input fields in a form by checkbox or radiobuttons

    Hi, I've started today trying to get a hold on AJAX. Im starting with basics.
    I've created a page, where there are two input fields, + two radio buttons. The radio buttons is labled "ja" and "Nei" (Norwegian for yes and no). Default the radio button labled "nei" is checked. The purpose of the yes and no buttons is whether or not the above inputfield labled "orgnr" is to be displayed.

    I tweked my own (yeah, right... i've followed an example an tweaked it) script, so it works rather fine now. But i've split it into two scripts. One for Yes and one for No. So, this can't be the easiest way to to it.

    I've got these files:
    - ny_bedrift.php
    - orgnr_JA.js
    - orgnr_NEI.js
    - orgnr_JA.php
    - orgnr_NEI.php

    -----------------------------------------------------------------------------------------------
    ny_bedrift.php (holding the form and inputs)
    -----------------------------------------------------------------------------------------------
    <form action="" method="post">
    <table width="230" border="0">
    <tr>
    <td colspan="2"><b>Ny bedrift</b></td>
    </tr>
    <tr>
    <td width="90">Navn:</td>
    <td width="171"><input name="bed_navn" type="text" id="bed_navn" size="40" /></td>
    </tr>
    <tr id= "orgnr_form">
    <td>Org.nr:</td>
    <td><input name="orgnr" type="text" id="orgnr" size="40" maxlength="9" /></td>
    </tr>
    <tr>
    <td colspan="2">Registrer uten org.nr: Ja
    <input name="orgnrsprml" type="radio" id="orgnr_form_ja" value="0" onchange="hentOrgFeltJA(this.value)" />
    Nei <input name="orgnrsprml" type="radio" id="orgnr_nei" value="1" checked="checked" onchange="hentOrgFeltNEI(this.value)"/></td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td><input type="submit" name="Submit" value="Registrer [Neste]" /></td>
    </tr>
    </table>
    <input type="hidden" value="1" name="form_state" />
    </form>';

    -----------------------------------------------------------------------------------------------
    orgnr_JA.js (holds the javascript for getting the text if yes is choosen
    -----------------------------------------------------------------------------------------------

    var xmlHttp;

    function hentOrgFeltJA(str){
    xmlHttp=GetXmlHttpObject()
    if (xmlHttp==null){
    alert ("Nettleseren din støtter ikke http forespørsler");
    return
    }
    var url="ad_domain/act/orgnr_JA.php";
    url=url+"?q="+str;
    url=url+"&sid="+Math.random();
    xmlHttp.onreadystatechange=stateChanged ;
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
    }

    function stateChanged() {
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
    document.getElementById("orgnr_form").innerHTML=xmlHttp.responseText;

    }
    }

    function GetXmlHttpObject()
    {
    var xmlHttp=null;
    try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
    catch (e)
    {
    //Internet Explorer
    try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    }
    return xmlHttp;
    }
    -----------------------------------------------------------------------------------------------
    orgnr_JA.php (generates the text to be displayed
    -----------------------------------------------------------------------------------------------
    <?php

    $orgnr_reg = $_GET["q"];

    if($org_nr_reg==0){
    echo '<td>&nbsp;</td><td>&nbsp;</td>';

    }
    ?>
    ------------------------------------------------------------------------------------------------

    orgnr_NEI.js and orgnr_NEI.php is identical to orgnr_JA.js and orgnr_JA.php
    exept url points in js points to NEI.php, and NEI.php holds a different text.

    Any good solutions to this? would help alot.

  2. #2
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,881

    Re: Removing input fields in a form by checkbox or radiobuttons

    Please remember to use &#91;code&#93; tags when posting code. It makes it easier to read. Also, you might want to tab your code.

    There is nothing "wrong" with what you did. It is just much more difficult than it has to be. Your solution here should be JavaScript and not AJAX.

    HTML page
    Code:
    <script language="JavaScript">
    var xmlHttp;
    function GetXmlHttpObject(){
      var xmlHttp=null;
      try{
        xmlHttp = new XMLHttpRequest();
      }
      catch(e){
        try{
          xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e){
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
      }
      return xmlHttp;
    }
    
    function checkjanei(str){
      xmlHttp=GetXmlHttpObject()
      if (xmlHttp==null){
        alert ("Nettleseren din støtter ikke http forespørsler");
        return
      }
      var url = "ad_domain/act/janei.php";
      url += "?q=" + str;
      url += "&sid=" + Math.random();
      xmlHttp.onreadystatechange = stateChanged;
      xmlHttp.open("GET", url, true);
      xmlHttp.send(null);
    }
    
    function stateChanged() {
      if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
        document.getElementById("orgnr_form").innerHTML = xmlHttp.responseText;
      }
    }
    </script>
    
    Ja <input name="orgnrsprml" type="radio" id="orgnr_form_ja" value="0" onchange="checkjanei(this.value)" />
    Nei <input name="orgnrsprml" type="radio" id="orgnr_nei" value="1" checked="checked" onchange="checkjanei(this.value)"/>
    janei.php
    PHP Code:
    <?php
    $janei 
    $_GET['q'];

    if(
    $janei == 0){
      
    // do ja processing
    }
    else{
      
    // do nei processing
    }
    ?>
    Last edited by PeejAvery; February 13th, 2007 at 11:04 PM.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  3. #3
    Join Date
    Feb 2007
    Posts
    3

    Re: Removing input fields in a form by checkbox or radiobuttons

    Thanx for the example

    I'll try you're solution.

    I have tried to let the php script check for the value from the two input fields (Both the string "ja"/"nei", and the values 0/1.
    I echoed out the $_GET["q"] and the value changed if i changed marked radiobutton. But did not fetch the value in the if/elseif statement.

    In other words, the php script detected the change in value (0/1) but did not echo out the corresponding text.

    I have not tried your script. So i'll try that first. I suspected that since use onchange() on both input fields, they where messing it up for each other??

    Thanks

    PS: You must exuse me as a newbie in both javascript and ajax. but is not this ajax (the way javascript is used i mean)

  4. #4
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,881

    Re: Removing input fields in a form by checkbox or radiobuttons

    Quote Originally Posted by vincent81
    I echoed out the $_GET["q"] and the value changed if i changed marked radiobutton. But did not fetch the value in the if/elseif statement.

    In other words, the php script detected the change in value (0/1) but did not echo out the corresponding text.
    Mine passes the JavaScript variable so it should work. If not, you can try creating a hidden input and change that value depending upon which radio button is selected.

    Code:
    <input name="whichradio" id="whichradio" value="nei">
    
    <script language="JavaScript">
      chkradio(which){
        document.getElementById('whichradio').value = which;
      }
    </script>
    
    Ja <input name="orgnrsprml" type="radio" id="orgnr_form_ja" value="0" onchange="if(this.checked){checkradio('ja')}">
    Nei <input name="orgnrsprml" type="radio" id="orgnr_nei" value="1" checked="checked" onchange="if(this.checked){checkradio('nei')}">
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  5. #5
    Join Date
    Feb 2007
    Posts
    3

    Re: Removing input fields in a form by checkbox or radiobuttons

    Hi, I've just tested your script, it worked perfectly

    I'll try to study the diffence between you're script and the first i wrote. It is basicly the same, but mine did not work. (So it could not been the same ).

    I must thank you again, nothing in the world is as great as when you start learning new things, and the start workin as well

Posting Permissions

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


Windows Mobile Development Center


Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


Featured


HTML5 Development Center