So I create my element via JavaScript. The element which I want to get by Id is created on the select with Id of "categorias". The options are also populated via JavaScript with a small formula called agregarOpciones which brings the data from the backend. The backend is written in Google Apps Script. After that formula runs the values of the select are populated, however. When i want to sumbit, I can get the value of all the inputs, except for that select input.
if(act == "Ingresar"){
var formShade = document.getElementById("form-shade");
formShade.style.display = "flex";
var form = document.createElement("FORM");
form.setAttribute("id", "removeme")
form.setAttribute('class','form-container-1')
form.innerHTML=`
<button id="Close">X</button>
<input id='articulo' placeholder='Nombre del Articulo' type='text'></input>
<!--This is the select that is giving me problems-->
<!---->
<select id='categorias'>
<!---->
<!---->
<option id="removeme2"value='test'>Loading Options</option>
</select>
<input id='cantidad' type='number'></input>
<button id='submit'>submit</button>
`
formShade.appendChild(form);
google.script.run.withSuccessHandler(agregarOpciones).GetOptions(act)
document.getElementById("submit").addEventListener("click", function(){
event.preventDefault();
save(object, act)
});
document.getElementById("Close").addEventListener("click", function(){
event.preventDefault();
close()
});
}
In the next snippet you will see the backend formulas, However It's important to note that several important objects which are not going to be defined in the code, given that It's part of the framework I'm building and would take a long time to explain.
object: this is what stores the values being passed from the frontend to the backend and vice versa.
var object ={ Articulo:'', Caterogias:'', Marca:'', Cantidad: '', Disponible:'', Usuarios:'', EnMantenimiento:'', CantidadenUso:'', }
act: It's the type of action the client wants to perform to the database. In this case, the action type "Ingresar" is the one creating the form which is seen in the comments.
Additionally, after that on the event listeners there are two formulas, one is close, this one only removes the form, from the html document. Then there is save, that this is the important one. This function sends data to the backend. Which you will see in the next snippet
function SendAction(action, object){
var arrayofArrays = [[object.Articulo, object.Categoria, object.Marca, object.Cantidad, object.Disponible, object.Usuarios, object.EnMantenimiento, object.CantidadEnUso]];
if(action == "Ingresar"){
bd.Inv.insertRowBefore(2)
//Ver la forma de cambar ese 8 a la cantidad de elementos que hay en el header
bd.Inv.getRange(2, 2, 1, 8).setValues(arrayofArrays)
/*/------
This is the auto increment of this loop, Since we need to take the value of the previos i to increment it by 1, we get the cell of the previous record, and then increment it by 1 therefore, increasing the value of the Id in order to asign it to the previous record
--------/*/
var iAnterior = bd.Inv.getRange(3,1).getValue()
bd.Inv.getRange(2,1).setValue(iAnterior+1);
}
This is how the data is sent into the database, which is a google SpreadSheetApp. There the values are passed through the object which then is expanded in the array of arrays in order to put it in format which a Spreadsheet would accept, the problem lies here, all the values of the object are working except for object.Marca which is not being entered into the database.
After countless attempts I realized that the reason the data wasn't being written was because I can't select the value of the select, I mentioned earlier. For this it's important to look at the save function I mentioned earlier.
function save(object, act){
if(act == "Ingresar"){
object.Articulo = document.getElementById("articulo").value;
object.Caterogias = document.getElementById("categorias").value;
object.Cantidad = document.getElementById("cantidad").value;
handleAction(act, true, object);
let node = document.getElementById("removeme");
if (node.parentNode) {
node.parentNode.removeChild(node);
}
}
This function is incharge of getting the values of the form, however, as you may see the object.Categorias does have the correct script in order for it to get the value of the select element. I ran several tests, in which I would be able to get the element only after having clicked on the element and selected inspect element and then running that exact same line of code and having it work
Images:
Not writing the value of object.Marca
Result null when getting element by Id
