Disable input in the form

JavaScript
1

Hello,

Personnel have the following code:

<script type="text/javascript">
function mostraDiv(valor){
if(valor == "fisica"){
document.getElementById("fisica").style.display = "";
document.getElementById("juridica").style.display = "none";
document.getElementById("juridica").disable = "true";
document.getElementById("fisica").disable = "false";}
else if(valor == "juridica"){
document.getElementById("fisica").style.display = "none";
document.getElementById("fisica").disable = "true";
document.getElementById("juridica").style.display = "";
document.getElementById("juridica").disable = "false";}}
</script>

<table width="480" border="1" style="margin-left: 60px;"><tbody>
<tr class="radio">
<td width="200"></td>
<td width="260" scope="col"><strong>TIPO DE CADASTRO:</strong></td>
<td width="240" scope="col"><input type="radio" id="pf" name="selecionar" value="fisica" onChange="mostraDiv(this.value)" /><label for="pf">PESSOA FÍSICA</label></td>
<td width="70"><strong style="color:#818181">|</strong></td>
<td width="270" scope="col"><input type="radio" id="pj" name="selecionar" value="juridica" onChange="mostraDiv(this.value)"><label for="pj">PESSOA JURÍDICA</label></td>
</tr>
</tbody></table>

<table><tbody>
<form name="form2" method="post" action="{$smarty.server.PHP_SELF}">
<input type="hidden" name="register" value="true" />

<tr id="fisica">
<td class="fieldarea">CPF/MF:</td>
<td><input type="text" name="cpf[1]" value="" onpaste="return false;" id="cpf" maxlength="14" size="43" placeholder="Digite o seu CPF..."/></td>
</tr>

<tr style="display: none;" id="juridica">
<td class="fieldarea">CNPJ/MF:</td>
<td><input name="cnpj[1]" id="cnpj" value="" type="text" maxlength="18" size="43" placeholder="Digite o seu CNPJ..."></td>
</tr>

<tr>
<td width="150" class="fieldarea">Nome:</td>
<td><input type="text" name="firstname" value="Nome" class="large" placeholder="Digite o seu nome..."></td>
</tr>

<tr>
<td>
<button type="submit"><strong>Enviar</strong></span></button>
</td>
</tr>

</form>
</tbody></table>

I was wondering if someone could help me make a change, I want to disable an input according to the option chosen.

When selecting “PESSOA FISICA”, it disables the input of the “PESSOA JURIDICA”, and vice versa.

Another issue is that to submit the form and a validation error occurs, it is not with the person chosen fields open. That is, if I choose the “PESSOA JURIDICA”, submit the form and an error occurs, it returns to the fields of the “PESSOA FISICA”, is not in the fields of “PESSOA JURIDICA”. I know I have to create a function type checked, but do not know how to do this.

I do not have much knowledge in java, just the basics. Could anyone help me do this? take much of this change.

Thanks in advance!

2

Hi there,

Welcome to the forums :slight_smile:

Are you sure?
This means that the users won’t have the ability to alter their choice once they have made it.
For example, if they click on “PESSOA FISICA”, that disables “PESSOA JURIDICA”.
Then, if they change their mind and want to choose “PESSOA JURIDICA” instead, they can’t, as it is disabled.
If this is really what you want to do, let me know and I’ll show you how, but be warned - it is not very user friendly.

This is something you have to do in PHP.
First, move the radio buttons inside the <form> tag.
Then you will be able to retrieve the values for the radio buttons in your script like this:

$tipoDeCadastro = $_POST['selecionar'];

You only want to do this once the form has actually been submitted, so do this:

$tipoDeCadastro ='';
if ($_SERVER['REQUEST_METHOD'] == "POST"){
   $tipoDeCadastro = $_POST['selecionar'];
}

Then, you can add this to your HTML to set the buttons accordingly when the form is re-rendered after a submission:

<input type="radio" id="pf" name="selecionar" value="fisica" onChange="mostraDiv(this.value)" <?php if($tipoDeCadastro =='fisica'){echo 'selected';} ?> />
<input type="radio" id="pj" name="selecionar" value="juridica" onChange="mostraDiv(this.value)" <?php if($tipoDeCadastro =='juridica'){echo 'selected';} ?> />

You might also want to check out this thread, where the same thing is discussed.

I hope that helps.

Edit: I didn’t test this code, so if you have any problems implementing it, let me know.

3

hello,

I’ve actually managed to make the script work, to disable the fields.

I’m having trouble just keeping the selections that the user chose intact.

A friend of mine told me the following: " Are you doing a server-side (PHP) validation only without client-side (JS) validation? I suggest you do both as much as possible. With JS validation, the page will never be refreshed and the selections will be kept intact. "

I could not answer he do not know what is server-side. There is no way to do this with jquery?

4

Hi,

Really? Would you mind posting your code so I can see what you ended up with?

Ok, well normally when you submit a form you post the form data to a script on a server.
If you use JavaScript to validate the form data before it is sent, this is called client-side validation.
The advantage of this method is that it is quick and, as your friend says, in the event of validation failing no action is taken, meaning that the page does not refresh and the data the user entered stays in the form fields.
The disadvantage of this method, is that it is simple to disable JavaScript in the browser, meaning that client-side validation can easily be sidestepped by a malicious user.

That’s why, you should also use server-side validation.
When your form data reaches the server, it will be available in the superglobal $_POST array. You can use this to assign your form data to variables and validate it accordingly.
This method is however slower and has the added disadvantage that following the user pressing submit, the page will be refreshed and if validation fails, the form will be re-rendered and the user’s input will be lost.
To compensate for this, a common practice is to re-echo the values the user entered back to the form (as I demonstrated in my previous post).

Of course you can do this using JavaScript, but as your friend said, it is better to do both, just to be on the safe side.

If there is anything specific I can help you with in this respect, just let me know.

See also: http://stackoverflow.com/questions/162159/javascript-client-side-vs-server-side-validation

5

Yes, see:

<script>
function mostraDiv(valor){
if(valor == "fisica"){
document.getElementById("fisica").checked = "checked";
document.getElementById("fisica").style.display = "";
document.getElementById("juridica").style.display = "none";
document.getElementById("cnpj").disabled = true;
document.getElementById("cpf").disabled = false;
}
else if(valor == "juridica"){
document.getElementById("juridica").checked = "checked";
document.getElementById("fisica").style.display = "none";
document.getElementById("juridica").style.display = "";
document.getElementById("cnpj").disabled = false;
document.getElementById("cpf").disabled = true;
}}
</script>

In fact it will only disable the fields that will appear when selecting a specific option, depending on the option chosen then it will disable the fields opposite.

Well, actually I do not need the value to remain intact in the fields, because the system that work already possess it.

What I need is that when the user chooses the option of input “radio”, this option remains if the page was updated. I have included the code as you said, but refresh the page to trigger the submit, he not remained with the option checked.

6

Hi there,

It’s probably better if I show you an example of what I mean.

You can find it here.

Here’s the code:

<?php
  $radioValue = "";
  if ($_SERVER['REQUEST_METHOD'] == "POST"){
    echo "<p style='color:red; background:yellow; width:250px; padding:15px;'><strong>You submitted the form!</strong></p>";
    if (isset($_POST['selecionar'])){
      $radioValue = $_POST['selecionar'];
    };
  }
?>

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Radio example</title>
    <style>
      div{margin:8px 0 8px 0; padding:0;}
    </style>
  </head>

  <body>
    <form name="form2" method="post" action="radios.php">
      <p><strong>TIPO DE CADASTRO:</strong></p>
      <div>
        <input type="radio" id="pf" name="selecionar" value="fisica" <?php if ($radioValue == 'fisica'){echo 'checked';} ?> />
        <label for="pf">PESSOA FÍSICA</label>
      </div>

      <div>
        <input type="radio" id="pj" name="selecionar" value="juridica" <?php if ($radioValue == 'juridica'){echo 'checked';} ?> />
        <label for="pj">PESSOA JURÍDICA</label>
      </div>

      <div id="fisica">
        <label for="cdf">CPF/MF:</label>
        <input type="text" name="cpf[1]" id="cpf" maxlength="14" size="43" placeholder="Digite o seu CPF..."/>
      </div>

      <div id="juridica">
        <label for="cdf">CNPJ/MF:</label>
        <input name="cnpj[1]" id="cnpj" type="text" maxlength="18" size="43" placeholder="Digite o seu CNPJ...">
      </div>

      <div>
        <label for="nome">Nome:</label>
        <input type="text" id="nome" name="firstname" value="Nome" class="large" placeholder="Digite o seu nome...">
      </div>

      <input type="hidden" name="register" value="true" />
      <button type="submit"><strong>Enviar</strong></button>
    </form>

    <script type="text/javascript">
      function updateDivs(value){
        if (value=="fisica"){
          fisica.style.display = "block";
          juridica.style.display = "none";
        } else {
          juridica.style.display = "block";
          fisica.style.display = "none";
        }
      }

      var fisica = document.getElementById("fisica"),
          fisicaRadio = document.getElementById("pf"),
          juridica = document.getElementById("juridica"),
          juridicaRadio = document.getElementById("pj"),
          radios = document.querySelectorAll('input[type="radio"]');

      for (var i=0; i < radios.length; i++){
        radios[i].onchange = function(){
          updateDivs(this.value);
        }
      }

      // Initialize on load
      if (juridicaRadio.checked){
        updateDivs(juridicaRadio.value);
      } else {
        if (fisicaRadio.checked == false){
          fisicaRadio.checked = true;
        }
        updateDivs(fisicaRadio.value);
      }
    </script>
  </body>
</html>

You will notice several changes to your code, namely that I removed the inline JavaScript from the form and that I removed the table you were using for layout purposes.
This really makes your code easier to maintain and much more accessible.

If you have any questions to any of this, let me know.

7

Great example, thanks!

But suppose the form to send an error occurs, then the page is updated to show the errors …

At that moment the button is not selected with the person chose… This will work in this case too?

8

Look, we integrated the code of the page but it did not work.

I use WHMCS system, you know?

Then, it uses templates, the rest of the php files are all encrypted. The format of the file of template is .tpl.

I really could not make it work on the page.

Thx.

9

Oh dear!

No.

Well, if you can post your form and the PHP script you submit it to, I don’t mind taking a look for you.