I have an html form and when the user chooses a file and submits it the $_FILES in the php document doesn't receive the it. The main focus is the form, when I hit submit no file gets submitted but the onclick event fires. and there are no error messages
<form id="artist_post" enctype="multipart/form-data" method="post" onsubmit="return " action="php_parsers/newsfeed_system.php">
<textarea id="statustext" onkeyup="statusMax(this,250)"></textarea>
<input type="hidden" name="MAX_FILE_SIZE" value="30000" />
<input id="audioUpload" type="file" name="audioUpload" accept="audio/*" />
<input type="submit" value="Post" id="statusBtn" onclick="postToStatus('status_post','a','statustext')"/>
</form>
Here is the php doc, I'm just trying to see if the file is getting uploaded
if (isset($_FILES["audioUpload"]["name"])) {
echo "flag1";
}
if ($_FILES["audioUpload"]["tmp_name"] != "") {
echo "flag2";
}
The javascript takes the information from the form and sends it to php through ajax.
function postToStatus(action,type,ta){
var data = _(ta).value;
if(data == ""){
alert("Type something first");
return false;
}
// Checks to see if user uploaded a file to send with post
if(_("audioUpload").value != "") {
type = "c";
}
_("statusBtn").disabled = true;
var ajax = ajaxObj("POST", "php_parsers/newsfeed_system.php");
ajax.onreadystatechange = function() {
if(ajaxReturn(ajax) == true) {
//Pull some info from whatever the php doc returns
}
}
ajax.send("action="+action+"&type="+type+"&data="+data);
}
function ajaxObj(meth, url) {
var x = new XMLHttpRequest(); // create new http request
x.open( meth, url, true ); // open request and pass it a method and a url to post it to
x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
return x;
}
// Modular function that externalizes readyState and status check
function ajaxReturn(x) {
if(x.readyState == 4 && x.status == 200) {
return true;
}
}
Your <form action="..."> needs to be removed. You are using AJAX and are therefore bypassing the form action sequence all together. I have created a replica of this on my server and it works without that there.
I would recommend throwing it into a JSFiddle now and again and hitting the "Tidy" button up top. Otherwise, well done on the code so far.
In case you wanted to see my duplicate copy in action: click here
Related
I need the name and value of a button (Not an input type = submit) when a form is submitted with the button of type submit.
I know everyone always asks why, even though the "why" is not a part of the answer to the question so I will answer the why to save time. I want a form to direct a person to choose to login, register or submit email verification. So having buttons that I can set the label for, with each have a unique value for a given name would solve this need but the name and values are not included in the POST with the rest of the input data when BUTTON type = submit is used.
Given the information in HTML5 Spec as shown on this site https://www.htmlquick.com/reference/tags/button-submit.html it seems like it's supposed to work. But short of adding javascript to manually add the key value pair to the post on click it doesn't seem to work.
Now, I want to ask why? If only inputs can be added to the data list then why isn't there an option to change the label of the submit inputs?
*EDIT
So far everyone agrees that what I've done should work, so lets get to the specific case and see if we can find where the problem is then.
Using this form:
<form data-targetblock="accountBlock" class="fetchForm" action="<?=ADDRESS ?>/MAINhubs/accountBlockHub.php" method="post">
<fieldset>
<legend>Member Login</legend>
<input type="hidden" name="formTarget1" value="test">
<button type="submit" name="formTarget" value="login">Log In</button>
<button type="submit" name="formTarget" value="register">Register</button>
<button type="submit" name="formTarget" value="verify">Verify Your Email</button>
</fieldset>
</form>
Sent with this:
function addFetch(event, targetBlock, domain)
{
event.preventDefault();
const form = new FormData(event.target);
const request = new Request(event.target.action,
{
method: event.target.method,
body: form,
mode: 'same-origin',
credentials: 'same-origin'
});
fetch(request)
.then(response => {
if(response.ok)
{
return response.text();
}
else
{
document.getElementById(targetBlock).innerHTML = 'ERROR! ERROR! There has been an ERROR!'
}
})
.then(function(text){document.getElementById(targetBlock).innerHTML = text;})
.catch(error => console.log('There was an error:', error))
}
Going to this:
<?php
session_start();
if ($_SERVER['REQUEST_METHOD'] === "POST")
{
var_dump($_POST);
}
?>
Gets me this when I click Log In:
formTarget1 = test
I'm gonna guess it has to do with this line in the Fetch:
const form = new FormData(event.target);
To answer the question of how the function is called, this JS is run to add the function to all applicable forms:
function fetchFormCallback(mutations)
{
mutations.forEach(function(mutation)
{
for (const thisForm of Array.from(document.getElementsByClassName('fetchForm')))
{
addFormListener(thisForm, thisForm.dataset.targetblock)
}
});
}
function generalCallback(mutations)
{
mutations.forEach(function(mutation)
{
// Take alertBlocks and move them to bottom of ID outerFrame because of IOS bug
if (newAlertBlock = document.getElementById('alertMessageBlock'))
{
if (newAlertBlock.dataset.relocated !== 'true')
{
var destinationBlock = document.getElementById('outerFrame');
destinationBlock.appendChild(newAlertBlock);
newAlertBlock.dataset.relocated = 'true';
}
}
// Get getElementsByClassName closeButton
for (var closeButton of Array.from(document.getElementsByClassName('closeButton')))
{
if (closeButton.dataset.closeButton !== 'true')
{
closeButton.dataset.closeButton = 'true';
closeButton.addEventListener('click', function(){this.parentNode.parentNode.removeChild(this.parentNode);});
}
}
// Potentially auto close based on a closeButton class of AUTO
});
}
document.addEventListener("DOMContentLoaded", function()
{
var config = {childList: true};
for (const thisForm of Array.from(document.getElementsByClassName('fetchForm')))
{ // setup all fetchforms
addFormListener(thisForm, thisForm.dataset.targetblock);
var thisTargetBlock = document.getElementById(thisForm.dataset.targetblock);
// if notset dataset.mutationobserver OR
if (thisTargetBlock.dataset.mutationobserver !== 'true')
{
thisTargetBlock.dataset.mutationobserver = 'true';
var observer = new MutationObserver(fetchFormCallback);
observer.observe(thisTargetBlock, config);
}
}
config = {childList: true, subtree: true};
var generalObserver = new MutationObserver(generalCallback);
generalObserver.observe(document, config);
});
function addFormListener(form, targetBlock)
{ // first check if element has attribute set for eventListeners
if (form.dataset.submitlistener !== 'true')
{
form.dataset.submitlistener = 'true';
form.addEventListener('submit', function()
{
addFetch(event, targetBlock);
});
}
}
EDIT:
We've confirmed that the issue here is that FormData is for some reason not supposed to include the submit value. Why a value should be excluded just because it may not be present/needed in the use case is beyond me. I do have a reason why it should be included and have documented it above. I developed this structure to be as universally applicable as possible without the addition of code for special case uses.
So now my evolving question has become this:
How; using the above functions, can I get the value of the clicked submit button, and include that name value pair in the FormData without changing the fundamental structure of these functions that otherwise do exactly what I want them to do in every other case.
This discussion illustrates that it's possible but has been reworked based on the spec to no longer do exactly what I'm trying to do:
FormData() object does not add submit-type inputs from form, while on Firefox
If I can't access the name and value of the button at the point of submition, then I might as well make another eventlistener to all BUTTON elements in forms that adds a hidden input with it's values on click... Before I go and do that, I can already see hurdles like the event.preventDefault(); line in the addFetch function might prevent the on click from happening? I guess it's back to trial and error unless someone has a better thought.
In your PHP:
$_POST['formTarget'];
Will have the value of the submit button. Either login, register, etc.
However I would not use a form for this, there is no need. I would just simply use links and style them as buttons if you wanted them to look like a button.
Edit: Based on your additions to the post. I offer an alternative way to accomplish this using data attributes.
HTML:
<fieldset>
<legend>Member Login</legend>
<button id="loginButton" data-url="getForm.php" data-target-block="#showForm" data-form-type="login">Log In</button>
<button id="registerButton" data-url="getForm.php" data-target-block="#showForm" data-form-type="register">Register</button>
<button id="verifyButton" data-url="getForm.php" data-target-block="#showForm" data-form-type="verify">Verify Your Email</button>
</fieldset>
<div id="showForm"></div>
<script>
document.querySelector("#loginButton").addEventListener("click", addFetch);
document.querySelector("#registerButton").addEventListener("click", addFetch);
document.querySelector("#verifyButton").addEventListener("click", addFetch);
function addFetch() {
const data = new FormData;
const targetBlock = this.dataset.targetBlock;
for(element in this.dataset) {
data.append(element, this.dataset[element]);
}
const request = new Request(this.dataset.url,
{
method: "POST",
body: data,
mode: 'same-origin',
credentials: 'same-origin',
});
fetch(request).then(response => {
if(response.ok) {
return response.text();
} else {
document.querySelector(targetBlock).innerHTML = 'ERROR! ERROR! There has been an ERROR!'
}
}).then(function(text){document.querySelector(targetBlock).innerHTML = text;})
.catch(error => console.log('There was an error:', error))
}
</script>
PHP:
<?php
if ($_SERVER['REQUEST_METHOD'] === "POST") {
switch($_POST['formType']) {
case 'verify':
echo "verify Form";
break;
case 'register':
echo "Register Form";
break;
case 'login':
echo "Login Form";
break;
default:
echo "Not valid";
break;
}
}
Is there a php way to validate a form that goes submitted to another page before submitting and stay on same page if fields are not valid or if everything valid send post data to another page?
Example would be:
I am on page somesite.com/orderitems and there would be form like
<form method="post" id="orderform" action="somesite.com/shoppingcart">
<input type="number" name="numitems" id="numitems" value="1">
<input type="date" name="date" id="date">
</form>
So google chrome for example already knows to validate if you put in input field required value and to validate date and number fields. I have also a jquery datepicker so user can select date easily, and also jquery validator to validate fields before submit, but all this can be overridden and/or fail at some point.
So end point would be validation in php when form is submitted.
But what i am stumbled upon is that i can't use GET request in getting data on somesite.com/shoppingcart so i must send POST to that page, but if some of the field fail to validate, like wrong date or wrong date format, than i shouldn't even go (redirect or post) to somesite.com/shoppingcart, instead i should stay on the page somesite.com/orderitems and display the errors.
So is there a solution to something like this, what suggestions would you recommend. Can i post form to the same page and validate fields if, all is good than redirect to another page and pass POST data, or stay on same page and display error?
I will show you how this can be done via JavaScript/Ajax and PHP. I think it won't be difficult to learn doing it from this tutorial, but if some questions arise I am ready to help you.
JavaScript/Ajax request
First of all, we need to add "Submit" button to form and set "sendData()" function as its "onclick" listener. Which means each time you click on "Submit" button, "sendData()" function will execute. Also, we need to add 'class' attribute to 'number' and 'date' input elements, to get their values in more cleaner way.
<form method="post" id="orderform" action="somesite.com/shoppingcart">
<input type="number" class='myForm' name="numitems" id="numitems" value="1">
<input type="date" class='myForm' name="date" id="date">
<input type="Submit" value="Send" onclick = sendData(); return false;"/>
</form>
<script type="text/javascript">
function sendData()
{
var formElements = document.querySelectorAll(".myForm"); // We use 'class' attribute to get form elements (number and date).
var formData = new FormData(); // we create FormData object with which we can send data to "PHP" script (server side).
for(var i = 0; i < formElements.length; i++)
{
formData.append(formElements[i].name, formElements[i].value);
}
//AJAX Starts Here
var xmlHttp = new XMLHttpRequest(); // Create "ajax" object
xmlHttp.onreadystatechange = function() //This is to wait for response from your PHP script
{
if(xmlHttp.readyState === 4 && xmlHttp.status === 200) //And when status is OK use result
{
var responseText = xmlHttp.responseText; //here you save your response from server side.
if(responseText["Status"] === "OK") //if you send from server side that "Status" is OK, then you can go to that page
{
window.location.href = "somesite.com/shoppingcart";
}
else //otherwise you refresh page
{
window.location.reload();
}
}
}
xmlHttp.open("POST", "somesite.com/shoppingcart"); //set page value, where you want to send form values
xmlHttp.send(formData); //send actual data
}
</script>
PHP validation (to avoid manipulation/override on client-side)
When you validate values in server-side, set $_SESSION["Status"] = "OK".
After that if someone tries to "hack" your page and "change" your JavaScript functions to navigate to somesite.com/shoppingcart page, you will check:
somesite.com/shoppingcart
<?php
if($_SESSION["Status"] === "OK"])
{
//give permission
}
else
{
return false;
}
?>
i am also facing this problem. and i solve it by doing this
UPDATE
$(document).ready(function () {
$('#orderform').validate({
rules: {
numitems: {
required: true,
number: true
},
date: {
required: true,
date: true
}
}
});
$('#orderform input').on('keyup blur', function () {
if ($('#orderform').valid()) {
$("#button1").removeClass("submit");
//TRIGGER FORM
//$('#orderform').submit();
}
});
});
.submit{
user-select: none;
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.js"></script>
<form method="post" id="orderform" action="somesite.com/shoppingcart">
<input type="number" name="numitems" id="numitems"><br/>
<input type="date" name="date" id="date"><br/>
<span class="submit" id="button1">SUBMIT</span>
</form>
i Hope it helps.!
I'm trying to validate a form using Ajax and onchange function. Basically I want automatic validation once the focus is gone from the input box. Then it will state an error if it's blank / invalid entry.
For some reason the validation works for invalid entries but won't work for empty inputs on first try (meaning if i refresh page and go to second field box by tab, there's no error). The funny thing is the empty error works fine after i erase an entry. I've tried using $var = "" or empty($var) but I still get the same results.
Here's the php part:
if(isset($_GET["isbn"]) )
{
$isbn = $_GET["isbn"];
$error="";
if(empty($isbn) || !preg_match("/^\d{12}$/", $isbn) )
{
$error .= "Please enter a valid ISBN";
echo $error;
}
else
echo $error;
}
Here's the rest:
<script type="text/javascript">
function validateIsbn(keyword)
{
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.status == 200 && xhr.readyState == 4)
{
var res = xhr.responseText;
document.getElementById("err1").innerHTML = res;
}
}
xhr.open("get","validate_isbn.php?isbn=" + keyword,true);
xhr.send();
}
</script>
<form method="get" action="">
<label class="top-label">ISBN:</label>
<input name="isbn" id="isbn" type="text" onchange="validateIsbn(this.value)"/>
<div id="err1"> </div>
<p></p><p></p>
You say you want automatic validation once the focus is gone from the input box. The event triggered in that case is onblur, not onchange.
I have a multi page form (pages separated with hidden divs)
All of it is wrapped in form tags, with a submit button. However when the user clicks the submit button at the end, it will check certain criteria on the form. If all good, it will allow the form to submit, else it will preventDefault().
However in IE8+ (maybe lower too), it simply never submits the form. I have console.log'd the JS, and it fires where it should, just IE doesn't submit the form.
I then added a $('#form').submit() call to manually submit it, which it did, but no data got sent...
Any ideas? Sorry if this is a bit vague.
Html
<form method="POST" action="/members/transfer_manager.php" name="f1" id="TM_MainForm">
** Loads of form fields & table structure **
<input type="submit" class="TM_Button" id="TM_submitTransfer" name="save" value="Transfer my account{if $isclientaresellerVAL}s{/if} »" />
</form>
JavaScript
$('#TM_submitTransfer').click(function(e)
{
console.log($.TM_submitTransferERR);
// Submit the form? Let's check first matey.
$.TM_submitTransferERR = false;
if(($('#TM_Movedate').val() == '') && (!$('#TM_MoveNow').is(':checked')))
{
$('#TM_MoveDate_ERR').html($.ObjectER + "Please choose");
$.TM_submitTransferERR = true;
}
console.log($.TM_submitTransferERR);
// Check we have some…
// Set the # of xfers
var rsxfers = $("#TM_UsernamesSubACCTSTAGC").tagit("assignedTags");
var fsxferssplitLGNTH = rsxfers.length;
var OnlySubAccts = $('#TM_only_sub_accounts').prop("checked");
console.log($.TM_submitTransferERR);
if((OnlySubAccts == true) && (fsxferssplitLGNTH < 1))
{
alert("You have not chosen any accounts to transfer");
$.TM_submitTransferERR = true;
}
console.log($.TM_submitTransferERR);
// Check TOS
if(!$('#TM_Tos').is(':checked'))
{
// Show error?
$('#TM_Tos').focus();
$.TM_submitTransferERR = true;
}
console.log($.TM_submitTransferERR);
// Error, return false.
if($.TM_submitTransferERR === true)
{
console.log("Don't do it!");
console.log($.TM_submitTransferERR);
e.preventDefault();
return false;
}
console.log($.TM_submitTransferERR);
console.log("do it!");
$('#TM_MainForm').submit();
return true;
});
Why is this not working? When the Ajax code IS NOT wrapped in function xmlhttpGet() it does work: PHP returns the called page and inserts it into the DIV. In this code i have wrapped the code into the function xmlhttGet() amd nothing happens. The requested page is not loaded into the DIV.
<html><head><title>AJAX GET </title>
</head><body><center />
<h1>Loading a web page into a DIV</h1>
<FORM id="form" method="post" action="">
<b> Enter argument: </b>
<input size="40" name="q" id="q" value="">
<INPUT TYPE="submit" id="submit" VALUE="Submit" onClick="xmlhttpGet(this.form)">
<INPUT TYPE="reset" VALUE="Reset">
</FORM>
<div id='info'>This sentence will be replaced</div>
<script>
function xmlhttpGet(form)
{
nocache = "&nocache=" + Math.random() * 1000000
request = new ajaxRequest()
var $q = form.q.value
request.open("GET", "urlget.php?url=amazon.com/gp/aw" + nocache, true)
request.onreadystatechange = function()
{
if (this.readyState == 4)
{
if (this.status == 200)
{
if (this.responseText != null)
{
document.getElementById('info').innerHTML =
this.responseText
}
else alert("Ajax error: No data received")
}
else alert( "Ajax error: " + this.statusText)
}
}
}// END xmlhttpGet
request.send(null) ;
function ajaxRequest()
{
try
{
var request = new XMLHttpRequest()
}
catch(e1)
{
try
{
request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch(e2)
{
try
{
request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch(e3)
{
request = false
}
}
}
return request
}// ajaxRequest
</script></body></html>
[EDIT]
the onClick is triggered fine. I have verified by inserting alerts into the functions.
[EDIT2]
i suppose it would help if i show the PHP bit too
<?php // urlget.php
if (isset($_GET['url'])) {
echo file_get_contents("http://".sanitizeString($_GET['url']));
}
else {
echo "problem!" ; // [edited line]
}
function sanitizeString($var) {
$var = strip_tags($var);
$var = htmlentities($var);
return stripslashes($var);
}
?>
you have to call xmlhttpGet() somewhere in ur script to get it to 'run'
When your code is not wrapped in a function, it will simply execute as the code is parsed by the browser.
Once you wrap it in a function, it will not execute until the function is explicitly called.
If you want to get the script to run automatically, try changing your body tag to:
<body onload='xmlhttpGet();'>
If you want to fire the function with user interaction, use one of the many events such as onclick or onmouseover or onmousedown
Your xmlhttpget function should start as:
function xmlhttpGet(form)
{
... as it is you're referencing the variable form in the function (eg var $q = form.q.value) but never assigning it a value (so it's being created/pulled from global scope).
The scope of this in your function for onreadystatechange will vary wildly depending on browser and how it's called - not a good design decision, try replacing this with request in the function.