Home > Software design >  How can I skip one input type from being included in a serializedArray() Function?
How can I skip one input type from being included in a serializedArray() Function?

Time:09-12

I want to skip a particular input type (responsible for my row ID for editing). However, in the code below, the first console.log(formObject.rowId) returns a value, while after the serializedArray() the second console.log(formObject.rowId) returns an undefined.

function handleFormSubmit(formObject) {
console.log(formObject.rowId)
            var formObject = $("#myForm :input[value!='']").serializeArray()
            formObject.push({
              name: 'myfile',
              value: myfile
            })
console.log(formObject.rowId)
google.script.run.withSuccessHandler(createTable).processForm(formObject);
setTimeout(function() {$('#myModal').modal('hide');}, 3000);
document.getElementById("message").innerHTML = "<div class='alert alert-warning' role='alert'>Data added/updated successfully.</div>";
document.getElementById("myForm").reset();
}

Heres the HTML Element for the input type that I want to skip:

 <input type="text" id="rowId" name="rowId" value="" style="display: none">

CodePudding user response:

serializeArray ignores fields that don't have a name:

console.log($("#the-form").serializeArray());
<form id="the-form">
    <input type="text" name="x">
    <input type="text" id="rowId" value="" style="display: none">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Notice how only the name="x" was included, not the other input.

CodePudding user response:

Maybe using the :not pseudo selector (or JQuery .not) is viable?

Furthermore: the selector #myForm :input[value!=''] seems not to work. Using $(":input[value!='']") does - see snippet.

console.log(`all input except #rowId => [${
  [...document.querySelectorAll("input:not(#rowId)")]
    .map(v => `input#${v.id}`)}]`);

console.log(`all input except display:none => [${
  [...document.querySelectorAll("input:not([style*='display:none'])")]
    .map(v => `input#${v.id}`)}]`);

console.log(`all input except #rowId JQuery: [${
  $.map($(":input[value!='']").not(`#rowId`), v => `input#${v.id}`)}]`);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm ">
  <input type="text" id="somerowid1" value="row1">
  <input type="text" id="rowId" ame="rowId" style="display:none">
  <input type="text" id="somerowid2" value="row2">
</form>

  • Related