Jump to content

How to access the value in a form field

Recommended Posts

I would like to access the values in a form field from another section where I inject code. How can I do that? There should be a way to access the field value, like

var email = document.querySelector ( '[name="email"]' ).value

var products = document.querySelector ( '[name="products"]' ).value

 

The problem is that when I create the form fields, I do not see an option to specify a 'name' or 'id' for the field.

Captura de ecrã 2023-05-04, às 21.27.30.png

Link to comment
  • Replies 2
  • Views 655
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

 

Imagine the user fill the form, I want to get the values from the fields in the form from a javascript that is going to execute in another section in the page.

Here is the code I created. Here I get the values of the checkbox options with, for instance, 

document.getElementById("tahini").value

function enviaMessage() {
	var message = "Produtos escolhidos: "
	let checkbox=document.getElementById("tahini");
	if (checkbox.checked){
		message = message + checkbox.value;
	}
	checkbox=document.getElementById("zaatar");
	if (checkbox.checked){
		message = message + ", " + checkbox.value;
	}
	checkbox=document.getElementById("1001");
	if (checkbox.checked){
		message = message + ", " + checkbox.value;
	}
	checkbox=document.getElementById("granola");
	if (checkbox.checked){
		message = message + ", " + checkbox.value;
	}
	nome = document.getElementById("nome").value;
	morada = document.getElementById("morada").value;
	telefone = document.getElementById("telefone").value;
	mensagem = document.getElementById("mensagem").value;
	message = message + " Nome: " + nome + " Morada: " + morada + " Telefone: " + telefone + " mensagem: " + mensagem
	var href = "https://api.whatsapp.com/send?phone=+xxxxxxxxx&text=" + message;
   window.location.href = href;
}

<div id="encomendaProdutos">
<form>
<fieldset id="escolhaProdutos" aria-required="true">
<legend class="title">
Escolha o(s) seu(s) produto(s):
<span class="required" aria-hidden="true">*</span>
</legend>
<label><input type="checkbox" id="tahini" name="escolhaProdutos-field" value="tahini"> Tahini 🌱 (Pasta de Sésamo) 300 Gms</label>
<label><input type="checkbox" id="zaatar" name="escolhaProdutos-field" value="zaatar"> Za'atar 150 Gms</label>
<label><input type="checkbox" id="1001" name="escolhaProdutos-field" value="1001"> Cabaz Gourmet Mil e Uma Noites</label>
<label><input type="checkbox" id="granola" name="escolhaProdutos-field" value="granola"> Granola Max 500 Gms</label>
</fieldset>
  <br><br>
  <label for="nome">Nome:</label><br>
  <input id="nome" name="nome" type="text" spellcheck="false" maxlength="30" data-title="Nome" aria-required="true">
  <br><br>
  <label for="morada">Morada:</label><br>
  <input id="morada" name="morada" type="text" spellcheck="false" maxlength="60" data-title="Morada" aria-required="true">
  <label for="telefone">Telefone:</label><br>
  <input type="number" id="telefone" name="telefone" maxlength="9" data-title="Telefone" aria-required="true"><br><br> 
  <label for="mensagem">Se quiser enviar uma mensagem para o Chef, introduza-a aqui:</label><br>
  <input id="mensagem" name="mensagem" type="text" spellcheck="false" maxlength="150" data-title="mensagem" aria-required="true">
  <input type="button" onclick="enviaMensagem()" value="Pressione aqui para enviar mensagem por whatsapp">
</form>
</div>

If I want to do the same with the form created in squarespace, there is no place when we create the form to set an id for each field. The only way to find out the name / id (some fields have id others only name), I have to request the page in the browser use the Developer tools to see the source and find out the name or id.

Following is the code I copied from a portion of the form related with the checkbox. As you can see they do not use id argument, and the name in all of the options is the same, so it is difficult in a javascript to find out which option were selected.

 <div class="option"><label><input type="checkbox" name="checkbox-6d194b33-6926-428e-855a-eb95df7046b3-field" value="Tahini 🌱 (Pasta de Sésamo) 300 Gms"/> Tahini 🌱 (Pasta de Sésamo) 300 Gms</label></div>
 <div class="option"><label><input type="checkbox" name="checkbox-6d194b33-6926-428e-855a-eb95df7046b3-field" value="Za'atar 150 Gms"/> Za'atar 150 Gms</label></div>
<div class="option"><label><input type="checkbox" name="checkbox-6d194b33-6926-428e-855a-eb95df7046b3-field" value="Cabaz Gourmet Mil e Uma Noites"/> Cabaz Gourmet Mil e Uma Noites</label></div>
<div class="option"><label><input type="checkbox" name="checkbox-6d194b33-6926-428e-855a-eb95df7046b3-field" value="Granola Max 500 Gms"/> Granola Max 500 Gms</label></div>
                

I found a way to do the code:

const checkboxes = document.getElementsByName('checkbox-6d194b33-6926-428e-855a-eb95df7046b3-field');
// loop through all the checkboxes and check if it's checked
for (let i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) { // if the checkbox is checked, log its value console.log(checkboxes[i].value); } }

But what I really would like is a way to set the names/id of the fields when I create the form in squarespace

 

Edited by HadiAlexandre
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.