sending form via ajax, html node select for data sending - javascript

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.

Related

JQuery ajaxSubmit function is not working for a form in an AngularJS HTML page

I am trying to patch up a legacy image upload code with AngularJS.
I have an HTML page which contains a form. Following is the HTML part of the code.
<form name="testForm" ng-init="testfunc()" novalidate>
<div id="adduser_header">
<div>
<p><b>Add new user</b></p>
</div>
</div>
<div id="userInfo">
<div>
<label>First Name</label>
<input type="text" name="fname" required>
</div>
<div>
<label>Last Name</label>
<input type="text" name="lname" required>
</div>
<div>
<form id="imageuploadForm"
action="/Projectname/jersey/ImageUploader/uploadimage"
method="POST" enctype="multipart/form-data"
accept-charset="utf-8" name="submitForm">
<div>
<input id="imagename" type="text" readonly="readonly"
placeholder="Click browse to upload image">
<div id="uploadImgBtn" onclick="getImgFile()">
<span>Browse</span>
</div>
</div>
<input id="userID" name="userID" type="hidden">
<input id="userImage" name="userImage" type="hidden">
<input id="usertType" name="usertType" type="hidden">
<p style="display: none;">this is your file input tag, so i hide it!
i used the onchange event to fire the form submission</p>
<div><input id="uploadimgfile" type="file" value="upload"
required="required" autofocus="autofocus"
name="imgfile"
onchange="upImgFile(this, event)">
</div>
<input style="display: none;" type="submit" value="Send">
</form>
</div>
</div>
<div id="action_buttons">
<input id="save_user" value="Add User" type="button"
title="Add User"
ng-click="submitRegistrationForm()"
ng-disabled="testForm.$invalid">
<a ui-sref="home-admin" ng-click="return()">
<input id="canceltoreturn" value="Cancel" type="button" title="Cancel">
</a>
</div>
</form>
I am able to Browse and select an image without any problem. My problem begins when i try to submit this AngularJS form. When i click Add User, i am first submitting AngularJS form named testForm which returns a success with an ID of the user. This ID is passed to the following patch of code (legacy):
uploadImage: function(id)
{
if($('#imageuploadForm').find('#userImage').val() != "")
{
$("#imageuploadForm").find("#userID").val(id);
var uploadstatus = null;
$("#imageuploadForm").ajaxSubmit({
success: function(data)
{
uploadstatus = data;
if(uploadstatus == "uploaded")
{
console.log("Uploaded Successfully!");
}
if(uploadstatus == "updated")
{
console.log("Updated Successfully!");
}
else
if(uploadstatus == "problem" || uploadstatus == "notuploaded")
{
console.log("Some problem occurred!");
}
$("#imagename").val("");
$('#imageuploadForm').find('#userImage').val("");
},
error: function(xhr, ajaxOptions, thrownError)
{
console.log(xhr.status);
}
});
}
else
{
alert("Please select some image to upload!")
}
}
When i am debugging the code, it comes till the line.
$("#imageuploadForm").ajaxSubmit
But nothing happens further. The service mentioned in the action attribute (/Projectname/jersey/ImageUploader/uploadimage) is not called at all.
This ajaxSubmit has worked well when the form was purely in HTML. (Also, i am using jquery.form.js for the ajaxSubmit function.)
But since i have tailored the code in AngularJS way, image uploading has stopped working.
What am i doing wrong here? I am not able to understand it. How can i resolve this issue?
It is illegal to nest <form> elements.
From the Docs:
The HTML <form> element represents a document section containing interactive controls for submitting information.
Content categories: Flow content, palpable content
Permitted content: Flow content, but not containing <form> elements
Tag omission: None, both the starting and ending tag are mandatory.
Permitted parents: Any element that accepts flow content
For more information, see
MDN HTML Reference - <form> Element
How to use AngularJS $http to send multipart/form-data

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 :-)

Working with multiple ajax forms in same page

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

Form handling and validation in Google spreadsheet sidebar

I have a sidebar in a Google spreadsheet with a HTML form in it.
Now, how do I handle the values submitted?
In index.html:
<form id="configs" action="#">
<fieldset>
////input fields here
<input type="submit" id="enviar" value="Send" onclick="google.script.run.validarForm()" />
</fieldset>
</form>
In code.gs the functin validarForm() is called but how do I pass the submitted values to it so I can validate it first and store them in variables?
Thanks in advance for your help!
You can pass parameters using google.script.run. I'd do something like this:
<form id="configs" action="#">
<fieldset>
<input type="text" id="exampleField1" />
<input type="text" id="exampleField2" />
<input type="submit" id="enviar" value="Send" onclick="enviarForm()" />
</fieldset>
</form>
<script>
function enviarForm(){
var exampleField1Value = document.getElementById("exampleField1").value;
var exampleField2Value = document.getElementById("exampleField2").value;
google.script.run.validarForm(exampleField1Value, exampleField2Value);
}
</script>
Of course, this can be done with event handlers instead of "onclick=", and jQuery too.

javascript function call for single form

I have multiple forms in my php file for different buttons. So, if I click on Back button, ramesh.php script should be called and so on. This is the code.
<form action="ramesh.php">
<input type="submit" value="Back" />
</form>
<form action="process.php" method="post">
<input name="rep_skyline" type="text" />
<input type="submit" />
</form>
<form action="update.php" method="post" >
<button type="submit">Update</button>
</form>
However, I need to pass some data to server from my client side on form submit just for the update button. I have a javascript function to send the data to server side as below.
<script type="text/javascript">
$(document).ready(function() {
$('form').submit(function(e) {
var mydata = 3;
if ($(this).is(':not([data-submit="true"])'))
{
$('form').append('<input type="hidden" name="foo" value="'+mydata+'">');
$('form').data('submit', 'true').submit();
e.preventDefault();
return false;
}
})
})
</script>
If I click on the update button, the javascript function is working fine. However, if I click on Back or Submit button, I should not be calling the javascript function. Is there someway to do this?
Give your form an id:
<form action="update.php" method="post" id="update-form">
Then use a more specific selector:
$("#update-form").submit(function() {
// Code
});
I'm not quite sure why you need JavaScript to dynamically add data to your form, however. You should just use an <input type="hidden" /> directly.
type=submit will always load the form's action. Try to specify wich form to submit.
<form name="backForm" id="backForm" action="ramesh.php">
<input type="submit" value="Back" />
</form>
<form name="form2" id="form2" action="process.php" method="post">
<input name="rep_skyline" type="text" />
<input type="submit" />
</form>
Now you can access the form via document.backForm or document.getElementById("backForm") and than use submit(); like document.getElementById("backForm").submit();

Categories