<?php
if (!empty($_FILES)){
echo "<pre>";
echo $_FILES['file']['type'];
echo "</pre>";
return;
}
?>
<script type="text/javascript">
function autoUpLoad(){
$("#txtHint").html("<center><img src='include/images/loader.gif' />Reading selected file...</center>");
$(document).ready(function(){
$("#file").change(function(){
$("#myForm").submit(function(data){
$("#txtHint").html(data);
});
});
});
}
</script>
<form id="myForm" method="post" enctype="multipart/form-data">
<input type="file" name="file" id = "file" onchange='autoUpLoad()'/>
<input type="submit" value="Send" />
</form>
<div id="txtHint">
test
</div>
The above code is not working and I am not sure what is wrong here? It works only if I remove these lines:
function(data){
$("#txtHint").html(data);
}
It just doesn't allow me to return data to txtHint. Can anyone explain to me how to make it work?
You are binding a submit event, not fire it.
.submit() method with a callback as parameter is used to bind submit event, without parameter to fire the submit event.
You should do something like below:
$(document).ready(function () {
$("#myForm").submit(function (data) {
$("#txtHint").html(data);
});
$("#file").change(function () {
$("#myForm").submit();
});
});
Related
i have two php files home.php and ajax.php. i have two buttons on home.php. when they are clicked the according php functions in ajax.php should get called.
home.php
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function(){
$('.button').click(function(){
var clickBtnValue = $(this).val();
var ajaxurl = 'ajax.php';
data = {'action': clickBtnValue};
$.post(ajaxurl, data, function (response) {
// Response div goes here.
alert("action performed successfully");
});
});
});
</script>
</head>
<body>
<form action='ajax.php' method="POST">
<input type="submit" class="button" name="insert" value="insert" />
<input type="submit" class="button" name="select" value="select" />
</form>
</body>
</html>
ajax.php
<?php
echo 'this was called';
echo $_POST['action']; //THROWS AN ERROR undefined index 'action'
if ( isset( $_POST['action'] ) ) {
switch ($_POST['action']) {
case 'insert':
insert();
break;
case 'select':
select();
break;
}
}
function select() {
echo "The select function is called.";
exit;
}
function insert() {
echo "The insert function is called.";
exit;
}
?>
the problem is the json data i assign to data property in jquery code will not get passed to the ajax.php. Is there any reason why it doesn't not pass it?
here is my youtube video on the error video
There are two possibilities, depending of what you want to achieve afterwards.
Eighter you stick on doing a backgroud ajax-call to ajax.php and then do with the response whatever you want (that's what I'd suggest):
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function(){
$('.button').click(function(){
var clickBtnValue = $(this).id(); // changed to id here!
var ajaxurl = 'ajax.php';
data = {'action': clickBtnValue};
$.post(ajaxurl, data, function (response) {
// Response div goes here.
console.log(response); // log what the response is
alert("action performed successfully and the resonse is: \n"+response);
// do with that data whatever you need
});
});
});
</script>
</head>
<body>
<!-- changed to buttons, removed the form -->
<button class="button" id="insert">insert</button>
<button class="button" id="select">select</button>
</body>
</html>
or you submit the form and output on screen the response from ajax.php:
<html>
<head>
<!--script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script-->
<script type='text/javascript'>
// no need for any javascript then
</script>
</head>
<body>
<form action='ajax.php' method="POST">
<input type="submit" class="button" name="insert" value="insert" />
<input type="submit" class="button" name="select" value="select" />
</form>
</body>
and in ajax.php:
<?php
echo 'this was called';
if ( isset( $_POST['insert'] ) ) {
insert();
}
if ( isset( $_POST['select'] ) ) {
select();
}
function select() {
echo "The select function is called.";
exit;
}
function insert() {
echo "The insert function is called.";
exit;
}
?>
try
$.post(ajaxurl, data)
.done(function( r ) {
alert("action performed successfully");
});
I like to use the jQuery on() and to be sure post has worked, I moved in your variables as such. Also you can try to do console.log(clickBtnValue) after the click to be sure you are able to see the value itself. After confirming, the post() should send that value into action post param.
<script type='text/javascript'>
$(document).ready(function(){
$('.button').on('click',function(){
var clickBtnValue = $(this).val();
var ajaxurl = 'ajax.php';
$.post(ajaxurl, {action:clickBtnValue}, function (response) {
alert("action performed successfully");
});
});
});
</script>
If you need to do a ajax call, remove the following part from the home.php
<form action='ajax.php' method="POST">
</form>
I think you are messed up with Ajax technology and the form post mechanism.
I have a form where I use a GET/IMPORT button to get values from other document and into the current form as shown below. Previously I had set fix value: $file = '/user/doc.xml'; inside meta.php so when I pressed the GET/IMPORT button it got the results from the /user/doc.xml file.
Now I have added <input name="file" value="" /> to this form and want to send path to $file using this filed. I know when I press GET/IMPORT button then meta.php file is called.
So my question is: How can I send $file value/path to meta.php using this input field.
Here is my script and the $file input field:
<form id=file method="POST" >
<input name="file" value="" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.button').click(function() {
$.get('meta.php', function(data) {
result = $.parseJSON(data);
$("input[name='nick_name']").val(result.avaname);
$("#age").val(result.tavaage).attr("selected","selected");
});
});
});
</script>
<input class="button" type="button" value="GET/IMPORT" />
</form>
Thank you for all help.
Just get the value from the input field and add it to the querystring of the url. Then in meta.php you can read the filename from the request parameters and load that file.
Don't forget to validate the filename.
<input name="file" type="text" id="file">
<script type="text/javascript">
$(document).ready(function() {
$('.button').click(function() {
var val = $('#file').val();
$.get('meta.php', {file: val}, function(data) {
var result = $.parseJSON(data);
$('input[name="nick_name"]').val(result.avaname);
$('#age').val(result.tavaage).attr('selected', 'selected');
});
});
});
</script>
<input type="button" class="button" value="GET/IMPORT">
Then in your meta.php you can get the the filename with $_GET['file'].
Hope it helps
You can use the $.get method with "data" like this :
$(document).ready(function() {
$('.button').click(function() {
$.get('meta.php', {file: $('input[name="file"]').val()}; function(data) {
result = $.parseJSON(data);
$("input[name='nick_name']").val(result.avaname);
$("#age").val(result.tavaage).attr("selected","selected");
});
});
});
I have a form for Tags that is working OK, with some server validation, I would like to add a Jquery to submit the content without refreshing:
<form method="post" action="tags">
<div>
<input type="hidden" name="id" value="getId()" />
<input type="text" name="tag" />
<input type="submit" value="Add" name="add" />
</div>
</form>
Any advice will be highly appreciated.
Check out the jQuery Form Plugin. Using it, you can submit a form without reloading the page like so:
<form id="aForm" action="target.php" method="post>
...
</form>
<script type="text/javascript">
$(document).ready(function() {
$("#aForm").ajaxForm();
});
</script>
The ajaxForm() function also supports all options (such as a callback function) that can be passed to the standard jQuery $.ajax function.
$(document).ready(function() {
$(form).submit( function() { // could use $(#submit).on('click', function(){ as well
$.ajax({
url: 'yourposturl',
data: $(form).serialize(),
Success: function() {
alert('ok');
}
}); //end ajax
return false;
}); //end submit()
});
Should take all form vars , serialize them so the server can receive, the return false is so page doesnt refresh on submit (stops propagation and default)
Add the JQuery javascript library
Turn the submit into a button
<button id="submitbutton" >Add</button>
Add ids to your inputs
<input type="text" id="tag" name="tag" />
And add the jquery to the click for the button ...
<script type="text/javascript">
$(document).ready(function() {
$("#submitbutton").button().click(function(){
$.post("tags.php",{id: $("#id").val(), tag: $("#tag").val()});
});
});
</script>
<form method="post" action="tags">
<div>
<input type="hidden" name="id" value="getId()" />
<input type="text" name="tag" />
<input class="button" type="button" value="Add" name="add" />
</div>
</form>
$(function(){
$('.button').click(function(){
var data = $('form').serializeToObject();
$.post('tags.php', data);
});
});
// jQuery Extension to serialize a selector's elements to an object
$.fn.serializeToObject = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
I want to validate my form on button click.
For that I used ("#trade").validate();.
But My problem is that when user click on my button so it's call one more function which post my data.
<input type="button" class="button" value="Save" onClick="create_trade();">
I used
<script type="text/javascript">
$(document).ready(function(){
$("#trade").validate();
});
</script>
Now how will I validate this form.
After form validation, you call the function create_trade(), in the submitHandler event.
<script type="text/javascript">
$(document).ready(function(){
$("#trade").validate({
submitHandler: function(form) {
create_trade();
}
});
});
</script>
use form tag's onsubmit attribute.
like this <form onsubmit="return validate()"
This will not submit form data if the function returns true so make sure you return true only if your validation is done otherwise return false from the function so that your form data will not be submitted.
<form name="form1" method="post" action="">
<input type="button" class="button" name="save" value="Save">
</form>
<script>
function fn_submit()
{
document.form1.submit();
}
</script>
try this....
Try this code if you want to call the validation function on clicking the button
<script type="text/javascript">
$(document).ready(function(){
$("input[type=button]").click(function() {
//validation code
});
});
</script>
I have this code :
<script type="text/javascript">
$(document).ready(function() {
$('a[name=linkArtist]').click(function(e) {
e.preventDefault();
$('#changeArtist').val($(this).attr('title'));
});
});
</script>
<form action="index.php?explore=browse" method="post">
<input type="hidden" id="changeArtist" name="artist" value="<?=$artist?>" />
<a name="linkArtist" title="a" href="#">A</a> -
<a name="linkArtist" title="b" href="#">B</a> -
<a name="linkArtist" title="c" href="#">C</a>
</form>
When I click on the button, I set the link value (as 'title') to the hidden field, and after I'd like to send that form! How can I do it? And what do you think about this code? Can I better it?
JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$('a[name=linkArtist]').click(function(e) {
e.preventDefault();
$('#changeArtist').val($(this).attr('title'));
$('#myForm').submit();
});
});
</script>
The form:
<form action="index.php?explore=browse" method="post" id="myForm">
Note the form id and the change to the click handler to access it.
I don't think you need to use preventDefault() at all. The form should not submit until the function has returned.