I have this bit of code:
<form name="myUploadForm" method="post" action="/scripts/upload.do" enctype="multipart/form-data" id="fileUpload">
<table width="100%" border="0">
<tr>
<td>
<input type="file" name="xlsFile" size="60" value="test.xls">
<input type="button" value="Upload File" name="upload_xls">
</td>
</tr>
</table>
</form>
Right now I can upload the file with Struts but it refreshes the page. How do I do this without the page refreshing?
What worked for me:
On the form tag, I have target="hidden-iframe"
the hidden i-frame on the page looks like this:
<iframe name="hidden-iframe" style="display: none;"></iframe>
The important thing to underline here is that the form is referencing the name attribute of the frame and not the id.
You can post form with jQuery and get the result back.
$('#formId' ).submit(
function( e ) {
$.ajax( {
url: '/upload',
type: 'POST',
data: new FormData( this ),
processData: false,
contentType: false,
success: function(result){
console.log(result);
//$("#div1").html(str);
}
} );
e.preventDefault();
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formId" action="/upload" enctype="multipart/form-data" method="post">
<input type="text" name="title"><br>
<input type="file" name="upload" multiple="multiple"><br>
<input type="submit" value="Upload">
</form>
<div id="div1">
</div>
There are two methods:
HTML5 supports File API.
Create a hidden iframe, point the property 'target' of the form to the iframe's id.
If you can use jQuery, you can use something like jQuery File Upload.
Related
I have the following code for an HTML form:
<form id="idForm" method="post" enctype="multipart/form-data">
<input type="text" name="first" value="Bob" />
<input type="text" name="middle" value="James" />
<input type="text" name="last" value="Smith" />
<input name="image" type="file" />
<input type="submit" name="submit" value="Submit" />
</form>
and the following Javascript code on the same page where the form is located. Also, this code is written below the form code:
$("#idForm").submit(function() {
alert("hi");
var url = "submit.php";
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(),
success: function(data) {
alert(data);
}
});
return false;
});
And here is the PHP code that I'm using to see if the form data is being posted:
if (isset($_FILES['image'])) {
$image = $_FILES['image'];
echo $image;
}
if (isset($_POST['first'])) {
$name = $_POST['first'];
echo $name;
}
With the above code, it seems as though the attached file is not being sent to the PHP file. Only the values are being sent, since they are echoed when I inspected the element using Google Chrome dev tool.
I want to be able to post both text value and files to the PHP file for processing.
Why am I getting this problem? How do I fix this?
Also, as part of the solution, I want to prevent the page from being refreshed when the submit button is clicked.
Thanks much!
Unfortunately input[type='file'] cannot be submitted by .serialize(), you have to manipulate by formData.
You will find a very good formData example in here
I have an html form that loads the main portion of a document, postload an ajax request goes off and gets an xml file that is parsed out to create 'sub' forms which can be updated/submitted. This is the form 'preload'
<html>
<head>
<script src="jquery.js">
<script src="jquery.forms.js">
<script>
$(document).ready(function () {
//Script to execute when form is loaded
loadOrder(unid);
});
</script>
</head>
<body>
<form id="mainform" name="main" method="post" action="whatever">
<input type="hidden" id="unid" name="unid" value="123" />
</form>
<div id="orderForms">
</div>
</body>
</html>
Here is the form post load :
<html>...
<div id="orderForms">
<form id="order_1" name="order" method="post" action="whatever">
<input type="hidden" id="pid_1" name="pid" value="123" />
<input type="hidden" id="unid_1" name="unid" value="456" />
</form>
<form id="order_2" name="order" method="post" action="whatever">
<input type="hidden" id="pid_2" name="pid" value="123" />
<input type="hidden" id="unid_2" name="unid" value="789" />
</form>
</div>
</body>
</html>
JS code:
function loadOrders(unid){
var rUrl = "url";
$.ajax({type: "GET", url: rUrl, async: true, cache: false, dataType: "xml", success: postLoadOrders}) ;
}
function postLoadOrders(xml){
nxtOrder = 1;
var html="";
$('order',xml).each(function() {
// parses the xml and generates the html to be inserted into the <div>
});
$("#orderForms").html(html);
}
This all works, the main form loads, the 'hidden' forms in the <div> are written in. The trouble happens when I put a button on the main form that does this...
function submitOrder(){
$("#pid_1").val('555');
$("#order_1").formSerialize();
$("#order_1").ajaxSubmit();
}
If I alert($("#pid_1").val()) prior to the .val('555') it shows the original value, when I alert after, it shows the new value, however it submits the original value, and if I open the html in firebug the value isn't showing as changing.
If I put a hidden field into the main form, that exists when the document loads and change its value, not only does the new value post, it also shows as being changed when examining the source.
Any ideas?
$('order',xml).each(function() {
});
this is not Object in JQuery
You can edit:
$('[name=order]',xml).each(function() {
});
I have some experience in JAVA GUI programming and I want to achieve the same in a PHP form.
Situation: I want to have a php form with a submit button. When the button is pressed an ActionEvent should be called to update another part of the form.
How to implement such a feature with HTML,PHP,JAVASCRIPT ?
Load latest version of jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
HTML code:
<form>
<button type="button" class="formLoader">Click button</button>
<div id="formContentToLoad"></div>
</form>
jQuery code:
<script type="text/javascript">
$(function(){
$(".formLoader").click(function(){
$("#formContentToLoad").load("scriptToRun.php");
});
});
</script>
Whatever markup you need to update in the form, can be put into scriptToRun.php
Use jQuery
Javascript
$(document).ready(function() {
$(".myForm").submit(function() {
$.ajax({
type: "POST",
url: "myForm.php",
data: $(this).serialize(),
success: function(response) {
// todo...
alert(response);
}
})
})
});
Html
<form method="POST" class="myForm">
<input type="text" id="a_field" name="a_field" placeholder="a field" />
<input type="submit" value="Submit" />
</form>
PHP
<?php
if(isset($_POST)) {
$a_field = $_POST["a_field"];
// todo..
}
If you want to use PHP and HTML to submit a form try this:
HTML Form
<form action="" method="post">
<input type="text" placeholder="Enter Name" name="name" />
<input type="submit" name="sendFormBtn" />
</form>
PHP
<?php
if(isset($_POST["sendFormBtn"]{
$name = isset($_POST["name"]) ? $_POST["name"] : "Error Response Here";
//More Validation Here
}
I'm working with html/php/ajax/jquery and today I pointed out a little issue that is driving me crazy.
I've got an html form:
<form method="POST" enctype="multipart/form-data" name="myForm" id="myForm" action="">
<label class="form-label">Nome</label>
<input name="nome" type="text" class="form-control"><br>
<label class="form-label">Descrizione</label>
<textarea name="descrizione" id="text-editor" placeholder="" class="form-control" rows="10"></textarea>
<label class="form-label">Stato</label>
<select name="stato" id="source" style="width:30%">
<option value="1">Abilitato</option>
<option value="0">Disabilitato</option>
</select>
<h4>Foto profilo</h4>
<input type="hidden" name="MAX_FILE_SIZE" value="20400000" >
<input style="border:0px;" type="file" name="user_foto" id="file">
<div class="form-actions">
<div class="pull-right">
<button type="submit" class="btn btn-success btn-cons"><i class="icon-ok"></i>Inserisci</button>
<button type="button" class="btn btn-white btn-cons" onclick="window.location.href='index.php'">Indietro</button></a>
</div>
</div>
</form>
I'm working with a JQuery+Ajax script that is able to fire a php script without reloading page, and insert form's data into a table in my database:
$(document).ready(function(){
$('#myForm').on('submit',function(e) {
var formData = new FormData(this);
$.ajax({
url:'inserisciProfessionisti.php',
data: formData,
type:'POST',
async: false,
cache: false,
contentType: false,
processData: false,
success:function(data){
window.location = 'listaProfessionisti.php'
},
error:function(data){}
});
e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"===
});
});
Here my php code:
<?php
session_start();
session_cache_limiter('nocache');
if(!isset($_SESSION['mail'])){
header("location:login.php");
}
include("include/connect.php");
$conn=mysql_connect($HOST, $USER, $PASSWORD);
$db_ok=mysql_select_db($DB, $conn);
$nome=$_POST['nome'];
$descrizione = $_POST['descrizione'];
....
$comando="INSERT INTO professionisti('nome','descrizione',...)VALUES('$nome','$descrizione',...)";
$ris=mysql_query($comando, $conn) or die("Errore connessione database: " . mysql_error());
...
Everything works like a charm apart textarea content. It seems that textarea content wouldn't be passed to my php script.
Issue solved.
I add this onclick="tinyMCE.triggerSave(true,true);" to submit button and everything works like a charm.
I think It should be a tinyMCE bug.
I am working on a html page which is supposed to submit a post request with request body to my server like below
<html>
<head>Customer app</head>
<body>
<div>
<table>
<tr>
<td>Customer Id :</td>
<td>
<form name="submitform" method="post">
<input type="text" id="customerId" name="customerId"/>
<input type="submit" value="Submit">
</form>
</td>
</tr>
</table>
</div>
</body>
<script>
$(document).ready(function(){
$("#submitform").click(function(e)
{
var MyForm = JSON.stringify($("#customerId").serializeJSON());
console.log(MyForm);
$.ajax({
url : "http://localhost:7777/ola-drive/customer/ride",
type: "POST",
data : MyForm,
});
e.preventDefault(); //STOP default action
});
});
</script>
</html>
It does not work as expected throwing 404 Not Found getting redirected to http://localhost:7777/customerapp.html. But form data corresponding to the request submission seems to be correct.
Can someone help me fix the issue with my html code submit POST request redirection ?
Your issue is in this line:
$("#submitform").click(function(e)
Your form does not have an id but a name, so you can write:
$('[name="submitform"]').click(function(e)
That is the reason because your form is giving you a redirection error.
$('[name="submitform"]').click(function (e) {
e.preventDefault();
$.ajax({
url: "http://localhost:7777/ola-drive/customer/ride",
type: "POST",
data: {"customerId": $("#customerId").val()},
success: function (result) {
//do somthing here
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table>
<tr>
<td>Customer Id :</td>
<td>
<form name="submitform" method="post">
<input type="text" id="customerId" name="customerId"/>
<input type="submit" value="Submit">
</form>
</td></tr>
</table>
</div>
You are already created form using html, you can add action attrbiute with value for post url like
<form name="submitform" method="post" action="/ola-drive/customer/ride">
Unless you want to use ajax, you create your data form manually
you have this:
$("#submitform").click(function(e){...}
The first problem is you are selecting an input tag, instead the Form. The second is rather the action desired, in this case should be "submit". And if you already are using JQuery you might be interested in save some space using the method 'serialize()'. Try:
$('form').on('sumbit', function(e){
e.preventDefault();
$.ajax({
url: // your path
type: 'post',
data: $(this).seialize(),
...})
})
And use an id for Form, it's easier to select it.