Develop Reference

How to create an Button with JS and use the OnClick Attribute [duplicate]

This question already has answers here:
How can I prevent refresh of page when button inside form is clicked?
(16 answers)
Closed 3 years ago.
I want to use a button with OnClick that I created with JS.
I can create the button and I also get the attribute on to the Button but the Button doesn't start my function he only reset the Website.
$.ajax({
type: "POST",
url: "http://localhost/jQuery&PHPnew/Markt.N.php",
data:{status:status},
success: function(data){
var anzahl = data;
status = 1;
while (anzahl>nummer) {
nummer++;
$.ajax({
type: "POST",
url: "http://localhost/jQuery&PHPnew/Markt.N.php",
data:{nummer:nummer, status:status},
success: function(data){
var Daten = JSON.parse(data);
var Ausgabebereich = document.getElementById('main');
var f = document.createElement("form");
var bInhalt = document.createElement('button');
var Inhalt = document.createTextNode("Senden");
bInhalt.appendChild(Inhalt);
bInhalt.setAttribute("onclick", "myfunction()");
f.appendChild(bInhalt);
Ausgabebereich.appendChild(f);
}
})
}
}
})
function myfunction() {
alert("pls");
}
This is the code created in the browser
Code from the Browser

On your myfunction() add the line preventDefault() before the alert, to prevent the page to be reloaded (the default behavior of the submit - as your button is on a form), then your alert will work.
Otherwise you could add the button type on your button, as <button type="button"> to make sure the form won't make it a submit button

javascript not posting form with ajax [duplicate]

This question already has answers here:
Duplicate form submission whtn button clicked?
(2 answers)
Closed 5 years ago.
I have a javascript to post a form using ajax but it keeps giving me an error. It is triggered from a bootstrap button but does not seem to do anything?
The button is :
<button id='btn-finish' name ='btn-finish' type='button' class='btn btn-primary'>Finish</button>
and the js is :-
$(document).ready(function() {
$('#btn-finish').on('click', function() {
// Add text 'loading...' right after clicking on the submit button.
$('.output_message').text('Processing...');
var form = $(this);
$.ajax({
url: form.attr('process-form3.php'),
method: form.attr('method'),
data: form.serialize(),
success: function(result){
if (result == 'success'){
$('.output_message').text('Message Sent!');
} else {
$('.output_message').text('Error Sending email!');
// $('#5box').hide();
}
}
});
// Prevents default submission of the form after clicking on the submit button.
return false;
});
});

You must have to get Form id not a button Id, you have written code for getting button id instead of form object.
code should be like for example:
<form id='test_form' action='path' method='post'>
<button id='btn-finish' name ='btn-finish' type='button' class='btn btn-primary'>Finish</button>
</form>
your jquery code :
$(document).ready(function() {
$('#btn-finish').on('click', function() {
// Add text 'loading...' right after clicking on the submit button.
$('.output_message').text('Processing...');
var form = $('#test_form');
$.ajax({
url: form.attr('action'),
method: form.attr('method'),
data: form.serialize(),
success: function(result){
if (result == 'success'){
$('.output_message').text('Message Sent!');
} else {
$('.output_message').text('Error Sending email!');
// $('#5box').hide();
}
}
});
// Prevents default submission of the form after clicking on the submit button.
return false;
});
});

Add clear form and hide div when button clicked

I have had this issue before but people keep getting my question misunderstood. I will try again. I have a bootstrat button that when clicked javascript sends the form using ajax. It works fine but I cannot add anything to clear the form and then hide the div. I have code that does work but it sends the form twice for some reason(not included but can if you wish)? Sorry to repost similar question but people keep giving me the same code that simply does not work. I think it has something to do with it being a button type?
The JS code is :
$(document).ready(function() {
$('#btn-finish').on('click', function() {
// Add text 'loading...' right after clicking on the submit button.
$('.output_message').text('Processing...');
var form = $(this);
$.ajax({
url: form.attr('action'),
method: form.attr('method'),
data: form.serialize(),
success: function(result){
if (result == 'success'){
$('.output_message').text('Message Sent!');
} else {
$('.output_message').text('Error Sending email!');
}
}
});
// Prevent default submission of the form after clicking on the submit button.
return false;
});
});
And the button is :
<button name ='send' value="Send" type='submit' class='btn btn-primary'>Finish</button>

Here is a reset form script from w3schools.com that should work
$(document).ready(function() {
$('#btn-finish').on('click', function() {
// Add text 'loading...' right after clicking on the submit button.
$('.output_message').text('Processing...');
var form = $(this);
$.ajax({
url: form.attr('action'),
method: form.attr('method'),
data: form.serialize(),
success: function(result){
if (result == 'success'){
document.getElementById(form.attr('id')).reset();
document.getElementById(form.attr('id')).style.display="none";
$('.output_message').text('Message Sent!');
} else {
$('.output_message').text('Error Sending email!');
}
}
});
// Prevent default submission of the form after clicking on the submit button.
return false;
});
});

Here's the code that works making fake AJAX request. It replaces output_message with Processing... and replaces with Message Sent! once complete.
$(document).ready(function() {
$('#btn-finish').on('click', function(event) {
event.preventDefault();
// Add text 'loading...' right after clicking on the submit button.
$('.output_message').text('Processing...');
var form = $(this);
setTimeout(function() {
console.log("fake ajax");
$('.output_message').text('Message Sent!');
// This will clear out form field values.
// resetForm($('#myform')); // by id, recommended
// This will hide your element
// $('#myform').hide();
}, 5000);
});
});
function resetForm($form) {
$form.find('input:text, input:password, input:file, select, textarea').val('');
$form.find('input:radio, input:checkbox')
.removeAttr('checked').removeAttr('selected');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn-finish" name='send' value="Send" type='submit' class='btn btn-primary'>Finish</button>
<div class="output_message"></div>

success: function(result){
if (result == 'success'){
$('.output_message').text('Message Sent!');
//code to clear form and hide div comes here
$("#divid").hide();
} else {
$('.output_message').text('Error Sending email!');
}
},
complete: function(){
//code to clear form and hide div comes here
$("#divid").hide();
}
try placing the code to hide and clear the form as mentioned above in success. If ajax response is success or error, by default if you want to hide then use the code in complete function as above.Post your comments.

submit multiple forms using JQuery ajax [duplicate]

This question already has answers here:
jQuery Multiple Forms Submit
(2 answers)
Closed 8 years ago.
I have this code to submit 1 form on click.
$('#verify_id').click(function() {
var formData = new FormData($('form#verify_id_form')[0]);
$.ajax({
type: 'post',
url: '/public_transaction/verify_id',
data: formData,
async: false,
success: function (res) {
alert(res);
},
cache: false,
contentType: false,
processData: false
});
return false;
});
But, I want to submit 2 more forms with this. How can I change data to submit multiple forms?
ID of other 2 forms are: #form1 and #form2. How can I modify this line?
var formData = new FormData($('form#verify_id_form')[0]);
EDIT
there is a option in ajax to do something like this...
var dataString = $("#filter-group1, #filter-group2").serialize();
(here 2 forms are getting submitted bu just 1 click)
But, I don't know how to achieve this in my case?

If you don't use "ajax:false" and submit all 3 forms, as $.ajax is asynchronous all the forms will be submitted in non-blocking way.
$('#verify_id').click(function() {
$.ajax({
//code for form 1
});
$.ajax({
//code for form 2
});
$.ajax({
//code for form 3
});
return false;
});

send data from inputs like form by java script [duplicate]

This question already has answers here:
How to submit a form with JavaScript by clicking a link?
(9 answers)
Closed 9 years ago.
I have a table and every row has a form:
<td><input type="date" id='time'/></td>
<td><input type="text" id='info'/></td>
<td><input type="text" id='money'/></td>
<td><input type="buttond" id="submit_edit" value="edit"/></td>
The problem is I can't submit a form like this, so I need to submit this with JavaScript, and I need to submit it using the POST method. I want the POST method to do this as one row; I will change the id of the inputs later.
This is not like this question: How to submit a form with JavaScript by clicking a link?
I want to send data manually by id. The correct thing I need is like this
$(document).ready(function(){
$("#submit_edit").click(function(){
var time=$("#time").val();
var info=$("#info").val();
var money=$("#money").val();
$.ajax(
{
type: "POST",
url: "edit.php",
data: {time:time , info:info,:money:money},
success: function(html)
{
$("#edit_result").html(html).show();
}
});
});
});

If you want to do it via ajax it's like this:
// this is the id of the form
$("#form_id").submit(function() {
url="page.php";
data1=$("#selector").val();
data2="value";
$.ajax({
datatype:"html",
type: "POST",
url: url,
data: {data1:data1,data2:data2},
success: function(html)
{
alert(html);
}
});
});

you have jquery ?
First
if not, try this.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
you can download http://jquery.com/download/
also
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
Ok, now
u need send a form?
then
ur button:
<input type="submit" name="edit" id="button_submit"/>
ur form
<form action="" method="POST" id="form">
then the jquery
$('#button_submit').click(function(){
$('#form').submit();
});