Change Placeholder Text based on selection does not work:
I tried @chrwahl idea, but I did not succeed:(
May be I am doing something fundamentally wrong?
I am pasting all the code below to Tilda T123 block:
<div id="rec628299319" class="r t-rec t-rec_pt_105 t-rec_pb_105" style="padding-top:105px;padding-bottom:105px; " data-animationappear="off" data-record-type="678" >
<!-- t678 -->
<div class="t678 ">
<div class="t-section__container t-container">
<div class="t-col t-col_12">
<div class="t-section__topwrapper t-align_center">
<div class="t-section__title t-title t-title_xs" field="btitle">Отправка жалобы</div>
<div class="t-section__descr t-descr t-descr_xl" field="bdescr">Ваша безопасность очень важна для нас. <br />Если вы считаете, что ваша жизнь или жизнь ваших знакомых в опасности, немедленно свяжитесь <br />с органами правопорядка.</div>
</div>
</div>
</div>
<div class="t-container">
<div class="t-col t-col_8 t-prefix_2">
<div>
<script>
document.forms.form628299319.Name.addEventListener('change', e => {
let form = e.target.form;
form.Textarea.placeholder = e.target.value;
});
</script>
<form id="form628299319" name='form628299319' role="form" action='' method='POST' data-formactiontype="0" data-inputbox=".t-input-group" class="t-form js-form-process t-form_inputs-total_3 " data-success-callback="t678_onSuccess" >
<!-- NO ONE SERVICES CONNECTED --> <input type="hidden" name="tildaspec-formname" tabindex="-1" value="Complaint">
<div class="js-successbox t-form__successbox t-text t-text_md"
aria-live="polite"
style="display:none;"
></div>
<div class="t-form__inputsbox">
<div class="t-input-group t-input-group_em" data-input-lid="1493283059688">
<label for='input_1493283059688' class="t-input-title t-descr t-descr_md" id="field-title_1493283059688" data-redactor-toolbar="no" field="li_title__1493283059688" style="color:;">Email</label>
<div class="t-input-block">
<input type="text"
autocomplete="email"
name="Email"
id="input_1493283059688"
class="t-input js-tilda-rule "
value=""
placeholder="Your Email" data-tilda-req="1" aria-required="true" data-tilda-rule="email"
aria-describedby="error_1493283059688"
style="color:#000000;border:1px solid #000000;">
<div class="t-input-error" aria-live="polite" id="error_1493283059688"></div>
</div>
</div>
<div class="t-input-group t-input-group_sb" data-input-lid="1494858943227">
<label for='input_1494858943227' class="t-input-title t-descr t-descr_md" id="field-title_1494858943227" data-redactor-toolbar="no" field="li_title__1494858943227" style="color:;">Name</label>
<div class="t-input-block">
<div class="t-select__wrapper ">
<select name="В Whinder неприемлемы никакие виды психологического насилия, такие как шантаж, принуждение, унижение, обесценивание, избегание, внушение, убеждение, манипуляция и другие. Наши обучающие статьи в приложении помогут вам разобраться, являетесь ли вы жертвой психологического насилия. Сообщайте об инцидентах в приложении через кнопку “пожаловаться” или заполните форму ниже "
id="input_1494858943227"
class="t-select js-tilda-rule " data-tilda-req="1" aria-required="true" style="color:#000000;border:1px solid #000000;">
<option value="First Placeholder" style="color:#000000;" >Value1</option>
<option value="Second Placeholder" style="color:#000000;" >Value2</option>
<option value="Обсуждение или призыв к суициду" style="color:#000000;" >Обсуждение или призыв к суициду</option>
<option value="Мошенничество " style="color:#000000;" >Мошенничество </option>
<option value="Публикация эротического или сексуального содержания " style="color:#000000;" >Публикация эротического или сексуального содержания </option>
<option value="Публикация рекламы и пропаганды " style="color:#000000;" >Публикация рекламы и пропаганды </option>
<option value="Мне кажется, одному из пользователей угрожает опасность " style="color:#000000;" >Мне кажется, одному из пользователей угрожает опасность </option>
<option value="Мой аккаунт взломали " style="color:#000000;" >Мой аккаунт взломали </option>
<option value="Использование моих персональных данных" style="color:#000000;" >Использование моих персональных данных</option>
<option value="Нарушение авторских прав " style="color:#000000;" >Нарушение авторских прав </option>
<option value="Мне кажется, что я общаюсь с несовершеннолетним " style="color:#000000;" >Мне кажется, что я общаюсь с несовершеннолетним </option>
<option value="Публикация контента, угрожающая психическому или физическому здоровью " style="color:#000000;" >Публикация контента, угрожающая психическому или физическому здоровью </option>
<option value="Другое " style="color:#000000;" >Другое </option>
</select>
</div>
<div class="t-input-error" aria-live="polite" id="error_1494858943227"></div>
</div>
</div>
<div class="t-input-group t-input-group_ta" data-input-lid="1692299339415">
<div class="t-input-block">
<textarea name="Textarea"
id="input_1692299339415"
class="t-input js-tilda-rule "
placeholder="First Placeholder" aria-describedby="error_1692299339415"
style="color:#000000; border:1px solid #000000; height:102px;" rows="3"></textarea>
<div class="t-input-error" aria-live="polite" id="error_1692299339415"></div>
</div>
</div>
<div class="t-form__errorbox-middle">
<!--noindex-->
<div class="js-errorbox-all t-form__errorbox-wrapper" style="display:none;" data-nosnippet>
<div class="t-form__errorbox-text t-text t-text_md">
<p class="t-form__errorbox-item js-rule-error js-rule-error-all"></p>
<p class="t-form__errorbox-item js-rule-error js-rule-error-req"></p>
<p class="t-form__errorbox-item js-rule-error js-rule-error-email"></p>
<p class="t-form__errorbox-item js-rule-error js-rule-error-name"></p>
<p class="t-form__errorbox-item js-rule-error js-rule-error-phone"></p>
<p class="t-form__errorbox-item js-rule-error js-rule-error-minlength"></p>
<p class="t-form__errorbox-item js-rule-error js-rule-error-string"></p>
</div>
</div>
<!--/noindex-->
</div>
<div class="t-form__submit"><button type="submit" class="t-submit" style="color:#ffffff;background-color:#6040b8;border-radius:100px; -moz-border-radius:100px; -webkit-border-radius:100px;font-family:TildaSans;font-weight:500;" >Заявить</button></div>
</div>
<div class="t-form__errorbox-bottom">
<!--noindex-->
<div class="js-errorbox-all t-form__errorbox-wrapper" style="display:none;" data-nosnippet>
<div class="t-form__errorbox-text t-text t-text_md">
<p class="t-form__errorbox-item js-rule-error js-rule-error-all"></p>
<p class="t-form__errorbox-item js-rule-error js-rule-error-req"></p>
<p class="t-form__errorbox-item js-rule-error js-rule-error-email"></p>
<p class="t-form__errorbox-item js-rule-error js-rule-error-name"></p>
<p class="t-form__errorbox-item js-rule-error js-rule-error-phone"></p>
<p class="t-form__errorbox-item js-rule-error js-rule-error-minlength"></p>
<p class="t-form__errorbox-item js-rule-error js-rule-error-string"></p>
</div>
</div>
<!--/noindex-->
</div>
</form>
<style>#rec628299319 input::-webkit-input-placeholder {color:#000000; opacity: 0.5;}
#rec628299319 input::-moz-placeholder {color:#000000; opacity: 0.5;}
#rec628299319 input:-moz-placeholder {color:#000000; opacity: 0.5;}
#rec628299319 input:-ms-input-placeholder {color:#000000; opacity: 0.5;}
#rec628299319 textarea::-webkit-input-placeholder {color:#000000; opacity: 0.5;}
#rec628299319 textarea::-moz-placeholder {color:#000000; opacity: 0.5;}
#rec628299319 textarea:-moz-placeholder {color:#000000; opacity: 0.5;}
#rec628299319 textarea:-ms-input-placeholder {color:#000000; opacity: 0.5;}
</style>
</div>
</div>
</div>
</div>
</div>
<div id="rec628298758" class="r t-rec t-rec_pt_30" style="padding-top:30px; " data-animationappear="off" data-record-type="1003" >
<!-- cover -->
<div class="t1003" data-display-changed="true" style="min-height: 70px;">
<div class="t1003__outer" >
<div class="t1003__wrapper" style="" data-marquee-speed="1" data-auto-correct-mobile-width="false">
<div class="t1003__content-wrapper" style="background-color: #6040b8;height: 70px;" data-auto-correct-mobile-width="false">
<div class="t1003__content" data-auto-correct-mobile-width="false">
<div class="t1003__item" data-auto-correct-mobile-width="false">
<div class="t-text t-text_md t1003__item-txt" style="padding: 0 10px;color:#ffffff;">Whinder оставляет за собой право прекращать действие вашего аккаунта без возмещения каких-либо покупок, если вы злоупотребляете Приложением или если, по мнению Whinder, ваше поведение является неприемлемым, незаконным или нарушающим Правила сообщества, включая действия вне Приложения в отношении пользователей, с которыми вы познакомились с помощью Приложения.</div>
<svg role="presentation" width="6" height="6" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="5.11351" cy="4" rx="4.16918" ry="4" fill="#ffffff"/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<style></style>
<script>t_onReady(function () {
t_onFuncLoad('t1003_init', function () {
t1003_init('628298758', '');
});
});
</script>
</div>Does it matter where I paste JS parts inside my HTML script?enter image description here
It is better just you use an event listener. And then the Textarea element has a property called placeholder. Why not use the value of the option an insert that directly?
document.forms.form01.Name.addEventListener('change', e => {
let form = e.target.form;
form.Textarea.placeholder = e.target.value;
});#rec628299319 input::-webkit-input-placeholder {
color: #000000;
opacity: 0.5;
}
#rec628299319 input::-moz-placeholder {
color: #000000;
opacity: 0.5;
}
#rec628299319 input:-moz-placeholder {
color: #000000;
opacity: 0.5;
}
#rec628299319 input:-ms-input-placeholder {
color: #000000;
opacity: 0.5;
}
#rec628299319 textarea::-webkit-input-placeholder {
color: #000000;
opacity: 0.5;
}
#rec628299319 textarea::-moz-placeholder {
color: #000000;
opacity: 0.5;
}
#rec628299319 textarea:-moz-placeholder {
color: #000000;
opacity: 0.5;
}
#rec628299319 textarea:-ms-input-placeholder {
color: #000000;
opacity: 0.5;
}<form name="form01">
<div class="t-input-block">
<div class="t-select__wrapper ">
<select name="Name" id="input_1494858943227" class="t-select js-tilda-rule " data-tilda-req="1" aria-required="true" style="color:#000000;border:1px solid #000000;">
<option value="First Placeholder" style="color:#000000;">Value1</option>
<option value="Second Placeholder" style="color:#000000;">Value2</option>
</select>
</div>
<div class="t-input-error" aria-live="polite" id="error_1494858943227"></div>
</div>
<div class="t-input-group t-input-group_ta" data-input-lid="1692299339415">
<div class="t-input-block"><textarea name="Textarea" id="input_1692299339415" class="t-input js-tilda-rule " placeholder="First Placeholder" aria-describedby="error_1692299339415" style="color:#000000; border:1px solid #000000; height:102px;" rows="3"></textarea>
<div class="t-input-error" aria-live="polite" id="error_1692299339415"></div>
</div>
</div>
<div class="t-form__errorbox-middle">
<!--noindex-->
<div class="js-errorbox-all t-form__errorbox-wrapper" style="display:none;" data-nosnippet>
<div class="t-form__errorbox-text t-text t-text_md">
<p class="t-form__errorbox-item js-rule-error js-rule-error-all"></p>
<p class="t-form__errorbox-item js-rule-error js-rule-error-req"></p>
<p class="t-form__errorbox-item js-rule-error js-rule-error-email"></p>
<p class="t-form__errorbox-item js-rule-error js-rule-error-name"></p>
<p class="t-form__errorbox-item js-rule-error js-rule-error-phone"></p>
<p class="t-form__errorbox-item js-rule-error js-rule-error-minlength"></p>
<p class="t-form__errorbox-item js-rule-error js-rule-error-string"></p>
</div>
</div>
<!--/noindex-->
</div>
<div class="t-form__submit"><button type="submit" class="t-submit" style="color:#ffffff;background-color:#6040b8;border-radius:100px; -moz-border-radius:100px; -webkit-border-radius:100px;font-family:TildaSans;font-weight:500;">Заявить</button></div>
</div>
<div class="t-form__errorbox-bottom">
<!--noindex-->
<div class="js-errorbox-all t-form__errorbox-wrapper" style="display:none;" data-nosnippet>
<div class="t-form__errorbox-text t-text t-text_md">
<p class="t-form__errorbox-item js-rule-error js-rule-error-all"></p>
<p class="t-form__errorbox-item js-rule-error js-rule-error-req"></p>
<p class="t-form__errorbox-item js-rule-error js-rule-error-email"></p>
<p class="t-form__errorbox-item js-rule-error js-rule-error-name"></p>
<p class="t-form__errorbox-item js-rule-error js-rule-error-phone"></p>
<p class="t-form__errorbox-item js-rule-error js-rule-error-minlength"></p>
<p class="t-form__errorbox-item js-rule-error js-rule-error-string"></p>
</div>
</div>
<!--/noindex-->
</div>
</form>The question is how the HTML and JavaScript should be structured. There are different options. I prefer to add the JavaScript to the head element of the HTML document. So, here at two examples, one script element with a reference to a external JavaScript file and the second script element with JavaScript included in the document. In both cases the JavaScript should look the same. The thing to be aware of is that in both cases the JavaScript is loaded before the HTML has been loaded into the DOM, so you need to be careful to reference elements (like the form) inside the callback function of the DOMContentLoaded event. You can also have the JavaScript in the bottom of the HTML document -- just before the ending body tag. The advantage to this is that you know that all the HTML elements has been loaded at this point. The disadvantage is that is messes up the structure where you separate data (HTML), presentation (CSS) and functionality (JavaScript).
<html>
<head>
<title>HTML structure</title>
<meta charset="utf-8" />
<link rel="stylesheet" tyle="text/css" href="/css/style.css">
<script tyle="text/javascript" src="/js/javascript.js"></script>
<script tyle="text/javascript">
document.addEventListener('DOMContentLoaded', e => {
// The DOM has been loaded
document.forms.form01.Name.addEventListener('change', e => {
let form = e.target.form;
form.Textarea.placeholder = e.target.value;
});
});
</script>
</head>
<body>
<h1>Content goes here</h1>
<form name="form01">...</form>
<script tyle="text/javascript">
// The DOM has been loaded
document.forms.form01.Name.addEventListener('change', e => {
let form = e.target.form;
form.Textarea.placeholder = e.target.value;
});
</script>
</body>
</html>