I am submitting a form which contains some text field, dropdown and a file input. The form is submitted using JQuery/Ajax and the data is sent to php. If I submit the form without using bootstrapFileInput, all the data of the form is sent to php and correctly processed but as soon as I enable bootstrapFileInput, the input file is missing while all other fields are correctly submitted.
I get no error in the console.
HTML :
<div class="form-inline">
<div id="singUser">
<form role="form" name="setLimit" id="setLimit" class="form-inline" enctype="multipart/form-data">
<input type="text" id="userid" name="userid" class="form-control" placeholder="Enter User ID">
<input type="text" id="quota" name="quota" class="form-control" placeholder="Enter Quota limit in GB">
<select class="form-control" id="ltype" name="ltype">
<option value="desktop">Desktop</option>
<option value="server">Server</option>
</select>
<input type="checkbox" id="rmlimit" name="rmlimit"> Remove Limit (Set to Shared storage)
<button type="submit" id="sgUserButn" class="btn btn-default btn-primary" >Set Limit!</button>
</div>
<span id="multUser">
<p>Select a file with a list of user ids and the limit in GB you wish to assign download the example file.</p>
<img src="img/csvex.png" id="csvexp" ><br><br>
<input class="file-input-wrapper" type="file" id="lsUsers" name="lsUsers" data-filename-placement="inside" title="Select CSV File">
<button id="mulUserButn" type="submit" class="btn btn-default btn-primary" >Set Limit!</button>
</span>
</form>
</div>
JQuery
$(document).ready(function() {
$.ajaxSetup({
cache: false
});
$('input[type=file]').bootstrapFileInput();
$('.file-inputs').bootstrapFileInput();
$('#setLimit')
.submit(function(e) {
busyStatus();
$.ajax({
url: 'testProcess.php',
type: 'POST',
data: new FormData(this),
processData: false,
contentType: false,
complete: function() {
idleStatus();
},
success: function(result) {
//$(document.body).append(result);
//alert( $(result).toArray() );
$("#result").html(result);
}
});
e.preventDefault();
return false;
});
});
PHP
<?php
print_r($_POST);
echo '<br>';
print_r($_FILES);
?>
I am really out of ideas and would really appreciate some help.
Thanks in advance.
Related
Greetings fellow programmers, I've been trying to solve this all day but I dont know much with ajax. I can handle regular forms that require refresh.
Basically I have a form where the client enters their desired quantity and a button that says add to cart with an ajax function that handles the post request.
<form id="qnt'.$ID'">
<input type="hidden" value="'.$price.'" name="price">
<input type="text" placeholder="Enter Quantity in Kilo" name="qty" required>
<button class="btn btn-danger" type="button" onclick= add('.$ID.') class="filled-button" class="add2cart">Add To Cart</button></h6>
</form>
This is the ajax request:
<script type="text/javascript">
function add(id){
qnt = $('#qnt'+id).serialize();
$('#qnt'+id).trigger("reset");
$.ajax({
url:'add2cart.php',
method:'POST',
data:{
'id': id,
'qnt': qnt
},
success:function(data){
console.log(data);
}
});
}
</script>
Now this works completely fine(Tbh a friend helped me do it) , Now I reached a situation where I want to add another variable to the form:
<form id="qnt'.$ID'">
<input type="hidden" value="'.$newPrice.'" name="newPrice">
<input type="text" placeholder="Enter Quantity in Kilo" name="qty" required>
<button class="btn btn-danger" type="button" onclick= add('.$ID.') class="filled-button" class="add2cart">Add To Cart</button></h6>
</form>
How can I pass that new hidden input with the ajax script? Thanks.
You can place the id in a hidden input in the form, then the serialize will have the id in it
<form id="qnt'.$ID'">
<input type="hidden" value="'.$ID.'" name="id">
<input type="hidden" value="'.$newPrice.'" name="newPrice">
<input type="text" placeholder="Enter Quantity in Kilo" name="qty" required>
<button class="btn btn-danger" type="button" onclick= add('.$ID.') class="filled-button" class="add2cart">Add To Cart</button></h6>
</form>
function add(id){
qnt = $('#qnt'+id).serialize();
$('#qnt'+id).trigger("reset");
$.ajax({
url:'add2cart.php',
method:'POST',
data: qnt,
success:function(data){
console.log(data);
}
});
}
I am trying to post a modal form to a table using php, jquery .ajax but it never works.. tried debugging using firebug and i don't see any errors. i tested the form by using form action="notes_functions.php" and it worked fine.
Profile.php
<div class="modal-body">
<form class="noteform" id="notesmodal" method="post">
<fieldset>
<label>Title</label>
<input type="text" class="form-control" name="note_title" placeholder="Enter a title for your note">
<label>Note</label>
<textarea rows="4" cols="50" class="form-control" name="note_content" placeholder="note"></textarea>
<label>Note type</label>
<div class="panel-body">
<input type="tagsinput" id="teetete" class="tagsinput" value="" />
</div>
<label for="exampleInputFile">Attach a document</label>
<input type="file" id="exampleInputFile3">
<p class="help-block">PDF, DOCX and image files are supported.</p>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
<input type="label" name="note_account" value="<?php echo $acctname ?>"/>
</label>
</div>
<input type="hidden" name="note_creator" value="<?php echo $_SESSION['username'];?>"/>
</fieldset>
<button class="btn btn-default" id="submitnote" >ADD</button>
</form>
</div>
this is my js code
$(function(){
$("button#submitnote").click(function(){
$.ajax ({
type:"POST",
url:"notes_functions.php",
data: $('form.noteform').serialize(),
success: function(msg){
$("#thanks").html(msg)
$("form.noteform").modal('hide');
},
error: function(){
alert("failure");
}
});
});
});
notes_functions.php
<?php
include_once 'dbconnect.php';
if (isset($_POST['note_title'])) {
$notetitle = strip_tags($_POST['note_title']);
$noteContent = strip_tags($_POST['note_content']);
$noteAccount = strip_tags($_POST['note_account']);
$noteCreator = strip_tags($_POST['note_creator']);
mysql_query("INSERT INTO account_notes (note_title, note_contents, note_account, note_creator)
VALUES ('$notetitle','$noteContent', '$noteAccount', '$noteCreator') ");
echo "Name = ".$notetitle;
echo $noteCreator;
}
?>
You should really be using .submit() rather than click (for submit-by-enter, etc.) and returning false to block conventional submits. You also need to make sure the code to bind the events runs after the form element is created. The easiest way to do this is to put it in the document ready handler.
jQuery(document).ready(function ($) {
$("#notesmodal").submit(function () {
$.ajax({
type: "POST",
url: "notes_functions.php",
data: $('form.noteform').serialize(),
success: function (msg) {
$("#thanks").html(msg)
$("form.noteform").modal('hide');
},
error: function () {
alert("failure");
}
});
return false;
});
});
And change the ADD button to be:
<input type="submit" name="submit" class="btn btn-default" id="submitnote" value="ADD" />
I'm just learning php and js and trying for a day to make this thing work...
Here's how it's supposed to be: after filling form you push button "Show modal" it shows modal window with input field. After submitting this form all the data from the form + phone from modal are send via email. When all input fields are simply in a form it all works fine. But when I show phone field in a modal it fails...
Here's the form
<div class="form">
<form class="form-deal form-deal1" id="form-order-3" name="special-price">
<input type="text" class="sqmeters" name="sqmeters" value="" />
<label>Select option:</label>
<div class="selectWrap">
<select class="formSelect" name="filmtype">
<option>Option one</option>
<option>Š¢Option two</option>
</select>
</div>
<label>Radio buttons</label>
<input type="radio" id="rb1" class="radio" name="regulator" value="r1"><label class="radioLabel" for="rb1">r1</label>
<input type="radio" id="rb2" class="radio" name="regulator" value="rb2"><label class="radioLabel" for="rb2">rb2</label>
<input type="radio" id="rb3" class="radio" name="regulator" value="rb3"><label class="radioLabel" for="rb3">rb3</label>
<label>Options:</label>
<div class="selectWrap">
<select class="formSelect" name="mount">
<option>opt1</option>
<option>opt2</option>
<option>opt3</option>
</select>
</div>
<div class="modal">
<input class="step2 hidden" type="text" name="phone" maxlength="14" placeholder="Phone:" required="" />
<button type="submit" class="btn step2 hidden">Submit form</button>
<span class="message"></span>
</div>
</form>
<a class="btn topcalcbtn">Show modal</a>
And the JS
$("form").submit(function(e){
e.preventDefault();
});
$(document).on('click', '.form-deal .btn', function () {
if ($(this).parent('form').find('input[name="phone"]').val().length>0 &&
$(this).parent('form').find('input[name="sqmeters"]').val().length>0)
AjaxFormRequest($(this).parent('form').attr('id'),'../mail_order.php');
});
function AjaxFormRequest(form_id, url) {
jQuery.ajax({
url: url,
type: "POST",
dataType: "html",
data: jQuery("#" + form_id).serialize(),
success: function (response) {
$('#'+form_id+' .message').text("Thanks!");
$('#'+form_id+' *:not(".message")').fadeOut(500);
$('.overlay, .popup').delay(2000).fadeOut(500);
$(window).attr('location','http://lp.tsk-energy.ru/thanx.html');
},
error: function (response) {
$('#'+form_id+' .message').text("Error");
}
});
}
Any help would be appreciated. Thanks in advance!
I am trying to post a modal form to a table using php, jquery .ajax but it never works.. tried debugging using firebug and i don't see any errors. i tested the form by using form action="notes_functions.php" and it worked fine.
Profile.php
<div class="modal-body">
<form class="noteform" id="notesmodal" method="post">
<fieldset>
<label>Title</label>
<input type="text" class="form-control" name="note_title" placeholder="Enter a title for your note">
<label>Note</label>
<textarea rows="4" cols="50" class="form-control" name="note_content" placeholder="note"></textarea>
<label>Note type</label>
<div class="panel-body">
<input type="tagsinput" id="teetete" class="tagsinput" value="" />
</div>
<label for="exampleInputFile">Attach a document</label>
<input type="file" id="exampleInputFile3">
<p class="help-block">PDF, DOCX and image files are supported.</p>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
<input type="label" name="note_account" value="<?php echo $acctname ?>"/>
</label>
</div>
<input type="hidden" name="note_creator" value="<?php echo $_SESSION['username'];?>"/>
</fieldset>
<button class="btn btn-default" id="submitnote" >ADD</button>
</form>
</div>
this is my js code
$(function(){
$("button#submitnote").click(function(){
$.ajax ({
type:"POST",
url:"notes_functions.php",
data: $('form.noteform').serialize(),
success: function(msg){
$("#thanks").html(msg)
$("form.noteform").modal('hide');
},
error: function(){
alert("failure");
}
});
});
});
notes_functions.php
<?php
include_once 'dbconnect.php';
if (isset($_POST['note_title'])) {
$notetitle = strip_tags($_POST['note_title']);
$noteContent = strip_tags($_POST['note_content']);
$noteAccount = strip_tags($_POST['note_account']);
$noteCreator = strip_tags($_POST['note_creator']);
mysql_query("INSERT INTO account_notes (note_title, note_contents, note_account, note_creator)
VALUES ('$notetitle','$noteContent', '$noteAccount', '$noteCreator') ");
echo "Name = ".$notetitle;
echo $noteCreator;
}
?>
You should really be using .submit() rather than click (for submit-by-enter, etc.) and returning false to block conventional submits. You also need to make sure the code to bind the events runs after the form element is created. The easiest way to do this is to put it in the document ready handler.
jQuery(document).ready(function ($) {
$("#notesmodal").submit(function () {
$.ajax({
type: "POST",
url: "notes_functions.php",
data: $('form.noteform').serialize(),
success: function (msg) {
$("#thanks").html(msg)
$("form.noteform").modal('hide');
},
error: function () {
alert("failure");
}
});
return false;
});
});
And change the ADD button to be:
<input type="submit" name="submit" class="btn btn-default" id="submitnote" value="ADD" />
I am trying to send data from a form to a php file so I can store it in a database, but its not working...
The code for the form is not on the same server as the php file, because the form will be on a mobile app.
html
<div data-role="page" id="createclub">
<div data-role="content">
<form id="cname" align="left" action="post">
<label for="name">Enter Name:</label>
<input type="text" id="name" value="" />
<input type="submit" value="Submit" data-inline="true">
</form>
<div id="result"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#cname").submit( function () {
$.post(
'http://www.clubbedin.isadcharity.org/createclub.php',
$("#cname").serialize(),
function(data){
$("#result").html(data);
alert("Data " + data);
}
);
return false;
});
});
</script>
php file
$name = $_POST['name'];
THANK YOU!!!
Add this at the beginning of your PHP file:
header("access-control-allow-origin: *");
More info on cross domain policy here.
I think you need to prevent the default function of the submit button using .preventDefault() because as I look on your code you want to submit your form using ajax
$("#cname").submit(function (e) {
e.preventDefault();
$.ajax({
url: 'http://www.clubbedin.isadcharity.org/createclub.php',
crossDomain: true, //set as a cross domain requests
type: 'post',
data: $("#cname").serialize(),
success: function (data) {
$("#result").html(data);
alert("Data " + data);
},
});
});
and please use .ajax() so that you can set your ajax request to a cross-domain request
http://api.jquery.com/jQuery.ajax/
Your input element <input type="text" id="name" value="" /> must set up the name attribute as name="name".
form #cname after edited
<form id="cname" align="left" action="post">
<label for="name">Enter Name:</label>
<input type="text" id="name" name="name" value="" />
<input type="submit" value="Submit" data-inline="true">
</form>
You can gather more informations from the jQuery API Documention:
http://api.jquery.com/
http://api.jquery.com/serialize/