Hide object with Javascript

Asked

Viewed 1,431 times

2

I’m trying to hide an object in Javascript, I’m having difficulties, I tried the command:

document.getElementById("form-tab-1").style.display = "none";

But it doesn’t work, I don’t know why.

The object to be hidden is inside the red circle:

inserir a descrição da imagem aqui

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html class="supernova"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="alternate" type="application/json+oembed" href="https://www.jotform.com/oembed/?format=json&amp;url=http%3A%2F%2Fwww.jotform.com%2Fform%2F62396609310658" title="oEmbed Form"><link rel="alternate" type="text/xml+oembed" href="https://www.jotform.com/oembed/?format=xml&amp;url=http%3A%2F%2Fwww.jotform.com%2Fform%2F62396609310658" title="oEmbed Form">
<meta property="og:title" content="teste" >
<meta property="og:url" content="http://www.jotformz.com/form/62396609310658" >
<meta property="og:description" content="Please click the link to complete this form.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="HandheldFriendly" content="true" />
<title>teste</title>
<link href="https://cdn.jotfor.ms/static/formCss.css?3.3.14726" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/css/styles/nova.css?3.3.14726" />
<link type="text/css" media="print" rel="stylesheet" href="https://cdn.jotfor.ms/css/printForm.css?3.3.14726" />
<link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/themes/CSS/566a91c2977cdfcd478b4567.css?"/>
<style type="text/css">
    .form-label-left{
        width:150px !important;
    }
    .form-line{
        padding-top:12px;
        padding-bottom:12px;
    }
    .form-label-right{
        width:150px !important;
    }
    body, html{
        margin:0;
        padding:0;
        background:false;
    }

    .form-all{
        margin:0px auto;
        padding-top:0px;
        width:690px;
        color:#555 !important;
        font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;
        font-size:14px;
    }
</style>

<script src="https://cdn.jotfor.ms/static/prototype.forms.js" type="text/javascript"></script>
<script src="https://cdn.jotfor.ms/static/jotform.forms.js?3.3.14726" type="text/javascript"></script>
<script src="https://js.jotform.com/vendor/postMessage.js?3.3.14726" type="text/javascript"></script>
<script src="https://js.jotform.com/WidgetsServer.js" type="text/javascript"></script>
<script type="text/javascript">
   JotForm.init(function(){
      JotForm.alterTexts({"alphabetic":"Este campo pode conter apenas letras","alphanumeric":"Este campo só pode conter letras e números.","ccInvalidCVC":"Single Product w/ Single Choice Orders ","ccInvalidExpireDate":"Expire date is invalid.","ccInvalidNumber":"Credit Card Number is invalid.","ccMissingDetails":"Please fill up the Credit Card details.","ccMissingDonation":"Please enter numeric values for donation amount.","ccMissingProduct":"Please select at least one product.","characterLimitError":"Too many Characters.  The limit is","characterMinLimitError":"Too few characters. The minimum is","confirmClearForm":"Você tem certeza que quer limpar este formulário?","confirmEmail":"E-mail não confere","currency":"Este campo apenas admite valores monetários.","cyrillic":"Este campo aceita apenas caracteres cirilicos.","dateInvalid":"This date is not valid. The date format is {format}","dateInvalidSeparate":"This date is not valid. Enter a valid {element}.","dateLimited":"This date is unavailable.","disallowDecimals":"Please enter a whole number.","email":"Digite um endereço de e-mail válido.","fillMask":"Valor do campo deve preencher máscara.","freeEmailError":"Não são permitidas contas de email gratuitas","generalError":"Existem alguns erros no formulário. Corrija-os antes de continuar. ","generalPageError":"Há erros nesta página. Por favor, corrija-os antes de continuar.","gradingScoreError":"Pontuação total deve ser menor ou igual a ","incompleteFields":"Há campos obrigatórios incompletos. Por favor, preencha-os.","inputCarretErrorA":"A entrada não deve ser menor do que o valor mínimo:","inputCarretErrorB":"Valor não deve ser maior do que o máximo:","lessThan":"A sua pontuação deve ser inferior ou igual a","maxDigitsError":"O numero máximo de caracteres permitidos são","maxSelectionsError":"O número máximo de seleções permitido é","minSelectionsError":"O número mínimo exigido de seleções é","multipleFileUploads_emptyError":"{file} está vazio, por favor selecione os arquivos de novo.","multipleFileUploads_fileLimitError":"Somente são permitidos {fileLimit} envios de arquivos","multipleFileUploads_minSizeError":"{file} é muito pequeno, o tamanho mínimo do arquivo é {minSizeLimit}.","multipleFileUploads_onLeave":"Os arquivos agora estão em upload, se você sair agora o upload será cancelado.","multipleFileUploads_sizeError":"{file} é muito grande, o tamanho máximo é {sizeLimit}.","multipleFileUploads_typeError":"O arquivo {file} é inválido, pois somente as extensões {extensions} são permitidas.","numeric":"Este campo pode conter apenas números","pastDatesDisallowed":"A data não pode ser passada.","pleaseWait":"Por favor aguarde...","required":"Este campo é obrigatório.","requireEveryCell":"Toda célula é requisitada.","requireEveryRow":"Todos os campos são requeridos.","requireOne":"Pelo menos um campo é requisitado","submissionLimit":"Foi mal, mas apenas um envio de dados é permitido. Múltiplas submissões estão desativadas nesse formulário.","uploadExtensions":"Só pode fazer upload dos seguintes ficheiros:","uploadFilesize":"O tamanho do arquivo não pode ser maior que:","uploadFilesizemin":"O ficheiro não pode ser menor que:","url":"Este campo apenas pode conter um URL v&Atilde;&iexcl;lido","wordLimitError":"Too many words. The limit is","wordMinLimitError":"Too few words.  The minimum is"});
	JotForm.clearFieldOnHide="disable";
	JotForm.onSubmissionError="jumpToFirstError";
   });
</script>
</head>
<body>
<form class="jotform-form" action="https://submit.jotformz.com/submit/62396609310658/" method="post" name="form_62396609310658" id="62396609310658" accept-charset="utf-8">
  <input type="hidden" name="formID" value="62396609310658" />
  <div class="form-all">
    <ul class="form-section page-section">
      <li id="cid_1" class="form-input-wide" data-type="control_head">
        <div class="form-header-group">
          <div class="header-text httal htvam">
            <h2 id="header_1" class="form-header">
              teste
            </h2>
          </div>
        </div>
      </li>
      <li class="form-line" data-type="control_widget" id="id_3">
        <div id="cid_3" class=" jf-required">
          <div style="width:100%; text-align:Left;">
            <div class="direct-embed-widgets widget-static" data-type="direct-embed" style="width:50px;height: 50px;">
              <div class="form_tabs_widget">
                <script type="text/javascript">
                  var formTitleShow = 'No'
  var tabTitles = 'Page 1\nPage 2'.split(',');
  var tabsCustomCss = '#tabs-list .current {\n    color : #000000 !important;\n    border-radius : 4px !important;\n    border : 4px solid #9C9C9C !important;\n    background : #ffffff !important;\n    z-index : 5;\n    position : absolute;\n    top : 130px;\n    left : 500px;\n}\n\ndiv.liBefore, div.liAfter {\n    display : none !important;\n}\n\n.tabs-list.default li {\n    border-radius : 4px !important;\n    border : 4px solid #9C9C9C !important;\n    border-color : #9C9C9C !important;\n    font-size : 12px !important;\n    background : #F1F1F1 !important;\n    color : #F1F1F1 !important;\n    z-index : 5;\n    position : absolute;\n    top : 130px;\n    left : 500px;\n}';
  var navigateWithoutValidation = 'No';
  var formTabsTheme = 'default';
                </script>
                <script src="//widgets.jotform.io/formTabs/scripts.min.js" type="text/javascript"></script>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li id="cid_5" class="form-input-wide" data-type="control_pagebreak">
        <div class="form-pagebreak">
          <div class="form-pagebreak-back-container">
            <button type="button" class="form-pagebreak-back " id="form-pagebreak-back_5">
              Voltar
            </button>
          </div>
          <div class="form-pagebreak-next-container">
            <button type="button" class="form-pagebreak-next " id="form-pagebreak-next_5">
              Seguinte
            </button>
          </div>
        </div>
      </li>
    </ul>
    <ul class="form-section page-section" style="display:none;">
      <li style="display:none">
        Should be Empty:
        <input type="text" name="website" value="" />
      </li>
    </ul>
  </div>
  <script>
  JotForm.showJotFormPowered = true;
  </script>
  <input type="hidden" id="simple_spc" name="simple_spc" value="62396609310658" />
  <script type="text/javascript">
  document.getElementById("si" + "mple" + "_spc").value = "62396609310658-62396609310658";
  </script>
  <script src="https://cdn.jotfor.ms/js/widgetResizer.js?REV=3.3.14726" type="text/javascript"></script>
</form></body>
</html>

javascript html

3 answers

2


I noticed that some of your Libraries are modifying the HTML elements, including "form#form-tab-1". Maybe the element is losing its styles online. I can’t say, but your library(s) (ies) can (ssam) already have methods to do what you want.

I waited until page click to hide #form-tab-1, and #form-tab-2 together, and worked.

I would recommend doing this kind of work at the end of the 'body', therefore. And another, you can use the CSS classes to do this. Continuing...

(function(root) {
    var requestAnimFrame = (function() {
        var request = root.requestAnimationFrame;
        if (!request) {
            var arr = ["webkit", "moz", "ms"];
            for (var i = 0, prefix; prefix = arr[i]; i++) {
                if (request = root[prefix + "RequestAnimationFrame"]) break;
            };

        } return request || function(callback) { setTimeout(callback, 20); };
    })();

    (function checker() {
        if (document.readyState === "complete") {
            document.getElementById('form-tab-1').style.display = 'none';
            document.getElementById('form-tab-2').style.display = 'none';

        } else requestAnimFrame(checker);
    })();

})(this);

  • This works but did not want to link with the page loading, because I am limited to hide only one time (page loading) and I wanted to hide/show the object several times

  • @Vitormarqueslourenço But you can hide/show the object several times. This is not absolute, this is what you were doing. What is your question then? You have not specified any of this in the question, and you can change the styles of the element at any time. But it’s still better to use classes.

0

Do it that way:

document.getElementById('form-tab-1').style.display = 'none';

And in being form there has to be the id with the same identifier, in this way:

<form id="form-tab-1">
...conteúdo...
</form>

0

After analyzing your code I realized that there is one form below the other.

There are two ways to solve your problem one is via Javascript:

document.getElementById("tabs-list").style.display = 'none'

And the other with Css:

 #tabs-list{
display:none
}

  • I put your command in javascript and it didn’t work, with CSS works but I wanted to with css, because I plan to hide in the future with the pressing of a boot

Browser other questions tagged javascript html

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