Working with multiple ajax forms in same page - javascript

After a suggestion from this question Multiple forms in in a page - load error messages via ajax
I am trying to work multiple forms in same page. I am trying to append error messages in to the respective input div classes.
I don't want to have different form ids because i need to have single id in the jquery then.
I have forms like
<form class="myform" name="myform">
<div class="name">
<input type="text" name="name" />
</div>
<div class="message">
<input type="text" name="message" />
</div>
<input type="submit" name="submit" />
</form>
<!-- second form -->
<form class="myform" name="myform">
<div class="name">
<input type="text" name="age" />
</div>
<div class="message">
<input type="text" name="gender" />
</div>
<input type="submit" name="submit" />
</form>
and the jQuery part is
$('.myform').on('submit', function(event) {
postform = $(this);
event.preventDefault();
$(this).ajaxSubmit({
url: 'process.php',
type: 'post',
dataType: 'json',
success: function( response ){
$.each(response, function(index, element){
var msgdiv = postform.children('div.' + divclass).append('<span>'+message+'</span>');
}
}
});
});
however the ajax part is working but the error messages do not load in the div tags as defined in the jQuery 'div.' + divclass. Any help would be appreciated

Like this?
postform.find('.message').append('<span>' + message + '</span>');

Related

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');
}
});
});

sending form via ajax, html node select for data sending

with this code
<script>
// this is the class of the submit button
$(".update_form").click(function() { // changed
$.ajax({
type: "POST",
url: "approve_test.php",
data: $(this).parent().serialize(), // changed
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});
</script>
from here Targeting multiple forms to send via ajax (jquery)
user can send data of specific form.
In this example structure is like this
<form id="form1" method="post">
<input type="text" id="name1" name="value" value="">
<input type="submit" class="update_form" value="Save Changes"> <!-- changed -->
</form>
<form id="form2" method="post">
<input type="text" id="name2" name="value" value="">
<input type="submit" class="update_form" value="Save Changes"> <!-- changed -->
</form>
In my case I've a bit more complicated Html structure.
<form id="w0" action="/users/new_article" method="post" enctype="multipart/form-data">
<input type="hidden" name="_csrf" value="yeUp"> <div class="form-group field-uploadform-file">
<label class="control-label" for="uploadform-file">File</label>
<input type="hidden" name="UploadForm[file]" value=""><input type="file" id="uploadform-file" name="UploadForm[file]">
<div class="help-block"></div>
</div>
<!-- <div class="file-input btn btn-block btn-primary"> -->
<div class="file-input btn btn-block btn-primary">
+ add files
<input type="file" name="files" id="image_upload">
</div>
</form>
I'm monitoring change of #image_upload.
But it is not child of form tag, thus I cannot use this code from first example
data: $(this).parent().serialize(), // changed
So my question is how do I must write my code so the form submits ?
You can't submit files as using ajax, as easily as you could submit just text.
You must use XHR.
Here's a solution: How can I upload files asynchronously?
Take note that you're pretty much out of luck if you need to support IE8/9.

Multi form submit with one selector use jquery ajax

I have a problem with jquery ajax multi form.
every execution is always part of the form at the top, to form the other does not work.
can help me.
this Source Code
<form id="form_action" action="http://www.dom.dom/act/">
<input type="text" name="nama" value="" />
<button type="submit" >Save</buton>
</form>
<form id="form_action" action="http://www.dom.dom/act/">
<input type="text" name="nama" value="" />
<button type="submit" >Save</buton>
</form>
<form id="form_action" action="http://www.dom.dom/act/">
<input type="text" name="nama" value="" />
<button type="submit" >Save</buton>
</form>
<form id="form_action" action="http://www.dom.dom/act/">
<input type="text" name="nama" value="" />
<button type="submit" >Save</buton>
</form>
jquery ajax nya :
$("‪#‎form_action‬").on('submit', function(e){
e.preventDefault();
var link = $(this).attr("action");
var data = $(this).serialize();
$.ajajx({
url:link,
data:data,
type:"POST",
typeData:'html',
cache:false,
success: function(data){
//// bla bla //
}
});
return false;
});
How to use this jquery for multi form..?
When you use an id selector ($('#some-id')) you get only the first element that matches your selector, not an array as you get with other selectors.
Also, it seems that they're all the same form.. What are you trying to achieve? Maybe you can use the same form and just change action attribute or some input in the form.
Another thing, as #dave mentioned in the comments, there's no $.ajajx function in jQuery :-)

django app JavaScript getElementById not working

I am trying to POST some data to Django App but every variable is working fine except one..
This is my form:
<div class="subfield">
<span>
Found a coupon for <b><span style="color:#d95b44;" id="Store_Name">{{ storeData.0.storeName }}</span>?</b>
Enter the details below to share with other users
</span>
<form>
<br>
<label for="user">Coupon code :</label>
<input type="text" id="coupon_Code" maxlength="100" />
<br>
<label for="user">Discount :</label>
<textarea rows="2" cols="19" minlength="15" id="coupon_Discount"></textarea>
<br>
<div id="buttn">
<button type="button" style="margin:0;padding:0;" onclick="javascript:submitCoupon();">Submit Coupon</button>
</div>
</form>
</div>
My JavaScript is:
<script type="text/javascript">
function submitCoupon()
{
var store_Name = document.getElementById('Store_Name').value;
var couponCode = document.getElementById('coupon_Code').value;
var couponDiscount = document.getElementById('coupon_Discount').value;
var data = {"storeName":store_Name,"couponCode":couponCode,"couponDiscount":couponDiscount,
csrfmiddlewaretoken:'{{ csrf_token }}'};
alert(store_Name);
$.ajax({ // create an AJAX call...
data: data, // get the form data
type: "POST", // GET or POST
url: "/submit_coupon/", // the file to call
dataType: "json",
success: function(response) { // on success..
alert("done");
}
});
}
</script>
Out of three variable couponCode and couponDiscount is working but not store_Name...
I have tried changing variable name,id but nothing is working
Whenever i am trying to alert store_Name i am getting undefined ....
And also console is displaying no error...
<div class="subfield">
<form>
<span>
Found a coupon for <b><span style="color:#d95b44;" id="Store_Name">{{ storeData.0.storeName }}</span>?</b>
Enter the details below to share with other users
</span>
<br>
<label for="user">Coupon code :</label>
<input type="text" id="coupon_Code" maxlength="100" />
<br>
<label for="user">Discount :</label>
<textarea rows="2" cols="19" minlength="15" id="coupon_Discount"></textarea>
<br>
<div id="buttn">
<button type="button" style="margin:0;padding:0;" onclick="javascript:submitCoupon();">Submit Coupon</button>
</div>
</form>
</div>
Store_Name's span used in the form then its run properly

Categories