What's the standard way to insert html text inputs to sqlite db?

[LeafWarrior]

Hi guys. I've been trying to solve this for a while but to no avail. I feel like this is basic.

I have a program that allows users enter customer details (name, phone number, address) and add them to the database. They can enter up to 5. So they may choose to enter 1 and leave the other 4 blank if they wish. They can also choose to leave address or phone number blank just as long as there's a name.

My solution is to pass the user inputs from javascript to rust and have rust enter them in the database through a function. But it seems like I can't pass the data.

FYI: I haven't worked on the inserting to the database aspect yet. I'm trying to pass the user inputs to rust. Should I use Vector? I tried with a dummy 2D array and it won't pass the data.

Frontend: Javascript
Backend: Rust
Database: Sqlite

//HTML:

`




    <p id="errorMessage">!! Please don't leave <b>Name</b> blank if you entered other details for that customer. Otherwise, please leave other details for that customer blank.</p>
    <table class="addcxTable">
      <tr>
        <th style="background-color: transparent;">&nbsp;</th>
        <th class="cxTopLegend">Name</th>
        <th class="cxTopLegend">Address</th>
        <th class="cxTopLegend">Phone Number</th>
      </tr>
      <tr>
        <th class="cxLeftLegend">Customer 1:</th>
        <td class="cxnamecont"><input type="text" class="cxname addcx1"/></td>
        <td><input type="text" class="cxaddress addcx1"/></td>
        <td><input type="number" class="pnum addcx1" onkeydown="javascript: return ['Backspace','Delete','ArrowLeft','ArrowRight'].includes(event.code) ? true : !isNaN(Number(event.key)) && event.code!=='Space'"></td>
      </tr>
      <tr>
        <th class="cxLeftLegend">Customer 2:</th> 
        <td class="cxnamecont"><input type="text" class="cxname addcx2"/></td>
        <td><input type="text" class="cxaddress addcx2"/></td>
        <td><input type="number" class="pnum addcx2" onkeydown="javascript: return ['Backspace','Delete','ArrowLeft','ArrowRight'].includes(event.code) ? true : !isNaN(Number(event.key)) && event.code!=='Space'"/></td>
      </tr>
      <tr>
        <th class="cxLeftLegend">Customer 3:</th>
        <td class="cxnamecont"><input type="text" class="cxname addcx3"/></td>
        <td><input type="text" class="cxaddress addcx3"/></td>
        <td><input type="number" class="pnum addcx3" onkeydown="javascript: return ['Backspace','Delete','ArrowLeft','ArrowRight'].includes(event.code) ? true : !isNaN(Number(event.key)) && event.code!=='Space'"/></td>
      </tr>
      <tr>
        <th class="cxLeftLegend">Customer 4:</th>
        <td class="cxnamecont"><input type="text" class="cxname addcx4"/></td>
        <td><input type="text" class="cxaddress addcx4"/></td>
        <td><input type="number" class="pnum addcx4" onkeydown="javascript: return ['Backspace','Delete','ArrowLeft','ArrowRight'].includes(event.code) ? true : !isNaN(Number(event.key)) && event.code!=='Space'"/></td>
      </tr>
      <tr>
        <th class="cxLeftLegend">Customer 5:</th>
        <td class="cxnamecont"><input type="text" class="cxname addcx5"/></td>
        <td><input type="text" class="cxaddress addcx5"/></td>
        <td><input type="number" class="pnum addcx5" onkeydown="javascript: return ['Backspace','Delete','ArrowLeft','ArrowRight'].includes(event.code) ? true : !isNaN(Number(event.key)) && event.code!=='Space'"/></td>
      </tr>
    </table>

    <br/><br/>

    <div class="middleBottom" class="addCxButtonCont">
      <button type="submit" class="disableSubmit" id="addCxButton">Submit</button>
    </div>

  </div>
</form>`

//Javascript:

<code>
window.addEventListener("DOMContentLoaded", () => {
 document.querySelector("#addcxform").addEventListener("submit", (e) => {
    e.preventDefault();
    alert("Adding Customers....")
    const filteredCx = cxcombined.filter(removeEmpty)

    addCxDB(filteredCx);

    
    function removeEmpty(cx){
      return cx[0].value.trim() != "";
    }
  });
});

async function addCxDB(addCx) {
  let testIfItWorks = await invoke("addcust", { customer: addCx});
  alert(testIfItWorks )
}
</code>

//Rust:

<code>
// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
#[tauri::command]
fn addcust(mut customer: Vec<u64>) -> String {
    format!("Success! You just added these customers to the database!!")
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_opener::init())
        .invoke_handler(tauri::generate_handler![addcust])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}
</code>

[gsnoopy]

did you try to send and receive the data as json object ?