How to run a jquery script when loading a page

Asked

Viewed 5,343 times

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: https://jsfiddle.net/73kspqph/5/

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

Example of the problem: https://jsfiddle.net/73kspqph/8

is getting like this

inserir a descrição da imagem aqui

and it should stay that way

inserir a descrição da imagem aqui

javascript jquery

  • The second option is Estadual worthwhile 1 which according to jQuery shows the state and hides the city. That’s precisely what I see happening in jsfiddle. It is best to try to clarify what is the name of the option you are choosing and what is appearing that should not

  • I edited my question with some images to better understand

  • Your Fiddle is already getting as you’d like it to be. What a mistake?

  • the problem is when I will edit this record that already comes selected type: Federal so when it will switch to the Edit page, you will have to be with the hidden city and state input, but it does not stay. as shown in the image example

  • But that’s not what happens in the fiddle you put in. That’s when you switch to Estadual the city disappears. Try to put a fiddle that can show the problem

  • https://jsfiddle.net/73kspqph/8/ it should be showing the status input

  • You got something I sent @Isac

  • 1

    But it appears when you select. It simply does not appear when you open because the code is not executed at the beginning, but when it changes. You can force a call to change as soon as the page opens with $("#type").change(); before the end of document ready

  • Gave straight @Isac, very grateful.

  • By the way you can slightly simplify your logic, so for example

  • that’s what I did!

Show 6 more comments

2 answers

1

Makes a Function with the validation of the type combo, Ai when the change you call this function, and once you load the form you can call too, Ai as soon as you load your view it will validate which option is selected and treat as 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>
<form name="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>

0

With this script the results will be:

Federal: - Nome

State: - State - Nome

Municipal: - State - City - Nome

Now this easier to make any changes, since you need to worry only 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 in the form so as not to hide any 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>

  • I made the change and it’s working according to your edition.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.