We Keep Coding

work with button in form without submit form jsp

I am using two buttons in <form>. one for submit form and other for add categories to textfield.
<button id="catadd" class="btn-default" onclick="me()">+ Add Category</button>
<button name="submitcreate" id="submitcreate" type="submit" class="btn-default">
categories add to textfield using JavaScript. onclick="me()" for that.
but when i click on catadd button form submit too.
how stop it.

You need to set the type attribute to button
<form>
<button type="button">click me for some js logic</button>
<button>I am a submit by default !</button>
</form>

A button with no type attribute acts as type="submit", and will attempt to submit form data when clicked.
So, the simple solution of your query would be to specify the type of the "categories add" button like:
<button id="catadd" class="btn-default" onclick="me()">+ Add Category</button>
More details here: https://dev.to/clairecodes/why-its-important-to-give-your-html-button-a-type-58k9

Changing button attribute triggers my form submit?

I have a button that I want to dynamically change from a regular button to a form submission button.
I.e. I have my button start with type='button' to prevent it from submitting my form on the first click.
<button id="myButton" type="button">Button</button>
Then I bind a click event to my button, to change it to a submit type for the next click. For some reason, it's triggering the submit on the first click.
$('#myButton').click(function(){
$(this).prop('type', 'submit');
});
How can I achieve what I'm trying to do? I want my button to turn into a button which will submit my form on the second click, not the first.

You'll want to prevent the default click action from occurring on the first click, but allow the default click action to submit the form on the second click.
You can do this with jQuery's one()
$('#myButton').one('click', function(e) {
$(this).prop('type', 'submit');
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form onsubmit="alert('Form Submitted!');return false;">
<button id="myButton" type="button">
My Button
</button>
</form>

Code and style inline for demonstration purposes
This is by far the simplest and safest
<button type="button" onclick="$(this).hide(); $('#subbut').show()">Click</button>
<button id="subbut" type="Submit" style="display:none">Submit</button>

You need to remove the click event ,
try this:
$('#myButton').click(function(){
console.log('foo');
$(this).unbind();
$(this).prop('type', 'submit');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button id="myButton" type="button">Button</button>

Since the click event will still apply to your button, even as you change the type, you need to insert a small delay between it and the changing of the type. Try:
$('#myButton').click(function() {
setTimeout(function() {
$('#myButton').prop('type', 'submit')
}, 100)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<button id="myButton" type="button">Button</button>
</form>
You should see the first click don't submit the form but the second does.

How to combine two buttons into one?

I have following two buttons:
<button type="submit" id="gform_submit_button_1">Submit</button>
<button type="button" data-is_quote="1" data-button="simple_add_to_quote" data-product-type="simple" data-product-id="75448" id="add_to_quote">Submit</button>
the #gform_submit_button_1 button validates form entries before submitting data to the server
and the #add_to_quote button submits form data without validating it
I want to be able to validate the form & submit it using the #add_to_quote button. Any solution?

Trigger click event of gform_submit_button_1 button on click of add_to_quote.
$("#add_to_quote").click(function() {
$("#gform_submit_button_1").click();
});

I'm not sure that I get the problem right, but here is a possible solution :
Create a form element with an hidden input containing all the data-X values and a submit button that submits the form.
<form method="GET/POST" action="validation.php">
<input type="hidden" name="data-validation" data-is_quote="1" data-button="simple_add_to_quote" data-product-type="simple" data-product-id="75448" id="add_to_quote">
<input type="submit" value="submit" id="add_to_quote">
</form>
I hope it will help !

#Dhara Parmar solution is fine... but is missing the event.stopPropagation() and event.preventDefault() like this:
$("#add_to_quote").click(function() {
$(this).preventDefault(); //to stop submit
$(this).stopPropagation();//to avoid the event bubbling up to other submit buttons, if any...
$("#gform_submit_button_1").click();
});

you can call the validation and submit functions of the form directly from the type=button click handler to make it behave like a type=submit
$("#add_to_quote").click(function () {
if (!$("#TheForm").validate()) { //native validation triggered
return false;
} else {
$("#TheForm").submit()
}
});

Submit form with second submit button using jquery

I am having two submit button on a form named 'Save' and 'Delete'. Now I want to explicitly do submit with Delete button. How can I do it?
I have tried following:
$('#myForm').submit();
and
$('#myForm').bind('Delete').submit(); // Delete is value of delete submit button.
but it don't work for delete functionality. Pls help.

Something like this:
$('delete selector').bind('click', function() { $('#myForm').submit() });

Do you have to use jQuery? Can you not make the delete button a submit type?
<input type="submit" name="delete" value="delete"/>
Or:
<button type="submit" name="delete">Delete</button>

How can i submit and redirect a form using jquery

I want to submit and redirect a form using jquery.I have tried to do it but redirect does not works, here is my code. The problem is i have two submit buttons in my form and both are redirecting to other page when i set the action=".....php".But i do not want update cart button to redirect to any other page so i want to use jquery for submitting and redirecting form. Please give me some solution. Thanks...
<script type="text/javascript">
$(document).ready(function(){
$('#updateCart').click(function(){
$('#form1').submit();
window.location.href='Checkout.php';
});
});
</script>
<form name="form1" method="post" id="cartform" class="clearfix" action="#">
<input type="submit" id="updateCart" value="Update Cart" class="btn-txt" name="update" onclick="update_cart()">
<input type="submit" class="checkout-button btn" name="checkout" />
</form>

You should do e.preventDefault(); on the update cart button and then fire the function that updates the cart.
Something like this:
<script type="text/javascript">
$(document).ready(function(){
$('#updateCart').click(function(e){
e.preventDefault();
updateCart();
});
});
</script>
You wouldn't want to fire the form submission when the "update cart" button is pressed, only when the "checkout" button is pressed.

Your approach is OK but you need to decide which button is your official form "submit" button, and which is attached to a jQuery function to update the form before submitting.
I would recommend that you don't do any javascript for your main "Checkout" button as you will want this to go to a payment page where you capture payment details - i.e. the form will follow it's action="checkout.php".
For your "Update Cart" button follow APAD1's answer and adapt it to your needs. If you're going to be updating form fields you'll need to think about using JSON-encoded returned data...

You could just make it an html button that doesn't submit by setting it's type to "button" and then it will just run the javascript when clicked. Then you can put the action attribute back on your form and it will only submit for the checkout submit button.
<button type="button" id="updateCart" class="btn-txt" name="update" onclick="update_cart()">Update Cart</button>

add id or class in form tag
<form id="form1" ...>
change submit button to anchor
<a id="submitAnchor"> ... </a>
and in javascript submit the form and redirect the user as well
$("#submitAnchor").click(function(){
$(".form1").submit();
setTimeout(function() {
window.location = 'your URL';
}, 1000);
});