How to execute a jquery script when loading a page

Question

How to execute a jquery script when loading a page

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

This is my form:

<form name="ff">
    <select id="type" name="type">
        <option value="0">Federal</option>
        <option  value="1">Estadual</option>
        <option value="2">Municipal</option>
    </select><br>
    <div id="state" >
        <label>Estado</label>
        <input type="text" name="state"/> <br>
    </div>
    <div id="city">
        <label>Cidade</label>
        <input type="text" name="city"   /><br>
    </div>
    <label>Nome</label>
    <input type="text" name="name" id="name" />
</form>

The jquery script:

$(document).ready(function() {
  $('#state').hide();
  $('#city').hide();
  $('#type').change(function() {
    if ($('#type').val() == 1) {
        $('#state').show();
        $('#city').hide();
    }if($('#type').val() == 2) {
        $('#state').show();
        $('#city').show();
    }if($('#type').val() == 0) {
      $('#state').hide();
      $('#city').hide();
    }
  });
});

Example: link

But when I edit it is not working correctly When I select type the second option the city does not disable

Problem example: link

It's getting this way

andshouldbelikethis

javascript jquery

asked by anonymous 13.09.2017 / 23:55

2 answers

How to check equal values of a Foreach Pass String to array (Xml);

score 1 · Answer 1

Make a function with the type combo validation, then when you give change you call this function, and once you load the form you can also call, once you load your view it will validate which option is selected and treat according to the function Your JS would look like this:

$(document).ready(function() {
  $('#state').hide();
  $('#city').hide();
  $('#type').change(function() {
   ValidaTipo();
  });
  ValidaTipo();
});

function ValidaTipo(){
 if ($('#type').val() == 1) {
        $('#state').show();
        $('#city').hide();
    }if($('#type').val() == 2) {
        $('#state').show();
        $('#city').show();
    }if($('#type').val() == 0) {
      $('#state').hide();
      $('#city').hide();
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formname="ff">
     <select id="type" name="type">
    	<option value="0">Federal</option>
    	<option selected="selected" value="1">Estadual</option>
    	<option value="2">Municipal</option>
    </select><br>
    <div id="state" >
     <label>Estado</label>
  <input type="text" name="state"/> <br>
    </div>
 <div id="city">
   <label>Cidade</label>
    <input type="text" name="city"   /><br>
 </div>
 
     <label>Nome</label>
    <input type="text" name="name" id="name" />
</form>

score 0 · Answer 2

With this script the results will be:

Federal: - Name

State: - State - Name

Municipal: - State - City - Name

Now it is easier to make any changes, since you only have to worry about the values that will be shown.

    $(document).ready(function() {
      $('#state').hide();
      $('#city').hide();
      $('#type').change(function() {
        $('.nomeFormulario div').hide();
        if ($('#type').val() == 1) {
            $('#state').show();
        }
        if($('#type').val() == 2) {
            $('#state').show();
            $('#city').show();
        }
      });
    });

I added the FormName class to the form so I did not hide some div from another form that might be on the same page.

<form name="ff" class="nomeFormulario">
    <select id="type" name="type">
        <option value="0">Federal</option>
        <option  value="1">Estadual</option>
        <option value="2">Municipal</option>
    </select><br>
    <div id="state" >
        <label>Estado</label>
        <input type="text" name="state"/> <br>
    </div>
    <div id="city">
        <label>Cidade</label>
        <input type="text" name="city"   /><br>
    </div>
    <label>Nome</label>
    <input type="text" name="name" id="name" />
</form>