I have several places that's returning empty and I am not sure why.
One place is using ajax. When an user clicks on the radio button, the value Y or N is sent upon clicking the radio button. When I go to my controller and do echo $_POST['vote']; it is always returning an empty value.
var value = $(this).val();
$.ajax( {
type: "POST",
url: url,
data: {'vote':value},
success: function(data){
alert(data);
}
})
Another place is when i do an ajax upload on a file using a form. On change of the upload field, it always return empty as well. So when I tried isset$_POST[Image] I am always getting a blank. It sees that all my file upload instance is blank.
So what would be the cause of these blanks? I also tried $_GET doesn't help much.
*****[EDIT]*********
<form id="vote-form" action="/some/path?r=shop/vote" method="post">
<input id="ytvote" type="hidden" value="" name="vote[hot_not]">
<span id="vote_hot_not">
<input class="fire-toggle" value="Y" type="radio" name="Vote[hot_not]" data-radio-fx="Vote[hot_not]" style="display: none;"><a title=" " data-radio-fx="Vote[hot_not]" class="radio-fx" href="#"><span class="radio"></span></a>
<label style="display:inline" for="Vote_hot_not_0"><img src=" /images/site/red-hot-not.png" id="hot-i"> </label>
<!--input class… fire-toggle-->
<input class="fire-toggle" value="N" type="radio" name="Vote[hot_not]" data-radio-fx="Vote[hot_not]" style="display: none;"><a data-radio-fx="Vote[hot_not]" class="radio-fx" href="#"><span class="radio"></span></a> <label style="display:inline" for="Vote_hot_not_1"><img src=” /images/site/hot-not.png" id="not-i"></label></span>
</form>
Now in my fire-toggle I have:
$(".fire-toggle").click(function() {
var value = $(this).val();
var url = "<?php echo Yii::app()->createUrl('shop/vote');?>";
$.ajax( {
type: "POST",
url: url,
data: {'vote':value},
success: function(data){
alert(data)
}
})
});
So value actually gives me the expected value..
and here in the controller... I simplified everything down to this:
$pid =Yii::app()->request->getQuery('id');
$uid = yii::app()->user->user_id;
$model = PrototypeReview::model()->getUserVote($uid, $pid);//also tried hard code numbers
$response = $_POST['vote']; //there's nothing in here!
echo $_POST['vote'];
Related
I am struggling to have multiple AJAX submitted forms on the same php page. I can get it to work with one, but when I add more, it just uses the first form all the time.
I have tried to make it unique but not sure exactly how to do this.
My code is below, if someone could please assist that would be fantastic.
I have looked at similar questions and answers on this site but can't seem to fathom how to make it work for mine.
The form should submit when the checkbox is checked or unchecked.
Thanks very much in advance for all your help.
Martyn.
HTML form
<form id="search_form" method="post">
<input readonly type="text" name="id" value=<?php echo $row1[0];?>>
<input readonly type="text" name="student" value=<?php echo $row1[1];?>>
<input readonly type="text" name="addedby" value=<?php echo $_SESSION['username'];?>>
<input readonly type="text" name="register" value="monday_morning">
<input <?php if($row1[4] == "Yes"){echo "checked";}?> type="checkbox" name="box" value="Yes">
</form>
Script
<script type="text/javascript">
$(document).on("change", '[type="checkbox"]', function () {
var url = "/register_update.php";
$.ajax({
dataType: "html",
type: "POST",
url: url,
data: $("#search_form").serialize(),
success: function (data) {
}
});
return false;
});
</script>
Try this
<script type="text/javascript">
$(document).on("change", '[type="checkbox"]', function (event) {
var url = "/register_update.php";
$.ajax({
dataType: "html",
type: "POST",
url: url,
data: $($(event.target).parent()).serialize(),
success: function (data) {
}
});
return false;
});
</script>
event.target returns the clicked checkbox.
parent() function returns the form you need to submit. This way you don't need to have unique form id.
In my code having two radio buttons in form like
<input type="radio" required="required" id="bt" name="bt" value="1" checked="checked" onclick="window.location='<?php echo $_SERVER['REQUEST_URI']; ?>';" /> <span>Test1</span>
<input type="radio" required="required" id="bt" name="bt" onclick="Clear()" value="2" /> <span>Test2</span>
when i click on Test2 radio button the form having value will clear, for that i wrote code its working fine
<script>
function Clear() {
document.getElementsByName("one")[0].value = "";
document.getElementsByName("two")[0].value = "";
document.getElementsByName("three")[0].value = "";
}
</script>
with this form with values cleared.But when i click on "Test1" radio button the form values will come automatically.right now iam sessions using
onclick="window.location='<?php echo $_SERVER['REQUEST_URI']; ?>';"
for this it is coming but page is refreshing how to take it this code to ajax, i mean need to get values when i click on radio button without refreshing the page
Yes you can use window.location.href in ajax as:
$.ajax({
type: 'POST',
async: false,
url: '/users',
contentType: 'application/json',
dataType: 'json',
data: JSON.stringify(payload),
success: function(data, textStatus, jqXHR){
console.log(jqXHR.status);
window.location.href= "/someUrl.html";
}
});
Note that: window.location.href will not reload the page if there's an anchor (#) in the URL
Here i wrote code for getting values of radio button without page refresh:
html code:
<input type="radio" name="bt" id="bt" onclick = "MyAlert()" value="blue"/>Blue <br/>
<input type="radio" name="bt" id="bt" onclick = "MyAlert()" value="red"/>Red
ajax script:
function MyAlert() {
var radio =$('input[type="radio"]:checked').val();
var pass_data = {
'radio' : radio,
};
$.ajax({
url : "radio-value.php",
type : "POST",
data: pass_data,
success : function(data) {
// alert radio value here
alert(data);
}
});
return false;
}
radio-value.php file:
<?php echo $bt =$_POST['radio']; ?>
Hope this helps.
I don't appear to have any data being sent when a form is submitted through jquery
A snippet of my issue (code reduced to simplify):
head:
<script>
function dSubmit(formName, formAction, fieldsToCheck, divToHide){
// No Errors process form
var url = formAction; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#" + formName).serialize(), // serializes the form's elements.
success: function(data)
{alert(data)}
});
return false; // avoid to execute the actual submit of the form.
}
</script>
body:
<a onclick="dSubmit('treatmentDetails','treatments/processTreatments.php','','')"><img style="width:35px;" src="i/update-icon.png"/></a>
<form name="treatmentdetails" id="treatmentdetails"
action="processTreatments.php" method="POST">
<input type="text" name="treatmentName" value="<?php echo $treatment;?>"/>
<input type="text" name="treatmentId" value="<?php echo $treatmentId;?>"/><br>
</form>
php (treatments/processTreatments.php):
$table = $dbPrefix."treatmentsOptions";
$treatmentId = $_POST['treatmentId'];
$treatmentName = $_POST['treatmentName'];
$query = mysql_query("UPDATE $table SET name='$treatmentName' WHERE id='$treatmentId'");
echo "variables = id: $treatmentId name: $treatmentName"; // according to jquery submit neither variable appear
You typo treatmentDetails, fix to treatmentdetails.
$("#treatmentDetails").serialize() is return empty string.
your correct code is:
<a onclick="dSubmit('treatmentdetails','treatments/processTreatments.php','','')"><img style="width:35px;" src="i/update-icon.png"/></a>
I'm generating tables of buttons with php
echo ' <td">
<form action="test.php" method="POST">
<input type="hidden" id="node" name="node" value="'.$fnode->{'name'}.'">
<input type="hidden" id="service" name="service" value="'.$flavor.'">
<input type="hidden" id="running" name="running" value="false">
<input type="submit" value="OFF" class="button">
</form>
</td>';
I want to send the values without reloading via jquery ajax and I'm using this code for it:
$(".button").click(function() {
$('.error').hide();
var dataString = 'node='+ document.getElementById('node').value + '&service=' + document.getElementById('service').value + '&running=' + document.getElementById('running').value;
$.ajax({
type: "POST",
url: "test.php",
data: dataString,
success: function() {
alert ("Success");
}
});
return false;
});
Code works so far - it just always sends the data from the first form. What is the best way to distinguish between all the buttons. I could use a counter in the form, but how would I exactly write the js "ifs".
Is there a more elegant way to do this. Number of forms is dynamic.
You can grab the parent form of the button clicked easily enough, but youll also probably want to have a unique ID on the form for other things. Also you need to either remove the ids on the inputs or make them unique.
echo ' <td">
<form action="test.php" method="POST" id="form_node_' . $fnode->{'name'} . '>
<input type="hidden" name="node" value="'.$fnode->{'name'}.'">
<input type="hidden" name="service" value="'.$flavor.'">
<input type="hidden" name="running" value="false">
<input type="submit" value="OFF" class="button">
</form>
</td>';
$(".button").click(function(e) {
e.preventDefault();
$('.error').hide();
var $form = $(this).closest('form'), // the closest parent form
dataString = $form.closest('form').serialize(); // serialize the values instead of manually encoding
$.ajax({
type: "POST",
url: "test.php",
data: dataString,
success: function() {
alert ("Success submitting form ID " + $form.attr('id'));
// you can now modify the form you submitted
}
});
return false;
});
The best way is to use unique IDs for form elements. Another way is to set classes to multiple elements with the same name.
However, the following approach is much preferable:
$("form").on("submit", function() {
$.ajax({
type: "POST",
url: "test.php",
data: $(this).serialize(),
success: function() {
alert ("Success");
}
});
return false;
});
(But anyway don't forget to remove duplicating id attributes from the form elements.)
You can give each submit buttons an id:
<input id="button-1" type="submit" value="OFF" class="button">
and then trigger the event on click of a specific button:
$("#button-1").click(function() { ... });
I have got this html/php in my index.php
if (isset($_POST['UploadMSub'])) {
$fileP=$_FILES['Upload_f'];
$fileP_name=$fileP['name'];
$fileP_tmp=$fileP['tmp_name'];
$fileP_size=$fileP['size'];
$fileP_error=$fileP['error'];
$fileP_extension=explode('.', $fileP_name);
$fileP_extension=strtolower(end($fileP_extension));
$allowed=array('jpg','png');
if (in_array($fileP_extension, $allowed)) {
if ($fileP_error===0) {
if ($fileP_size<=2097152) {
$fileP_new_name=uniqid().'.'.$fileP_extension;
}
}
}
$_SESSION['fileP']=$fileP;
$_SESSION['fileP_name']=$fileP_name;
$_SESSION['fileP_tmp']=$fileP_tmp;
$_SESSION['fileP_size']=$fileP_size;
$_SESSION['fileP_error']=$fileP_error;
$_SESSION['fileP_extension']=$fileP_extension;
$_SESSION['fileP_new_name']=$fileP_new_name;
}
<form method="post" enctype="multipart/form-data" class='SubmUploadFu'>
<textarea maxlength="400" type="text" class='Text' placeholder="New post"></textarea>
<input type="file" name="Upload_f" style="display:none;" id="Nameupload">
<label for="Nameupload" class='LabelCamerUp'>
<img src="../img/camera.png" class='CamerUp'>
</label>
<input type="submit" class="UploadMSub">
</form>
And this ajax
$(".UploadMSub").click(function() {
var text=$(".Text").val();
var file=$("#Nameupload").val();
$.ajax({
type: "GET",
url: '../connect.php',
data: "Text=" + text+"&&file="+file,
success: function(data)
{
alert(data);
}
});
return false;
});
connect.php
if (isset($_GET['Text'])) {
$Text=htmlspecialchars($_GET['Text'],ENT_QUOTES);
$file=htmlspecialchars($_GET['file'],ENT_QUOTES);
echo $Text." ".$_SESSION['fileP_new_name'];
}
But when i submit form it returns(alerts)
"Undefine index ''fileP_new_name'"
Is there any other way of getting all information about file in my connect.php?
The problem is,
When you hit the submit button, the form doesn't get submitted, which means none of your session variables are set when you hit the submit button. Instead jQuery script runs straight away when you hit the submit button, and that's why you're getting this error,
Undefine index: fileP_new_name
From your question,
Is there any other way of getting all information about file in my connect.php?
So the solution is as follows. You have to change few things in your code, such as:
Add a name attribute in your <textarea> element, like this:
<textarea maxlength="400" name="new_post" class='Text' placeholder="New post"></textarea>
Instead of returning false from your jQuery script, use preventDefault() method to prevent your form from being submitted in the first place, like this:
$(".UploadMSub").click(function(event){
event.preventDefault();
// your code
});
If you're uploading file through AJAX, use FormData object. But keep in mind that old browsers don't support FormData object. FormData support starts from the following desktop browsers versions: IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+.
Set the following options, processData: false and contentType: false in your AJAX request. Refer the documentation to know what these do.
So your code should be like this:
HTML:
<form method="post" enctype="multipart/form-data" class='SubmUploadFu'>
<textarea maxlength="400" name="new_post" class='Text' placeholder="New post"></textarea>
<input type="file" name="Upload_f" style="display:none;" id="Nameupload">
<label for="Nameupload" class='LabelCamerUp'>
<img src="../img/camera.png" class='CamerUp'>
</label>
<input type="submit" class="UploadMSub">
</form>
jQuery/AJAX:
$(".UploadMSub").click(function(event){
event.preventDefault();
var form_data = new FormData($('form')[0]);
$.ajax({
url: '../connect.php',
type: 'post',
cache: false,
contentType: false,
processData: false,
data: form_data,
success: function(data){
alert(data);
}
});
});
And on connect.php, process your form data like this:
<?php
if(is_uploaded_file($_FILES['Upload_f']['tmp_name']) && isset($_POST['new_post'])){
// both file and text input is submitted
$new_post = $_POST['new_post'];
$fileP=$_FILES['Upload_f'];
$fileP_name=$fileP['name'];
$fileP_tmp=$fileP['tmp_name'];
$fileP_size=$fileP['size'];
$fileP_error=$fileP['error'];
$fileP_extension=explode('.', $fileP_name);
$fileP_extension=strtolower(end($fileP_extension));
$allowed=array('jpg','png');
if (in_array($fileP_extension, $allowed)){
if ($fileP_error===0) {
if ($fileP_size<=2097152){
$fileP_new_name=uniqid().'.'.$fileP_extension;
}
}
}
// your code
//echo $fileP_new_name;
}
?>