I have such code
<form>
<input type="text" value="" name="someval">
<button id="ajax-button">ajaxButton</button>
</form>
<script>
$(document).ready(function(){
$('#ajax-button').click(function(e){
e.preventDefault();
$.ajax({
type: "GET",
url: "action.php",
data: { text : $('input[name=someval]').val() },
dataType: "text",
success: function (data){
alert(data);
}
});
});
});
</script>
Now I try to echo the Ajax returned value in php.
I try
echo json_encode($text);
echo $text;
echo $_GET['text'];
Al are wrong.
How to get it in PHP.
Thanks
Set attributes for the form to get semantic correct html
<form action="action.php" id="someForm" method="POST">
<input type="text" value="" name="someval">
<select id="someSelect">
<option value="some_1">some 1</option>
<option value="some_2">some 2</option>
<option value="some_3">some 3</option>
</select>
<button id="ajax-button">Send</button>
</form>
Your script
<script>
$(function(){
var form = $("#someForm"),
select = $("#someSelect"),
url, formData;
form.submit(function(event){
event.preventDefault();
url = form.attr("action");
formData = form.serializeArray();
$.post(url, data, function(response){
console.log($.parseJSON(response));
});
});
select.change(function(){
url = form.attr("action");
formData = form.serializeArray();
$.post(url, data, function(response){
console.log($.parseJSON(response));
});
});
});
</script>
Your php file(path to file set in action attribute of the form).
<?php
var_dump($_POST);
?>
Use data: 'text=' + $('input[name=someval]').val() , instead. And in PHP you can directly access it using echo $_GET['text']; only without the need of json encoding it.
Otherwise the syntax of json is data: { "text" : $('input[name=someval]').val() },.
Related
how to clear form after submit the form and pass the data to php file without reloading page...the form data is pass the php file and it stored the data base.but i was unable to clear the form data after submit the form.if i reset the form using javascrip but data not pass the data base.if i pass the data to php the form is not clear.is there a way for me achive both target?thank you..
here my snipt code...
<iframe name="votar" style="display:none;"></iframe>
<form action="confirm.php" id="sfm" method="POST" target="votar">
<input type="text" placeholder="Name" name="name" value="" required/>
<input type="submit" value="Submit My Project " />
</form>
Using AJAX you can do this.
$('#submitBtn').click(function () {
$.ajax({
url: 'confirm.php',
data: $('#sfm').serialize(),
type: "post",
success: function (data) {
$('input[type="text"]').val('');
}
});
return false;
});
you can try this
in index.php
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'get',
url: 'ajax.php',
data: $('form').serialize(),
success: function (data) {
$('#name').val('');
alert('data');
//your return value in data
}
});
});
});
</script>
</head>
<body>
<form action="ajax.php" id="sfm" method="POST" target="votar">
<input type="text" placeholder="Name" name="name" id="name" value="" required/>
<input type="submit" value="Submit My Project " />
</form>
</body>
</html>
and in ajax.php
<?php
$name = $_GET['name'];
//do what you want to do using name
echo "what you need to return";
Have you thought about to use Ajax to handle the form submit?
Form submit with AJAX passing form data to PHP without page refresh
try making $_POST array empty after submitting and saving the form
$_POST='';
After getting success response you can clear form input
$('#sfm').submit(function () {
var form = $(this);
$.ajax({
url: 'phpfile.php',
data: form.serialize(),
type: "POST",
success: function (data) {
$('input[type="text"]').val('');
}
});
return false;
});
You can do like this, first get form inputs value and then reset
You can also able to reset after success response
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
var that = $(this);
var params = that.serialize();
that.get(0).reset();
console.log(params);
$.ajax({
type: 'GET',
url: 'submit.php',
data: params,
success: function (data) {
console.log(data);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="confirm.php" id="sfm" method="POST" target="votar">
<input type="text" placeholder="Name" name="name" value="" required/>
<input type="submit" value="Submit My Project " />
</form>
SERVER SIDE
<?php
$name = $_GET['name'];
echo 'success';
exit();
?>
I have a pop up menu and inside that I have a form and a text box. I want to retrieve that value and submit it to my controller. Once submitted I want my pop up to close and go back to the other page. I tried with AJAX but I might be doing something wrong.
<form onsubmit="return(testing());" method="POST">
<input type="text" name="vip_text_box" id="vip" value="<?php echo $total_amount ?>"> <br>
<input type="submit" name="Redeem" value="Redeem">
</form>
Now My Javascript
function testing() {
$test = document.getElementById("vip").value;
var url = base_url + '/index.php/home/redeeming_form_value';
$.ajax({
type : 'POST',
url : url,
data : {'myvalue':test},
success: function(data){
alert(data);
}
});
};
In my controller
function redeeming_form_value() {
$amount = $this->input->post('myvalue');
return $amount;
In the AJAQ I have a success, and want to alert my data(the value) to make sure it even works but it does nothing. When i click submit my pop up view just goes away.
Try adding dataType: "json", to your Ajax
dataType: "json",
Then in your controller use json_encode to return your data
$arr = array('amount' => $amount);
return json_encode($arr);
Test the response in success
console.log(data.amount);
Try it..
HTML
<form action="" method="POST">
<input type="text" name="vip_text_box" id="vip" value="<?php echo $total_amount ?>"> <br>
<input type="submit" name="Redeem" id="submit" value="Redeem">
</form>
Javascript
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var test = $("#vip").val();
var base_url= 'http://localhost/shop';
var url = base_url + '/index.php/home/redeeming_form_value';
$.ajax({
type : 'POST',
dataType: 'json',
url : url,
data :'myvalue='+test,
success: function(data){
msg= eval(data);
amount= msg.amount;
alert(amount);
}
});
});
});
</script>
At your Controller
function redeeming_form_value()
{
$amount = $this->input->post('myvalue');
echo json_encode(array('amount'=>$amount));
}
My ajax script
function filter(){
var input1 = $("#advanced-search1").val();
$.ajax({
dataType: 'html',
url: "php/filter.php",
type: "POST",
data: input1,
success: function(response){
$('#result').html(response);
}
});
}
The html form
<form>
<select id="advanced-search1" name="taskOption">
<option value="apple">Apple</option>
.
.
.
</select>
<input type="submit" onclick="filter()" value="Filter">
</form>
<div id="result"></div>
My question is how to pass the "select" id into an ajax so that it can be processed in the other php file (filter.php)
The way data works is by using an object... What you are doing is wrong. Replace the data part with:
data: {"key": input1},
And in the server side you should be able to access it using:
$_POST["key"]
I am new to code igniter and I have searched the following question in number of StackOverflow threads but none of them seem to solve my problem.
I have the following view code:
<select name="select1" id="select1">
<option value="0">None</option>
<option value="1">First</option>
</select>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
// Ajax post
$(document).ready(function() {
$("#select1").change(function(event) {
event.preventDefault();
var id = $(this).val();
jQuery.ajax({
type: "POST",
url: "<?php echo base_url(); ?>" + "index.php/mycontroller/method",
dataType: 'json',
data: {id: id},
success: function(res) {
}
});
});
});
</script>
Ok when I change the drop down list selection nothing happens, which should actually call my controller method. Can you please help me resolve this problem?
Thanks
You are using <select> id as category
But In jquery you are calling $("#select1").change(function(event) like this .
You just need to change $("#select1").change(function(event) to
$("#category").change(function(event)
Check in console if your script contains any errors.
if no errors with script, check your function getting called after change, by adding alert or console statement.
if function getting called, check base_url. As per latest comment '/' missing.
You can also try Following snippet :
//Add J Query Library here
<select name="select1" id="select1" onchange="funName(this);">
<option value="0">None</option>
<option value="1">First</option>
</select>
<script type="text/javascript">
function funName(element)
{
var id = element.value;
jQuery.ajax({
type: "POST",
url: "<?php echo base_url(); ?>" + "/index.php/mycontroller/method",
dataType: 'json',
data: {"id" : id},
success: function(res) {
console.log(res);
}
});
}
</script>
There is mistake with your jquery selector.
you are using $("#select1").change(function(){});
you don't have any id reffered in this name in your section.
$("#category").change(function(event) {
//ur code here
});
You used id selector in the jquery code but that id is mentioned as a name attribute in html dropdown tag. So try the following code.
Change this following:-
<select name="select1" id="category">
<option value="0">None</option>
<option value="1">First</option>
</select>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
// Ajax post
$(document).ready(function() {
$("#category").change(function(event) {
event.preventDefault();
var id = $(this).val();
jQuery.ajax({
type: "POST",
url: "<?php echo base_url(); ?>" + "index.php/mycontroller/method",
dataType: 'json',
data: {id: id},
success: function(res) {
}
});
});
});
I am trying to pass the form value "New Value" from jQuery to a PHP script, and then update the "to_change" div from "Old value" to "New value". It seemed like the AJAX call succeeded, but the POST variables are not being sent to the PHP script, and when I use getJSON, I do not succeed. How could I resolve this issue?
Javascript/HTML code:
<html>
<head>
<script src = 'jquery-1.10.2.js'></script>
<script>
$(document).ready(function() {
$("#form_tmin").submit(function(event) {
var values = $(this).serialize();
$.ajax({
type: "POST",
url: "parameters_form2.php",
data: values,
dataType: "json",
success: function(data){
$.getJSON("parameters_form2.php", function(tmin) {
document.getElementById("to_change").innerHTML = tmin[1];
});
}
});
return false;
});
});
</script>
</head>
<body>
<div id="to_change">Old value</div>
<form id="form_tmin" name="form_tmin">
<input type="hidden" id="tmin_value" name="tmin_value" value="New value">
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>
PHP code:
<?php
header('Content-Type: application/json');
if ($_POST["tmin_value"]) {
$tmin[1] = $_REQUEST["tmin_value"];
}
else {
$tmin[1] = "FAILURE";
}
echo json_encode($tmin);
?>
You already have json response in data just set this data in where ever you want to display. you don not need $.getJSON again.
try like this:
$(document).ready(function() {
$("#form_tmin").submit(function(event) {
var values = $(this).serialize();
$.ajax({
type: "POST",
url: "parameters_form2.php",
data: values,
dataType: "json",
success: function(data){
document.getElementById("to_change").innerHTML = data[1];
}
});
return false;
});
});
You already have the response of query, no need to use $.getJson again
Instead just use:
success: function(data){
$("to_change").html(data[1]);
}