We Keep Coding

Form with two buttons

I am trying to create multiple forms which have two buttons, each will submit the form to different script, one via ajax and second one will just submit the form.
<?php foreach($objects as $object) : ?>
<div class="card-body">
<form id="edit-form" action="#" method="POST">
<input name="subject" value="<?=$object['subject']?>" type="text" id="title" class="input-xxlarge">
<textarea id="content" name="content" rows="25"><?=$object['content']?></textarea>
<button type="button" id="send-button" class="btn btn-primary">Send</button>
<input type="submit" id="submit-button" value="Submit"/>
</form>
</div>
<?php endforeach; ?>
First I am trying to get the current form, but I have problem with that. console.log shows something only on the first form, if I click on the buttons from other forms then It will do nothing.
$('#send-button').on('click', function(e) {
e.defaultPrevented;
$form = $(this);
$url = $form.attr('action');
$data = $form.serialize(); console.log($form);
console.log($url);
});
Is it because my button has same ID for every form ?

You shouln't use ID's multiple times on the same page. Try to use a class for that case. Also as stated in the comments use e.preventDefault(); to stop the event.
$(this) will result in the #send-button beeing targeted. To access the form you need to find the closest form element like this:
$form = $(this).closest('form');

html:
<form method="POST" action="#">
<input type="text">
<button type="button">send</button>
<input type="submit" value="submit" />
</form>
<form method="POST" action="#">
<input type="text">
<button type="button">send</button>
<input type="submit" value="submit" />
</form>
js:
$("form").each(function() {
var form = this;
$(form).find('button').on('click', function(e) {
e.preventDefault();
console.log(form);
console.log(this);
})
});
this will add events on every form you have on your page, button will submit form via script and submit will just submit it. also here's a fiddle to play with

Simple form submit doesn't work

Hi have very simple html with form, but submitting doesn't work.
I checked multiple solutions I found on stackoverflow, but still doesn't work.
<form class="form-horizontal well" method="post" id="upload_excel" name="upload_excel" enctype="multipart/form-data">
<fieldset>
<div class="control-group">
<div class="control-label">
<label>Excel File:</label>
</div>
<div class="controls">
<input type="file" name="file" id="file" class="input-large">
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" id="btn" name="Import" class="btn btn-primary button-loading" data-loading-text="Loading...">Upload</input>
</div>
</div>
</fieldset>
And JavaScript in the same file:
<script type="text/javascript" language="javascript" >
$(document).ready(function (e) {
$('#btn').on('submit',(function(e) {
alert('test');
}));
});
</script>
When I click on btn shouldn't the form be submitted and alert window occurs?

Try putting the on submit function on the form instead of on the button.
<script type="text/javascript" language="javascript" >
$(document).ready(function (e) {
$('#upload_excel').on('submit',(function(e) {
alert('test');
}));
});
</script>

What about the "action" attribute for the "form" element?

Basiclally you have to submit form so you should have the id of form in the onsubmit block and not input submit button.
<script type="text/javascript" language="javascript" >
$(document).ready(function (e) {
$('#upload_excel').on('submit',(function(e) {
alert('test');
}));
});
</script>
And Yes You Need to have the action attribute to make a post or get request to the server
Hope This Helps.

You have bad Jquery selector for .on('submit')
You can also use e.preventDefault() to prevent the form from actually being submitted.
Moreover, the <input> tag has no </input> closing tag, use value="Upload" instead for a submit or a button
$(document).ready(function (e) {
$('#upload_excel').on('submit',(function(e) {
e.preventDefault();
alert('test');
}));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal well" method="post" id="upload_excel" name="upload_excel" enctype="multipart/form-data">
<fieldset>
<div class="control-group">
<div class="control-label">
<label>Excel File:</label>
</div>
<div class="controls">
<input type="file" name="file" id="file" class="input-large">
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" id="btn" name="Import" class="btn btn-primary button-loading" data-loading-text="Loading..." value="Upload"/>
</div>
</div>
</fieldset>

You haven't defined the "action" parameter in tag. So, when you press Submit, you fire a POST call without having specified the URL to be called.
A simple example is:
<form enctype="multipart/form-data" action="__URL__" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="30000" />
Send this file: <input name="userfile" type="file" />
<input type="submit" value="Send File" />
</form>
Where URL is a page PHP or whatever else you have exposed for receiving this call. Another example is here.

First of all I alert a message showing that the submit button is pressed, using this instruction:
$('#btn').on('click',(function(e) {alert("Submitted");}));
After that I'm ensuring that the form is submitted using the jQuery
function .submit():
$( "#upload_excel" ).submit();
Finally, here is the entire script:
<script type="text/javascript" language="javascript" >
$(document).ready(function (e) {
$('#btn').on('click',(function(e) {
alert("Submitted");
$( "#upload_excel" ).submit();
}));
});
</script>
My answer is based on the jQuery documentation, & a Stackoverflow answer.

Duplicated form disapearing after a second

How do I keep my duplicated forms from disapearing whenever I press the "Duplicate Form" button? The duplicated form appears for about one second then instantly disapears, how do I prevent this?
Javascript
function myFunction() {
var elmnt = document.getElementById("formid");
var cln = elmnt.cloneNode(true);
document.body.appendChild(cln);
}
HTML
<form action="dilemman.php" method="post" class="copy" id="formid" enctype="multipart/form-data">
Video: <br>
<textarea type="text" rows="1" cols="40" name="videolank"></textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Lägg till fler svar</button>
</div>
<button onclick="myFunction()">Duplicate form</button>
</form>

form will submit by default ,to disable the default action use preventDefault()
<button onclick="myFunction(e)">Duplicate form</button>
function myFunction(e) {
e.preventDefault();
... rest of code
}

Try moving the cloning button outside of your form, I'm suspecting that it triggers the submit action because the button is part of your form.
Also remember to change the ID of any new forms, as duplicate IDs will break code. I suggest adding a counter and adding this to the ID of the form every time.
<form action="dilemman.php" method="post" class="copy" id="formid" enctype="multipart/form-data">
Video: <br>
<textarea type="text" rows="1" cols="40" name="videolank"></textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<button class="add_field_button">Lägg till fler svar</button>
</div>
</form>
<button onclick="myFunction()">Duplicate form</button>
and
var count = 0;
function myFunction() {
var elmnt = document.getElementById("formid");
var cln = elmnt.cloneNode(true);
cln.id = "formid"+(++count); //add 1 to count, then append
document.body.appendChild(cln);
}

Testing a simple javascript button

Hello gentlemen and ladies. I'm trying to test the button to see if it binds to event but it's not working. I have been at this for hours and couldn't find the answer.I'm looking for code that separates the HTML and javsScript. I'm new and I really appreciate your time. I can't get the alert to work when I click button.
var formId;
formId = document.GetElementById("button");
function run(){
alert("Stack overflow");
}
formId.addEventListener("submit", run, false);
<div id ="content">
<div id ="title">Special Offers</div>
<div id="colors">Sign-up to receive personalized offers!
</div>
<fieldset>
<legend> Please enter your information</legend>
<form action="#" method="post" />
<input type="text" />
<label for ="button">add</label>
</form>
</fieldset>
<!--**************Button******-->
<button type="submit" id="button">submit</button>
</div>

Try ...
var formId = document.getElementById("button");
function run(){
alert("Stack overflow");
}
formId.addEventListener("click", run, false);
Where I am using .getElementById (spelling) and the click event on the Listener.
Fiddle: http://jsfiddle.net/rfornal/9duqfgL6/

You could use the following code:
<div id ="content">
<div id ="title">Special Offers
</div>
<div id="colors">Sign-up to receive personalize offers!
</div>
<button type="submit" id="button" onclick="run()">submit</button>
</div>
and your JS should be as follows:
function run(){
alert("stack overflow");
}

Your form tag was self closing. It should be getElementById. Try the click event instead of the submit event.
Your button is outside the form. When you have your button inside it, you can add the submit event listener to your form.
var formId = document.getElementById("button");
function run(){
alert("Stack Overflow");
}
formId.addEventListener("click", run, false);
<div id ="content">
<div id ="title">Special Offers</div>
<div id="colors">Sign-up to receive personalized offers!</div>
<fieldset>
<legend> Please enter your information</legend>
<form action="#" method="post">
<input type="text"/>
<label for="button">add</label>
<button type="submit" id="button">submit</button>
</form>
</fieldset>
</div>

Jquery .click() not working multiple button

I want show alertbox on click button but more of button the some ID attr and work click on first button but not working click on second button.
Jquery;
jQuery("#submit").click(function(e){
alert("message");
});
HTML; (Repeat html per message)
<div class="reply">
<form id="vivam" method="post" onsubmit="return false;">
<textarea name="reply" placeholder="Write reply here"></textarea>
<p class="stdformbutton">
<button id="submit" class="btn btn-primary">Reply</button>
</p>
</form>
</div>
jsfiddle Link
What is the solution to this problem? Thank you in advance for answers.

Approach 1: IDs should be unique, use class instead of id.
HTML:
<div class="reply">
<form id="vivam" method="post" onsubmit="return false;">
<textarea name="reply" placeholder="Write reply here"></textarea>
<p class="stdformbutton">
<button class="btn btn-primary submit">Reply</button>
</p>
</form>
</div>
JS:
jQuery(".submit").click(function(e){
alert("message");
});
Working Demo Approach 1
Approach 2: You can also use attribute value selector to target element with same id. However this breaks the rule ids should be unique.and i do not recommend you using this:
jQuery("[id=submit]").on('click',function(e){
e.preventDefault();
alert("test");
});
Working Demo Approach 2

ID Must be unique .
Handler get attached to the first element with the id only.
Use class instead of id .
Fiddle Demo
Change HTML
<button class="btn btn-primary submit">Reply</button>
// ^ add class submit and remove id submit

Make it
jQuery(".submitbuttons").click(function(e){
and then
<button id="submit" class="btn btn-primary submitbuttons">Reply</button>
and please give unique ids and I recommend to set the button-type attribute (button or submit)

You can use the on listener in JQuery. That way you listen on an class, and then do something with the id...
Here's an JSFiddle of the working code...
The HTML ( note that i've changed the ID's because ID's need to be unique, and add the class to the buttons ):
<div class="reply">
<form id="vivam_1" method="post" onsubmit="return false;">
<textarea name="reply" placeholder="Write reply here"></textarea>
<p class="stdformbutton">
<button id="button_1" class="btn btn-primary submit">Reply</button>
</p>
</form>
</div>
<div class="reply">
<form id="vivam_2" method="post" onsubmit="return false;">
<textarea name="reply" placeholder="Write reply here"></textarea>
<p class="stdformbutton">
<button id="button_2" class="btn btn-primary submit">Reply</button>
</p>
</form>
</div>
And the JQuery part:
$('body').on('click', '.submit', function () {
e.preventDefault();
alert("Clicked on button " + $(this).attr('id'));
});