i want to close the modal after i click add button

Question

I want to close the modal after i click add button. the form in the modal is for uploading a data to database. the function for upload is working fine but i dont know how to close the modal after i click the add button. i am using daisyUI.

code:

<label htmlFor="add-doc" className="btn btn-sm btn-success ml-auto mb-3">
        Tambah Dokumen
      </label>
      <input type="checkbox" id="add-doc" className="modal-toggle" />
      <div className="modal">
        <div className="modal-box">
          <h3 className="font-bold text-lg mb-5">Tambah Dokumen</h3>
          <div className="form-control">
            <label className="input-group mb-5">
              <span>Nama Dokumen</span>
              <input
                type="text"
                placeholder="nama dokumen"
                className="input input-bordered"
                name="namaDoc"
                onChange={fieldHandler}
              />
            </label>
            <label className="input-group mb-3">
              <span>Lokasi Dokumen</span>
              <input
                type="text"
                placeholder="Lokasi dokumen"
                className="input input-bordered"
                name="lokasiDoc"
                onChange={fieldHandler}
              />
            </label>
            <label className="label">
              <span className="label-text">Masukkan foto ruangan lokasi</span>
            </label>

            <input
              type="file"
              className="file-input w-full max-w-xs"
              name="fotoLok"
              // onChange={fieldHandler}
            />
          </div>
          <div className="modal-action">
            <label htmlFor="add-doc" className="btn">
              Cancel{" "}
            </label>

            <label
              onClick={handleDocSubmit.bind(this)}
              htmlFor="add-doc"
              className="btn btn-success"
            >
              <button>Add</button>
            </label>
          </div>
        </div>
      </div>

if you handle the upload by clicking on the button instead of the label, the page should reload with the modal closed? — CM K, Jan 16 '23 at 08:10
you can place your labels and inputs in a `form` tag with the `method` attribute set to `POST`. Since your button is of type `submit` the page should reload. If you are doing this asynchronously then you can use some JS to programmatically close the modal — CM K, Jan 16 '23 at 14:17
Do i need to wrap each of labels or just wrap the labels from top to bottom? — Muhammad Yafi A, Jan 18 '23 at 17:50
thank you very much for the answer, this basic thing driving me crazy — Muhammad Yafi A, Jan 20 '23 at 05:59

CM K · Accepted Answer · 2023-01-20T07:05:52.217

It's a good practice to wrap your input elements in a form tag not just because of semantic purposes, but also some added functionality. Also, it's not necessary to wrap your submit button in a label. Since you are sending data to a server, the POST HTTP request method should be used.

<label htmlFor="add-doc" className="btn btn-sm btn-success ml-auto mb-3"> Tambah Dokumen </label>
<input type="checkbox" id="add-doc" className="modal-toggle" />
<div className="modal">
    <form method="POST">
        <div className="modal-box">
            <h3 className="font-bold text-lg mb-5">Tambah Dokumen</h3>
            <div className="form-control">
                <label className="input-group mb-5">
                    <span>Nama Dokumen</span>
                    <input
                        type="text"
                        placeholder="nama dokumen"
                        className="input input-bordered"
                        name="namaDoc"
                        onChange="{fieldHandler}"
                    />
                </label>
                <label className="input-group mb-3">
                    <span>Lokasi Dokumen</span>
                    <input
                        type="text"
                        placeholder="Lokasi dokumen"
                        className="input input-bordered"
                        name="lokasiDoc"
                        onChange="{fieldHandler}"
                    />
                </label>
                <label className="label">
                    <span className="label-text">Masukkan foto ruangan lokasi</span>
                </label>
                <input type="file" className="file-input w-full max-w-xs" name="fotoLok" //
                onChange={fieldHandler} />
            </div>
            <div className="modal-action">
                <label htmlFor="add-doc" className="btn"> Cancel{" "} </label>
                <label htmlFor="add-doc" className="btn btn-success">
                    <button onClick="{handleDocSubmit.bind(this)}">Add</button>
                </label>
            </div>
        </div>
    </form>
</div>

i want to close the modal after i click add button

1 Answers1