Hide object with JavaScript

Question

Hide object with JavaScript

Navigation

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

1

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 does not work, I do not know why.

The object to be hidden is inside the red circle:

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

asked by anonymous 28.08.2016 / 02:36

3 answers

0

Do this:

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

And not being form there must be id with same identifier, like this:

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

28.08.2016 / 04:06

0

After analyzing your code, I noticed that one form exists 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 one with Css:

 #tabs-list{
display:none
}

29.08.2016 / 16:21

Variable not set in for-loop in Python Drag div to another div and resize when dropping!

score 1 · Accepted Answer

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

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

I would recommend doing this type of work at the end of 'body' , therefore. And another, you can use 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);