You have a JavaScript function SubmitClickHandle() that performs the form submission. If you use type="submit", then the form also submits using the default method, which reloads the page and cancels the SubmitClickHandle() code.

You should use type="button" when you’ve provided your own JavaScript to submit the form, and you don’t need the default submission.

If you want to use type="submit", the onclick code should end with return false to prevent the default action:

<button type="submit" onclick="SubmitClickHandle(); return false">

Submit buttons trigger the submission of a form (and when they do, their name and value are included in the submitted form data).

Button buttons don’t.

When I use type=”button” then it submits successfully but type=”Submit” does not? why is that?

Presumably, because your idea of “submits successfully” doesn’t involve performing a normal form submission but instead means “Executes the SubmitClickHandle() function without leaving the page”.

Type="Submit" and type="Button" in element input. How are they different? When I use type="button" then it submits successfully but type="Submit" does not? why is that?

 <form class="crush-form">
    <div>
        <input class="name" type="text" name="name" required />
        <label for="">Name</label>
    </div>
    <div>
        <input class="address" type="text" name="address" required />
        <label for="">Address</label>
    </div>
    <div class="lol">
        <input
            type="submit"
            onclick="SubmitClickHandle()"
            name="huhu"
            value="ggg"
        />
        <button onclick="closeDialog()">Close Dialog</button>
    </div>
</form>