cloudinary widget submitting before selecting photo

I have a form, where the users product data will be predefined based on the product information they have entered before -- I basically want to allow them to edit there products.

On my edit-products page, I cannot seem to select an image to upload for wloudinary using there widget, it acts like a submit button and just submits when I click upload, without even letting me add an image.

here's my form:

 <form method="GET" action="/submitEdit" style="border: 2px solid black">            <h1>Edit a product</h1>            <input type="hidden" id="ogItem" name="ogItem" value="<%= itemName %>" style="border: 1px solid black" >          </script>      <fieldset>        <legend><a href="/help-center"><span class="number">?</a></span>Enter The Following Details</legend>        <label for="productName">Product Name:</label>        <input type="text" id="item" name="item" placeholder="<%= itemName %>" value="<%= itemName %>" style="border: 1px solid black" required>                <label for="productPrice">Price:</label>        <input type="text" id="price" name="price" placeholder="<%= itemPrice %>" value="<%= itemPrice %>" style="border: 1px solid black" required>          <!-- <label for="productCategory">Category:</label>        <input type="text" id="category" name="category" placeholder="Socks" style="border: 1px solid black"equired> -->                  <input type="text" id="size[]" name="size[]" placeholder="CURRENT SIZES: <%= itemSize %>" value="<%= itemSize %>" style="border: 1px solid black" readonly>          <label for="productSizes">SIZES (OPTIONAL):</label>          <label for="check-1">Extra Small</label>          <input type="checkbox" name="size[]" id="extra-small" value="xs">          <label for="check-1">Small</label>          <input type="checkbox" name="size[]" id="small" value="small">          <label for="check-1">Medium</label>          <input type="checkbox" name="size[]" id="medium" value="medium">          <label for="check-1">Large</label>          <input type="checkbox" name="size[]" id="large" value="large">          <label for="check-1">Extra Large</label>          <input type="checkbox" name="size[]" id="extra-large" value="xl">                 <!-- submit image -->            <button id="upload_widget" class="cloudinary-button">Upload Product Image</button>                      <!-- The Modal -->          <div id="myModal" class="modal">            <span class="close">×</span>            <img class="modal-content" id="img01">            <div id="caption"></div>          </div>                      <script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>              <script type="text/javascript">            var myWidget = cloudinary.createUploadWidget({            cloudName: 'piersolutions',             uploadPreset: 'ld3l7evv'}, (error, result) => {               if (!error && result && result.event === "success") {                 console.log('Done! Here is the image info: ', result.info);                 console.log(result.info.secure_url)                var result_url = result.info.secure_url;                console.log("result url is " + result_url)                document.getElementById("url").value = result_url;              }            }          )            document.getElementById("upload_widget").addEventListener("click", function(){            myWidget.open();              }, false);          </script>            <!-- submit image end -->          <input type="text" name="url" id="url" value="<%= ogImgUrl %>" readonly>          <input id="myImg" type="button" src="<%= ogImgUrl %>" alt="ORIGINAL PRODUCT IMAGE" value="See Current Image" width="300" height="200">          <img src="https://img.icons8.com/material-sharp/24/000000/visible.png"/>                 </fieldset>      <fieldset>        <label for="bio">Description:</label>        <textarea id="bio" name="description" placeholder="" value="<%= itemDesc %>" style="border: 1px solid black"><%= itemDesc %></textarea>      </fieldset>      <button id="submitButton" type="submit">Submit</button>    </form>          <!-- help box on right -->    <br style="margin-top: 20px;">    <form class="form2" action="/" method="post" style="border: 2px solid black;">      <fieldset>                  <h3 style="margin-top: 50px;">More Information!</h3>          <h5>For more information on how to edit a product on your webiste, you can check out our help form <a href="/helpAddpProducts" style="color: #000; font-size: 15px;">HERE</a>!You can also send us an email, or call us for more help! Find contact information on our contact info page <a style="color: #000; font-size: 15px;" href="/contactInfo">HERE!</a> </h5>               </form>  

it is really strange, and it frustrating because people who are using the dashboard I have are not able to edit there products. please help!!! Thanks in advance :)

https://stackoverflow.com/questions/65802503/cloudinary-widget-submitting-before-selecting-photo January 20, 2021 at 11:04AM