Using AJAX to pass form values to a PHP page. Once the values are passed, i'm clearing the values of INPUT fields in the form. It works fine, but when i clear the input:date value the page gets Refreshed !
$('#form1').submit(function(){
var formdata = $(this).serialize();
$.ajax({
type:'POST',
url:'certification.php',
data:formdata
});
$(this).find('input:text').val('');
$(this).find('input:file').val('');
$(this).find('input:date').val(''); **On adding this line page gets Refreshed.**
return false;
});
Jquery does not support that selector.
so you getting.
Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: date
your code should look like:
$('#form1').submit(function(e){
e.preventDefault(); //this will prevent default action even if there is uncaught exeption.
var formdata = $(this).serialize();
$.ajax({
type:'POST',
url:'certification.php',
data:formdata
});
$(this).find('input:text').val('');
$(this).find('input:file').val('');
$(this).find('input[type="date"]').val('');
});
http://jsfiddle.net/bz3s6/
Related
HTML
<a id="1">Add to notebook</a>
<a id="2">Add to notebook</a>
<a id="3">Add to notebook</a>
<a id="4">Add to notebook</a>
...
<a id="40">Add to notebook</a>
JavaScript
<script>
$(document).ready(function(){
//callback handler for post submit
$("a").click(function(e)
{
var vocab_id = $(this).attr("id");
var formURL = 'http://localhost/test/test.php';
$.ajax(
{
url : formURL,
type: "POST",
data : vocab_id,
dataType : "text",
});
e.preventDefault(); //STOP default action
//e.unbind(); //unbind. to stop multiple form submit.
});
});
</script>
I have a list of hyperlinks, it will send the currently clicked value of id to the server end by clicking the respective link.
But the problem is
Back-end doesn't receive any post data at all.
People said that I should uncomment the e.unbind() to stop multiple submit, but I got error after that line was uncommented. Error message is like this.
Uncaught TypeError: undefined is not a function 2:479(anonymous function) 2:479n.event.dispatch jquery-1.11.0.js:3r.handle
The data part in jQuery.ajax() should be like either
data :{ name : vocab_id }
or
data : "name="+vocab_id
Syntax for unbind() is not correct use the following
$(this).unbind(e);
it will unbind the object from current event handler
Hope someone can help me..
i made my program more simpler so that everybody will understand..
i want my program to get the value of the without submitting, i know that this can only be done by javascript or jquery so I use the onChange, but what I want is when i select an option the value should be passed immediately on the same page but using php..
<select id="id_select" name="name" onChange="name_click()">
<option value="1">one</option>
<option value="2">two</option>
</select>
<script>
function name_click(){
value_select = document.getElementById("id_select").value;
}
</script>
and then i should pass the value_select into php in post method.. i dont know how i will do it.. please help me..
You cannot do this using PHP without submitting the page. PHP code executes on the server before the page is rendered in the browser. When a user then performs any action on the page (e.g. selects an item in a dropdown list), there is no PHP any more. The only way you can get this code into PHP is by submitting the page.
What you can do however is use javascript to get the value - and then fire off an AJAX request to a php script passing the selected value and then deal with the results, e.g.
$(document).ready(function() {
$('#my_select').on('change', do_something);
});
function do_something() {
var selected = $('#my_select').val();
$.ajax({
url: '/you/php/script.php',
type: 'POST',
dataType: 'json',
data: { value: selected },
success: function(data) {
$('#some_div').html(data);
}
});
}
With this code, whenever the selected option changes in the dropdown, a POST request will be fired off to your php script, passing the selected value to it. Then the returned HTML will be set into the div with ID some_div.
not sure ..but i guess ajax is what you need..
<script>
function name_click(){
value_select = $("#id_select").val();
$.post('path/to/your/page',{"value":value_select},function(data){
alert('done')
})
}
</script>
PHP
$value=$_POST['value']; //gives you the value_select data
Post with ajax as Alex G was telling you (+1) and then handle the post with PHP. You can define a callback in Javascript which will run when the page responds.
My suggestion go with jquery. Try with this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
<script>
$(document).ready(function(){
$("#id_select").change(function(){
var url = 'http:\\localhost\getdata.php'; //URL where you want to send data
var postData = {'value' : $(this).value};
$.ajax({
type: 'POST',
url: url,
data : postData,
dataType: 'json',
success: function(data) {
//
},
error: function(e) {
console.log(e.message);
}
});
})
})
</script>
In getdata.php
<?php
var $value = $_POST['value'];
// you can do your logic
?>
I have looked everywhere and can't seem to figure out where the problem in my code is.
I have a table with a radio button in php I need to get the ID of this button and use it in a sql query. I have used ajax to get the ID and can successfully alert the value I need, however the problem is I can not seem to get the ID value to post to the $_POST['id']; in PHP. It just stays blank. The code is all on the same page.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function()
{
$('table tr').click(function()
{
$(this).find('input[type=radio]').prop('checked', true);
var temp = parseInt($(this).find('input[type=radio]').attr("id"), 10);
++temp;
$.post(window.location, { 'IDENT': temp });
$.ajax({
type: "POST",
url: window.location,
data: {IDENT: temp},
});
});
});
</script>
This is my Javascript retrieving the value in which I can alert(temp) and see the desired result. However echo $_POST['IDENT']; stays empty.
Sorry if this an obvious question I am fairly new to both PHP and Javascript
$.post(window.location, { 'IDENT': temp }); //<----- IDENT: temp
$.ajax({
type: "POST",
url: window.location,
data: {IDENT: temp}, //<----- del comma
});
I started using jquery and jquery-ui. I am facing a problem trying to submit a form that is inside a tab. Once i hit 'submit', the page refresh itself, the tabs are gone, and the url is changed to the tab's function url. the submit button is working, and i get the desired result. However, it is not on the same page as the tabs.
Does anyone have any idea on how to keep the page from refreshing?
example of my problem:
I have a page called 'index.php' with 3 different tabs. one of the tabs is called 'submit form' where there I have a form using POST method, it is taking its source from 'form.php'. once i hit the 'submit' button, the page refreshes, the url changes from 'www.example.com' to 'www.example.com/form.php', i get the result there, but the page is "plain", means that its not under a tab, just a normal page.
I hope I explained myself correctly.
Thanks!
EDIT:
here is my submission code:
$submit = $_POST['submit'];
$name= $_POST['name'];
if($submit){
echo 'submitted <br><br>';
echo "hello $name";
}
Capture the form submission in jQuery and then stop it with preventDefault();
$(function(){
$('#formID').on('submit', function(e){
e.preventDefault();
var formSrc = $(this).attr('action');
var formMethod = $(this).attr('method');
var formData = $(this).serialize();
$.ajax({
url: formSrc,
type: formMethod,
data: formData,
success: function(data){
//work with returned data from requested file
alert(data);
}
});
});
});
EDIT:
i should add that I chose to use on(); as opposed to the default submit(). This is because the form may or may not be available at DOM.ready.
In answer to your 2nd question: "what if I wanned to run this information returned through a php code in the same tab, how could I do that?"
Have your php script return values as JSON like:
$row = mysqli_fetch_array($result,MYSQLI_ASSOC);
echo json_encode($row);
Then you can have javascript do whatever you wish with the returned values, such as -
$.ajax({
url: 'sc_getData.php?id=' + ID,
type:'GET'
})
.done(function(myData) { // data = array returned from ajax
myData = JSON.parse(myData);
for (var i in tFields){
thisSourceField = sFields[i];
thisTargetField = tFields[i];
targetID = '#' + thisTargetField;
thisValue = myData[thisSourceField];
$(targetID).val( thisValue );
console.log(targetID + ': ' + thisValue);
}
})
I've setup arrays for Target and Source Fields. The source field arrays match the field names returned by the php script while the target field arrays will match the form field id's to be filled with the returned values.
I have put together an ajax powered chat/social network with jquery, PHP - but am having problems with the javascript.
I have a js file in the main page which loads the php in a div container, the js file is underneath the div. But only one function for posting a msg seems to work but the others do not.
I have tried including the js file with the dynamically loaded php at the end of the ajax load the functions work fine but am getting mutiple entries of the same message/comment.
I am pretty sure its not the PHP as it seems to work fine with no ajax involvment. Is there a way to solve this?
this is the function that works fine:
$("#newmsgsend").click(function(){
var username = $("#loggedin").html();
var userid = $("#loggedin").attr("uid");
var message = $("#newmsgcontent").val();
if(message == "" || message == "Enter Message..."){
return false;
}
var datastring = 'username=' + username + '&message=' + message + '&uid=' + userid;
//alert(datastring);
$.ajax({
type: "POST",
url: "uploadmsgimage.php",
data: datastring,
success: function(data){
document.newmessage.newmsgcontent.value="";
//need to clear browse value too
$('.msgimage').hide('slow');
$('#addmsgimage').show('slow');
$(".usermsg").html(data);
$("#control").replaceWith('<input type="file" name="file"/>');
$(".msgimage").remove();
}
});
});
And this is one of them that does not work:
//like btn
$(".like").click(function(){
var postid = $(this).attr("pid");
var datastring = 'likeid=' + postid;
$.ajax({
type: "POST",
url: "addlike.php",
data: datastring,
success: function(data){
$(".usermsg").html(data);
}
});
});
From your post, I'm guessing that each message has a "Like" button, but you have 1 main submit button. When messages load dynamically, you have to assign the .like to each one when they come in, otherwise it will only be assigned to the existing messages.
The problem, from what I gather (and this is a guess) would probably be fixed using live so jQuery will automatically assign the click function to all messages including dynamically loaded messages; so instead of:
$(".like").click(function(){
Try this:
$(".like").live('click', function(){
If that doesn't solve the problem, then I'm probably not understanding what it is.