Hide table or form in Javascript

Navigation
0

I need to hide an HTLM element when using the function onclick() of Javascript . I have a menu consisting of a submenu of two options, like the one in the image:

In the first option (Action) a table is shown and in the second (another action) a form is displayed. If I click on Action and then on Another Action I get the table and below the form, the table is not hidden when the form is displayed.

The HTLM is as follows: 

     <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
        <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item" href="#" onclick="origin()">Action</a>
                  <a class="dropdown-item" href="#" onclick="formOrigin()">Another action</a>
       </div>
       <div>
          <table class="table"></table>
       </div>
       <div>
          <form>
            <div class="form-group">
              <label for="name">Name</label>
              <input type="text" class="form-control" id="name" placeholder="Enter name">
            </div>
            <div class="form-group">
               <label for="city">City</label>
               <input type="text" class="form-control" id="city" placeholder="city">
            </div>
            <div class="form-group form-check">
               <input type="checkbox" class="form-check-input" id="add">
               <label class="form-check-label" for="add">Check</label>
            </div>
             <button type="submit" class="btn btn-primary">Submit</button>
          </form>

       </div>

The code Javascript is: 

    function origin() {

        var url = "http://localhost:8000/api/v1/origin";
        petition.onreadystatechange = ResponseOrigin;
        petition.open("GET", url, true);
        petition.send();
        }

    function ResponseOrigin(){
        var response;
        text="<tr><th>Identifier</th><th>Name</th><th>Numero</th><th>City</th></tr>";
                if (petition.readyState == 4)
                    if (petition.status == 200) {
                        responser = petition.responseText;
                        var responseC = response.split("<");
                        var responseV = responseC[0];
                        var data = JSON.parse(responseV);
                        for (var i = 0; i < data.length; i++) {

                                text += "<tr id =" + data[i].id + "><td>" + data[i].id + "</td><td id='name'>" + data[i].name + "</td><td>" + 
                                data[i].city + "</td>";                                 

                        document.getElementById('table').innerHTML = text;

                        document.formOrigin.style.display="none";
                    }
                    else alert("Problem with URL");
            }

     function formOrigin() {


         var url = "http://localhost:8000/api/v1/origin";
            petition.onreadystatechange = responseAddOrigin;
            petition.open("POST", url, true);
            petition.send(JSON.stringify({name: document.formOrigin.name.value,
                city: document.formOrigin.city.value}));

       }
      function responseAddOrigen(){

            var response;
            if (petition.readyState == 4)
                if (petition.status == 200) {
                    response = petition.responseText;
                    alert ("data recorded correctly");
                }
                else
                    alert("Problem with URL");
        }

Any ideas?

    
asked by Lara 21.05.2018 в 13:41
source

2 answers

0

You have it bundled in the loop inside the responseOrigin () method, you do not close the loop where it should be, you're always running inside the loop: 

   document.getElementById('table').innerHTML = text;

   document.formOrigin.style.display="none";

At the same time, this makes the else of a failure because the closing of the if in that method does not close where it should be because you do not close the loop of an error.

Besides, where do you get the DOM formOrigin element? Is the name of a function but not a DOM element, I suggest you try to put a class to the div that contains the form, and make display="none" to that div. Also, within that function formOrigin() assign to onreadystatechange the value that I assume refers to responseAddOrigen() but puts responseAddOirigin .

However, by fixing those errors, the code you show only updates the content of the <table> element and you hide the form, but you do not do the opposite. And nowhere do you define the petition variable, I suppose that all the variables that lack a definition will be in the code, only you do not show it, I advise you to always show everything that is related to the problem.

Even so I hope that these indications have served, if so, a vote is always welcome;)

    
answered by 21.05.2018 / 16:45
source
0

An initial problem, it has happened to you to close the string that creates the td: 

text += "<tr id =" + data[i].id + "><td>" + data[i].id + "</td><td id='name'>" + data[i].name + "</td><td>" + 
 data[i].city + "</td> -->";<--
    
answered by 21.05.2018 в 13:52
android open pdf in browser click read and close xml file