通过 $.post() 发布输入，没有<form>目的

Question

I need to implement form within the form - to have an option of posting to the server only 2 inputs from the form. I thought the solution will be to send them over $.post() method but I don't know how to prepare request correctly.

html:

<form>
  <input type="text" id="1">
  <input type="text" id="2">
  <div>
    <input type="text" id="3">
    <input type="text" id="4">
    <button type="submit" id="part_submit">
      Parially submit
    </button>
  </div>
  <input type="text" id="5">
  <button type="submit" id="submit">
    Submit
  </button>
</form>

js:

$("#part_submit").on("click", (e) => {
    e.preventDefault();
    let value1 = $("#3").val();
  let value2 = $("#4").val();
  let data = {"value1" : value1, "value2": value2};
  let sdata = data.serialize();
  $.post("my_server_url", sdata, function(data){
    console.log(data);
  });
})

result: TypeError: data.serialize is not a function"

I realize that usually if I would like to post a form I would have to do: $(form).serialize() and that would work but I cannot nest form into form. So how to do this?

Answer 1

I need to implement form within the form - to have an option of posting to the server only 2 inputs from the form. I thought the solution will be to send them over $.post() method but I don't know how to prepare request correctly.

html:

<form>
  <input type="text" id="1">
  <input type="text" id="2">
  <div>
    <input type="text" id="3">
    <input type="text" id="4">
    <button type="submit" id="part_submit">
      Parially submit
    </button>
  </div>
  <input type="text" id="5">
  <button type="submit" id="submit">
    Submit
  </button>
</form>

js:

$("#part_submit").on("click", (e) => {
    e.preventDefault();
    let value1 = $("#3").val();
  let value2 = $("#4").val();
  let data = {"value1" : value1, "value2": value2};
  let sdata = data.serialize();
  $.post("my_server_url", sdata, function(data){
    console.log(data);
  });
})

result: TypeError: data.serialize is not a function"

I realize that usually if I would like to post a form I would have to do: $(form).serialize() and that would work but I cannot nest form into form. So how to do this?