We Keep Coding

How to use a javascript function for multiple html forms

I am trying to use a java script function for multiple html forms with no luck. Following is my code. Please help me out. Thanks
html forms
<form id="my_form_id">
Your Email Address: <input type="text" id="email" /><br>
<input type="submit" />
<div id='loader' style='display:none'>
<img src='images/loader.gif'/>
</div>
</form>
<form id="my_form_id">
Your Email Address: <input type="text" id="email" /><br>
<input type="submit" />
<div id='loader' style='display:none'>
<img src='images/loader.gif'/>
</div>
</form>
Javascript
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$('#my_form_id').on('submit', function(e){
$('#loader').show();
//Stop the form from submitting itself to the server.
e.preventDefault();
var email = $('#email').val();
$.ajax({
type: "POST",
url: 'xml.php',
data: {email: email},
success: function(data){
alert(data);
$('#loader').hide();
}
});
});
});
</script>

You can use jquery multiple-selector like
$('#my_form_id,#my_form_id2').on('submit', function(e){
Id need to be unique for each html element
Also there is duplicate email id. But you will like to get the email specific to that form. In That case you can use class and then use find
$(document).ready(function() {
$('#my_form_id,#my_form_id2').on('submit', function(e) {
$('#loader').show();
//Stop the form from submitting itself to the server.
e.preventDefault();
var email = $(this).find('.email').val(); // children
console.log(email)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my_form_id">
Your Email Address: <input type="text" class="email" /><br>
<input type="submit" />
<div id='loader' style='display:none'>
<img src='images/loader.gif' />
</div>
</form>
<form id="my_form_id2">
Your Email Address: <input type="text" class="email" /><br>
<input type="submit" />
<div id='loader' style='display:none'>
<img src='images/loader.gif' />
</div>
</form>

The main issue is because id attributes need to be unique. As you're repeating them throughout the HTML on both the form and the email inputs only the first instances of each will be found.
To fix this issue change them to class attributes. From there you can use DOM traversal to find the elements related to the form which was submit in order to retrieve the required data. Try this:
jQuery(function($) {
$('.my_form').on('submit', function(e) {
e.preventDefault();
var $form = $(this);
var email = $form.find('input[name="email"]').val();
$form.find('.loader').show();
$.ajax({
type: "POST",
url: 'xml.php',
data: { email: email },
success: function(data) {
console.log(data);
$form.find('.loader').hide();
}
});
});
});
.loader {
display: none;
}
<form class="my_form">
Your Email Address: <input type="text" name="email" /><br>
<button type="submit">Submit</button>
<div class="loader">
<img src="images/loader.gif" />
</div>
</form>
<form class="my_form">
Your Email Address: <input type="text" name="email" /><br>
<button type="submit">Submit</button>
<div class="loader">
<img src="images/loader.gif" />
</div>
</form>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

The ids in a document should be unique, convert the ids to a class,
<form class="my_form_class">
And attach the listener on selecting the class.
$('.my_form_class').on('submit', function(e){// rest of the code})

PHP - Submit button and get value without refresh

Hello I want to get the value of this input and fetch it using ajax no database at all. thank you. how can i do it with ajax?
<form method="POST">
<input type="text" name="input" id="card-code" value='<?php echo $code ?>' class="form-control">
<input type="text" id="card-pin" value='<?php echo $code2 ?>' class="form-control" maxlength="3">
</form>
there is my inputs and here is the button.
<form action="top-up.php" method="POST">
</div>
</div>
<div class="col-md-6" style="margin-top: -160px">
<div class="caption">
<div class="jumbotron">
<textarea class="form-control text-center" id="scanned-QR" name="lblQrTxt" onchange = "change()"></textarea><br><br><br>
<input class="btn btn-primary btn-lg" type="submit" name="btnSubcode" value="PROCESS"></input>
</div>
</div>
</div>
</div>
</form>
so the final output sould not refresh the page and the textarea value will be send to the textbox

The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process.
http://malsup.com/jquery/form/#getting-started
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<form id="myForm" action="comment.php" method="post">
Name: <input type="text" name="name" />
Comment: <textarea name="comment"></textarea>
<input type="submit" value="Submit Comment" />
</form>
// prepare Options Object
var options = {
target: '#divToUpdate',
url: 'comment.php',
success: function() {
alert('Thanks for your comment!');
}
};
// pass options to ajaxForm
$('#myForm').ajaxForm(options);

Firstly, rewrite your html code as below:
<form id="form" action="top-up.php" method="POST">
</div>
</div>
<div class="col-md-6" style="margin-top: -160px">
<div class="caption">
<div class="jumbotron">
<textarea class="form-control text-center" id="scanned-QR" name="lblQrTxt"></textarea><br><br><br>
<input class="btn btn-primary btn-lg js-form-submit" type="submit"></input>
</div>
</div>
</div>
</div>
</form>
Then, you can write JS something like this:
$(document).on('click','.js-form-submit', function (e) {
e.preventDefault();
var formData = $('#form').serialize();
var url = $('#form').attr('action');
$.ajax({
type: "POST",
cache: false,
url: url // Your php url here
data : formData,
dataType: "json",
success: function(response) {
//var obj = jQuery.parseJSON(response); if the dataType is not specified as json uncomment this
// do what ever you want with the server response
},
error: function() {
alert('error handling here');
}
});
});

How do I dynamically pass a form field value into a div using jQuery?

On submit I would like to display the value of an input field with the #firstname id into a div using jQuery.
$("#form").submit(function(e) {
$.ajax({
url: '{{config path="web/unsecure/base_url"}}proteinlaunch/form/checkaddress',
type: 'post',
dataType: 'json',
data: $('form#proteinForm').serialize(),
success: handleData
});
e.preventDefault();
function handleData(data) {
//do some stuff
var text = $('input#firstname').text();
$("div#mydiv").html(text);
}
})
My form element is:
<input class="fname" id="firstname" name="firstname" type="text" placeholder="First Name" />
My html is:
<div id="mydiv"></div>

You should use .val() instead of .text(); when you want to get the value of an input field :
$("div#mydiv").html( $('input#firstname').val() );
NOTE : If the value the input isn't supposed to be HTML it will be better to use .text() instead of .html().
$("#form").submit(function(e) {
e.preventDefault();
$.ajax({
url: '{{config path="web/unsecure/base_url"}}proteinlaunch/form/checkaddress',
type: 'post',
dataType: 'json',
data: $('form#proteinForm').serialize(),
success: handleData
});
});
function handleData(data) {
var text = $('input#firstname').val();
$("div#mydiv").html(text);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input class="fname" id="firstname" name="firstname" type="text" placeholder="First Name" />
</form>
<div id="mydiv"></div>

onsubmit not firing my JS

what am i missing here?
<script>
function validateLogIn(login)
{
console.log(login);
var username = $("#username").val();
var password = $("#password").val();
console.log(username, password, login);
$.ajax({
url: 'login.php', //checking the login in
data: {username:username,password:password},
type: "POST", //Method by which data being transmitted
dataType: 'json',
success: function(data)
{
console.log(data);
login.submit();
}
//else do an alert("please lgo in again");
});
return false;
}
</script>
</head>
<body>
<form action="crud.html" method="post" name="form-login" onsubmit="return validateLogIn(this);">
<input required placeholder="Username" type="text" name="username" id="username"/>
<input required placeholder="Password" type="password" name="password" id="password"/>
<label for="remember">Remember Me:</label>
<input type="checkbox" name="remember" value="yes">
<br />
<br />
<input type="submit" name="login" value="login" />
</form>
</body>
have i got a spelling mistake? my console.logs doesnt show either

In your validateLogIn() function, you aren't returning false, therefore the function will be called, but the browser will still proceed to submit the form to crud.html and change page.
function validateLogIn(login)
{
...
...
...
return false;
}
If you want to submit to crud.html only after the success function fires, then you still need the above return false, and in your success function add:
success: function(data)
{
login.submit();
}

This code is working perfectly on my machine, please make sure you are including the jquery library correctly. and obviously return false
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function validateLogIn()
{
var username = $("#username").val();
var password = $("#password").val();
console.log(username, password, this);
alert("Hello");
$.ajax({
url: 'login.php', //checking the login in
data: {username:username,password:password},
type: "POST", //Method by which data being transmitted
dataType: 'json',
success: function(data)
{
console.log(data);
}
//else do an alert("please lgo in again");
});
return false;
}
</script>
</head>
<body>
<form action="crud.html" method="post" name="form-login" onsubmit="return validateLogIn();">
<input required placeholder="Username" type="text" name="username" id="username"/>
<input required placeholder="Password" type="password" name="password" id="password"/>
<label for="remember">Remember Me:</label>
<input type="checkbox" name="remember" value="yes">
<br />
<br />
<input type="submit" name="login" value="login" />
</form>
</body>
</html>

change your log statement to this as below, the log() method takes one argument, so if you want to print three variables append it to one string
console.log("username:"+username+" password:"+password+" id:"+login.id);

Why does the second form disappear after submiting?

There is the piece of code containing 2 forms:
<form class="emp-delete">
<label for="emp-id">Id:</label>
<input type="text" id="emp-id" />
<input type="submit" id="submit" value="delete" />
<span id="status" />
</form>
<script type="text/javascript">
$("#submit").click(function(){
$.ajax({
type: "DELETE",
url: "/corporate/employees/" + $("#emp-id").val(),
complete: function(r){
$("#status").text(r.responseText);
}
})
return false;
})
</script>
<p><spring:message code="createEmployee.title"/>
<form class="emp-create">
<label for="name" />
<input type="text" id="name" value="create"/>
<input type="submit" id="add-emp" />
</form>
<script type="text/javascript">
$("#add-emp").click(function(){
var employeeObject= { name: $("#name").val() }
$.ajax({
type: "POST",
data: JSON.stringify(employeeObject),
contentType: "application/json",
url: "/corporate/employees"
})
return false;
})
</script>
The issue is after clicking the delete button the second form dissapears.
Before:
After:
How can I do that the second form doesn't dissapear when clicking the delete button.
UPDATE
DEMO

The problem is right here:
<span id="status"/>
Change this to:
<span id="status"></span>
The browser thinks, that the span is openend and your second form is a child of it, which got replaced with your text.