Как обновить поле формы, чтобы оно оставалось скрытым при загрузке страницы?
У меня есть эта форма в моем проекте Django. При загрузке страницы она должна показывать только поле entity name
, но она показывает оба поля entity-name
и quote-text
.
Страница должна показывать только поле quote-text
, когда entity-name
отсутствует в базе данных.
Переключение работает во всех случаях, кроме загрузки страницы. Мне нужно обновить строку if (entities.length === 0)
, но я не уверен, что именно нужно обновить.
<form>
<label for="entity-name">Entity Name:</label>
<input type="text" id="entity-name" name="entity-name" onkeyup="searchEntities()">
<div id="search_results"></div>
</form>
<form id="quote-form">
<label for="quote-text">Quote Text:</label>
<textarea class="form-control" id="quote-text" name="quote-text" rows="3"></textarea>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<script>
function searchEntities() {
const entityName = document.querySelector('#entity-name').value;
console.log('hi');
console.log(entityName);
fetch(`/search-entities/?entity_name=${entityName}`)
.then(response => response.json())
.then(entities => {
const searchResults = document.querySelector('#search_results');
searchResults.innerHTML = '';
if (entities.length === 0) {
// Show the quote field
document.querySelector('#quote-form').style.display = 'block';
} else {
entities.forEach(entity => {
const p = document.createElement('p');
p.innerHTML = entity.name;
searchResults.appendChild(p);
});
// Show the quote field
document.querySelector('#quote-form').style.display = 'none';
}
});
}
</script>
Попробуйте это и посмотрите, работает ли это, это запустит ваш скрипт после загрузки страницы и обеспечит сначала загрузку всего DOM, а затем выполнение скрипта:
<script>
....
window.onload = function() {
searchEntities();
};
</script>