Vanilla JS - Ottieni l'elemento in base al nome di un div
Devo tradurre questo comando jQuery in JavaScript:
$('#edit_pickup_date_modal').find('input[name=type]').val('2');
Ho provato a:
var element = document.getElementById('edit_pickup_date_modal');
var input = element.getElementsByName('type')[0];
input.value = '2'
ma ho ricevuto l'errore "element.getElementsByName non è una funzione"
Risposte
Utilizzare getElementById
per ottenere il tag con ID "edit_pickup_date_modal". Quindi cerca con querySelector
il primo campo INPUT con nome = 'tipo' e imposta il valore.
document.getElementById('edit_pickup_date_modal').querySelector('input[name=type]').value=2;
<div id='edit_pickup_date_modal'>
<div>
<input name ='type'>
</div>
</div>
Per ulteriori informazioni sulla ricerca di elementi su DOM come getElementById
, querySelector
fare riferimento qui
const modalDiv = document.getElementById('edit_pickup_date_modal')
const inputElem = modalDiv.querySelector('input[name=type]');
inputElem.value = 2
<div id="edit_pickup_date_modal">
<input name="type"/>
</div>
Puoi anche combinare l'intera operazione in un'unica querySelector
:
document.querySelector('#edit_pickup_date_modal input[name=type]').value=2;
<div id='edit_pickup_date_modal'>
<div>
<input name ='type'>
</div>
</div>
La funzione vanilla equivalente per jQuery $('#edit_pickup_date_modal').find('input[name=type]').val('2');
è:
document.querySelectorAll('#edit_pickup_date_modal input[name=type]').forEach(function(obj, index){
obj.value=2;
});
//If you need to take the first element only.
document.querySelector('#edit_pickup_date_modal input[name=type]').value=3;
<div id="edit_pickup_date_modal">
<input name="type"/>
<input name="type"/>
<input name="type"/>
<input name="type"/>
</div>
E significa:
per ciascuno
input[name=type]
all'interno dell'elemento con IDedit_pickup_date_modal
, assegna alla suavalue
proprietà il valore della costante 2.