I have a simple form with a text input and a file input.
I want to do some processing with javascript (to show file upload percentage ) before submitting. But when i add .ajaxForm form action stops working (page doesn't redirect to the php file specified in action of the form.
index.php
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js" integrity="sha384-qlmct0AOBiA2VPZkMY3+2WqkHtIQ9lSdAsAn5RUJD/3vA5MKDgSGcdmIv4ycVxyn" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<form method="POST" id="myForm" action="some.php">
Name:<input type="text">
<input type="file">
<input type="submit" value="submit">
</form>
<script>
$("#myForm").ajaxForm({
beforeSubmit:function(){
console.log("Noo")
}
})
</script>
</body>
</html>
some.php is just an empty file
<?php
?>
I would like to know why the action stops working as soon as I add .ajaxForm
I have made the following attempts to fix my issue
add url,type to the object passed in .ajaxForm
$.post('some.php', $('#myForm').serialize())
Related
Here is what I am trying to do
1) Click on download pdf link.(There are list of pdfs)
2) On click Popup will open. Contact form is in the popup.
3) On submit button send mail and auto start download of PDF file.
4) At the same time of starting of download close the popup without redirecting to any page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Download</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
Download
<!-- modal for download and contact -->
<div class="modal fade" id="download" role="dialog" >
<div class="modal-dialog" >
<div class="modal-content">
<!-- Your contact form goes here -->
<form method="post">
<input type="text" id="name" placeholder="name">
<input type="text" id="email" placeholder="email">
<button onclick="send();">send</button>
</form>
</div></div></div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
function send(){
var name = $("input#name").val();
var email = $("input#email").val();
$.ajax({
type: "POST",
url: "send.php", //your mailing code is place on send.php
data:'name='+ name'&email='+email,
success: function(data){
$('#download').modal('hide');
//window.open('pdf/fabrilinx-Sodium-Hydrosulphite.pdf');
window.location.href='pdf/fabrilinx-Sodium-Hydrosulphite.pdf'; //your file location
}
});
}
</script>
</body>
</html>
Problem occurs with this code
1) onclick download button, after entering detail pdf wont open in new window
2) How to download same pdf on witch user click, if there are multiple pdf download buttons are there
i have taken this code reference from another post but neither it works nor i have enough points to comments there.
On click open popup with form and then on submit download and close it! How?
Please anyone can help me to get the solution??
I am having a problem with a simple HTML form with PHP validation. It is a generic question so here are some stack overflow answers I already looked at:
HTML form with PHP - uses javascript
Tried: Html form with php validation and honeypot
But it gave me: Server Error in '/' Application.
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action ="process.php" method ="POST">
First Name: <input type="text" name="fName">
<input type="submit">
</form>
</body>
</html>
And PHP:
<?php
if($_SERVER["REQUEST_METHOD" =="POST"]) {
//collect value of input fields:
$fName=$_REQUEST['fName'];
echo $fName;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
The form submits and calls my process.php page, but it does not echo my fName value.
Typo over here
$_SERVER["REQUEST_METHOD" =="POST"]// wrong close of squre bracket
^^
It would be
$_SERVER["REQUEST_METHOD"] =="POST"
Read http://php.net/manual/en/reserved.variables.server.php
You can also do like this.
<?php
if(isset($_POST['fName'])) {
//collect value of input fields:
$fName=$_POST['fName'];
echo $fName;
}
?>
There are some basic problem in your code, Thomas.
It is interesting, when passing parameters with GET or POST to get them somewhere else, specify the enctype.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action ="process.php" method ="POST" enctype="multipart/form-data">
First Name: <input type="text" name="fName">
<input type="submit">
</form>
</body>
</html>
But this is not what is going to solve your problem. Just an advice.
Your problem is in the fact you are doing it wrong in your PHP code.
First, there is a syntax error here:
if($_SERVER["REQUEST_METHOD" =="POST"]) {
This line should read:
if($_SERVER["REQUEST_METHOD"] =="POST") {
As you may see, you misplaced the closing bracket.
Besides, since you're using POST, the correct place to get the post variables is $_POST, not $_REQUEST. Then, instead of
$fName=$_REQUEST['fName'];
it should be
$fName=$_POST['fName'];
Finally, the right test to be done is not "what type of method my request used?" as you did with
if($_SERVER["REQUEST_METHOD"] =="POST")
but "is the variable I want to get here really defined?", as in
if (isset($_POST["fName"))
because the lack of this test could generate an error when you try to assign a value that does not exist to a variable.
But then I have a question: Why do you think you need this in your PHP code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
This is doing NOTHING in your PHP code. You're not even using this HTML structure to display your data. This reminds me of an essential rule in programming: Take out all you don't need, so you may focus on what really matters.
The post superglobal variable is empty after form submission; however, get works!
Here is the code:
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Form</title>
</head>
<body>
<fieldset>
<form action="print.php" method="POST" >
first name:<input type="text" name="Fname"><br>
last name:<input type="text" name="Lname"><br>
<input type="submit" name="submit" value="submit">
</form>
</fieldset>
</body>
</html>
print.php
<?php
echo $_POST['Fname'];
echo $_POST['Lname'];
?>
same code works fine on my PC and print.php prints something but here on my Macbook $_post is always null after submitting the form.
I use IntelliJ IDEA as my IDE with Php plugin.
I use php 7
IntelliJ is not mapped to the MAMP server. That's why php is interpreted but POST does not work. In order to map MAMP to IntelliJ use this guide which works for IntelliJ ultimate edition and PhpStorm.
I've been trying to build a fairly simple phone-friendly web page that uses Paypal to complete payments. I got the solution running with a basic HTML form and a sample PHP Express Checkout, which was working fine until I started trying to use jquery mobile to make the page phone-friendly. I since tried another PHP library with the same result. The library I'm now using is from Angell EYE and I've created the following basic page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dummy App</title>
</head>
<body>
<form method="get" action="paypal/SetExpressCheckout.php">
<label for="name">Name</label><input type="text" name="name" /><br />
<label for="qty">Quantity</label><input type="text" name="qty" /><br />
<input type="hidden" name="price" value="4.00" />
<input type="hidden" name="tax" value="1.40" />
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>
The Angell EYE library is located in a subdirectory called 'paypal' and after putting some dummy data into the form and clicking submit, I'm eventually directed to Paypal's Sandbox checkout and after completing the purchase I get back to the dummy site.
I then add in jquery as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dummy App</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile- 1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js"></script>
</head>
<body>
<form method="get" action="paypal/SetExpressCheckout.php">
<label for="name">Name</label><input type="text" name="name" /><br />
<label for="qty">Quantity</label><input type="text" name="qty" /><br />
<input type="hidden" name="price" value="4.00" />
<input type="hidden" name="tax" value="1.40" />
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>
At this point if I load the page and submit in Chrome, there's a wait of approx 6 seconds until the browser reports "Error Loading Page" and if I look in the Chrome console I see the following error:
XMLHttpRequest cannot load https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_express-checkout&useraction=commit&token=EC-81C31424M3017780Y. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://dummy.company.com' is therefore not allowed access.
If I remove the "" line from the page I no longer get the error, but I also (obviously) lose the phone optimisation...
There are lots of articles here explaining how to set HTTP headers on your server to avoid the problem; however in this case the resource is Paypal and I've found no mentioned of how/whether Paypal supports it...
Ultimately I want to build a PHP layer on my site that does some stuff and then submits initates the checkout process and I want to format the front page and had hoped to do it more easily with jqm.
I may be missing something really obvious.
Cheers,
Chris
I have found an issue with my site and I have isolated it to Jquery Mobile components. I am simply clicking a href link that calls another PHP page. On the second page I have set up a form and a Jquery form validation that checks to see if the SKU button has been selected and if so it should return an alert and cancel the form submission. The problem is that when I link to the second page from the first page the form validation code is not working.
If I refresh the page it works just fine. I isolated out the link to Jquery Mobile and the page works just fine. There is something that is being passed by Jquery Mobile that is keeping the page from loading in its entirety. Or, more likely there is some carry-over from the first page that disables the validation code on the second page.
I can add that if I get rid of the links to Jquery Mobile entirely on the second page (no styling at all) and I link to the second page from the first page, The Jquery Mobile formatting still carries to the second page. I have investigated this extensively and I can't find any previous mention of this problem. I have set up test pages to sort this out.
Page 1:
<html lang="en">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1" >
<title>Customer Maintenance</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"> </script>
</head>
<body>
Test 1 page
<p>Home Page</p><hr>
<footer>Created by: attentionjay</footer>
</body>
</html>
<a href="test2.php" >Test Inventory</a>
Page 2:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1" >
<title>Customer Maintenance</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
$(function () {
$('#custalert').bind('submit', function (e) {
if($("input:first").val() == "") {
alert("You must enter a Customer Alert");
return false;
}
});
});
$(function () {
$('#queryinv').bind('submit', function (e) {
if($('#sku_checkbox').is(':checked') == true) {
alert("You must enter a SKU");
return false;
}
});
});
</script>
</head>
<body>
<div data-theme='a' >
<div style="padding:10px 20px;">
<form action="inventory_inquiry.php" method="get" id="queryinv" >
<h3>Enter SKU</h3>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>Choose Input Type:</legend>
<input type="radio" data-theme="a" name="input" id="sku_checkbox" />
<label for="sku_checkbox">SKU</label>
<input type="radio" data-theme="a" name="input" id="entire_checkbox" />
<label for="entire_checkbox">Entire Inventory</label>
</fieldset>
<label for="sku" class="ui-hidden-accessible">SKU:</label>
<input type="text" name="sku" id="sku" value="" placeholder="Item SKU" data-theme="a">
<input name="customer_id" type="hidden" value='<?php echo $customer_id; ?>'/>
<button type="submit" data-theme="b">Submit</button>
</form>
</div>
</div>
<br>
<p>Home Page</p><hr>
<footer>Created by: attentionjay</footer>
</body>
</html>
Any help I could get would be great. This is a mystery to me.
EDIT: 7-1-2013
I thought that it would be worth updating what I found while solving this problem. Disabling the AJAX data works, but only for links. I had difficulty getting it to work on a form submission. I ended up disabling AJAX globally with the following script:
<script>$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});</script>
This script must be placed before the Jquery Mobile script on the page. This will disable the AJAX functionality for the entire page. AJAX is great and it should be used when possible. I had already set up the layout of my site before I discovered my problem. A site could more easily be retrofitted to make use of the Jquery Mobile functionality.
Try adding data-ajax="false" to your <a> tag whenever you are linking to a seperate php or html page.
jQuery mobile is designed for developers to put multiple pages int he same html or php file. So it uses ajax to link between those 'pages' which are really just divs. The issue with this is that, by default, jQuery mobile uses ajax for every link unless you state otherwise. This can create some cooky problems and it took me a while to understand when I first started with jQuery mobile. I think there's a pretty good doc about this topic in the JQM documentation.
adding
rel = "external"
works for me