I would like to update session variable.
Let me introduce this in simple example. We get a div with input fields printed out by PHP script, with some values etc...
Example PHP code:
echo '
<div id="few-input-fields">
<input id="Name" size="20" value="' . $_SESSION['name'] . '" />
<br />
<input id="Lastname" size="20" value="' . $_SESSION['lastname'] . '" />
</div>
<span id="save">save</span>
</div>
';
Let's say user edit this input field (id=Name) and type name "Mark" inside it and then press save text.
On click it should save/update session variable, without reloading page AND refresh input fields.
Is that possible? Perhaps with ajax / jquery? And most importantly how ?
Yes, just do a simple AJAX request. With jQuery it would be:
$("#formid").submit(function(){
$.ajax({
type: "POST",
url: "someFileToUpdateTheSession.php",
data: $(this).serialize(),
success: function(){
// Do what you want to do when the session has been updated
}
});
return false;
});
And your PHP:
<?php
session_start();
$_SESSION["name"] = $_POST["name"];
// Add the rest of the post-variables to session-variables in the same manner
?>
Note
You need to add name-attributes to your input-fields.
Related
i have a form with a switch toggle and a input field named userid.
When i switch the toggle all works fine and the active.php save the new status in the database.
But now i want to have also the userid value to the active.php.
The var mode can i get in the active.php via
$mode=$_POST['mode'];
How can i send the userid also to active.php?
Any idea?
Thank you
<input type="checkbox" name="<?php echo 'toggle'.$c;?>" id="<?php echo 'toggle'.$c;?>" data-toggle="toggle" data-off="OFF" data-on="ON" checked>
<input id="userid" name="userid" type="hidden" value="<?php echo $userid;?>">
This is the js code
$('#<?php echo 'toggle'.$c;?>').change(function(){
var mode= $(this).prop('checked'),
$.ajax({
type:'POST',
dataType:'JSON',
url:'active.php',
data:'mode='+mode,
success:function(data)
{
var data=eval(data);
message=data.message;
success=data.success;
$("#heading").html(success);
$("#body").html(message);
}
});
});
Use the & to separate the two keys.
First of all, retrieve the userid value
var userid = $('#userid').val();
data:'mode=' +mode+'&userid='+userid,
In your ajax parameter, change the data attribute to look as follows:
data: 'mode='+mode + '&userid=' + $('#userid').val ()
Here i am trying to send multiple variable values to php page through ajax.
here i am calling javascript function to get the values from form and submit the values to ajax. in the javascript i am getting multiple values from form. now i want to pass all these values to php page.
how can i achieve that?
here is what i have done.
function sendInvite(){
var from_name = document.getElementById('invite_username').value;
var name_string = 'invitename='+ from_name;
var email = document.getElementById('friendemail').value;
var mail_string = 'friendemail='+ email;
var product_name = document.getElementById('invite_productname').value;
var product_string = 'invite-product-name='+ product_name;
var product_link = document.getElementById('invite_url').value;
var link_string = 'invite-url='+ product_link ;
$.ajax({
type : "post",
url : "legoland.php",
data: name_string,mail_string,
cache:false,
success : function(html){
$('.mail-message').html(html);
}
});
}
Html:
<form name="invite-form">
<div class="col-md-4 col-lg-4">
<label class="control-label" for="friend">Enter email address</label>
<input type="email" class="form-control" name="friendemail" id="friendemail" placeholder="sam#uncle.com" required><br>
<?php
echo '<input type="hidden" id="invite_username" name="invitename" value="' . $_SESSION["user_name"] . '">' ;
echo '<input type="hidden" id="invite_url" name="invite-url" value="'.$_SERVER['REQUEST_URI'].'">';
echo '<input type="hidden" id="invite_productname" class="invite-product" name="invite-product-name">';
?>
<input type="button" name="submit" onclick="return sendInvite();" value="Invite" class="btn btn-primary">
</div>
</form>
php:
<?php
$name = $_POST['invitename'];
$mail = $_POST['friendemail'];
$product_name = $_POST['invite-product-name'];
$product_link = $_POST['invite-url'];
echo $name;
echo $mail;
echo $product_name;
echo $product_link;
?>
From manual:
data
Type: PlainObject or String or Array
Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below).
So the easiest would be change data to
data: { invitename: from_name, friendemail: email }
you can also assign values directly to data variable
data: {
invitename: document.getElementById('invite_username').value,
friendemail: document.getElementById('friendemail').value
}
etc.
I have a table(NOT FORM), in php which I generated in a while loop.
one of the inputs is generated 20 input, with or without any data in it. I am trying to run an update/save using jquery and I need to post all the values in that input.
This is in a while loop. It is basically loops and render the data from the table into the image you can see below. If you count the input box in the image, it is 20.
webpage layout
echo '<input type="text" name="access[' . $count . '][' . $a . ']" id="access[' . $ucount . '][' . $a . ']" size="1" maxlength="2" value="' . $user_access[$a] . '" />';
In a html page you will see this
<input type="text" value="RO" maxlength="2" size="1" id="access[2][0]" name="access[2][0]">
<input type="text" value="SQ" maxlength="2" size="1" id="access[2][1]" name="access[2][1]">
and without ant data it will be the `value` will be blank.
<input type="text" value="" maxlength="2" size="1" id="access[2][2]" name="access[2][2]">
Now because I am using jQuery ajax to do an update / save. How will I sent everything in all 20 input boxes via jQuery?
I have done a normal and this is how I normally do it below.
$(document).ready(function () {
$('[name="save_record"]').unbind('click').click(function () {
var update_user = $(this).parent().parent().find('[name="user"]').val();
$.ajax({
type: 'POST';
url: 'update.php';
data: {
update_user: update_user
},
success: function (Response) {
alert(Response);
})
});
});
but I know for this method of post all values in all 20 input boxes will be different but I have try it like i did above and it only post the first value in the first input box.
question
How can I post values in all 20 input boxes? please based your answer/ example as if you the input boxes where empty as first.
NOTE
some values may be empty so i need to also check that none of the input boxes are null.
Thanks
$.post(
'/my-url',
{
data: $('#my-form').serialize()
},
function (data) {
// some processing successful result here
}
);
Using <input> tags without <form> is impropriety
<input type="text" user" id="nick" />
<input type="text" user" id="message" />
Send
Lets keep it simple. I have two input boxes and a send link. I want to send the nick and message to shoutbox.php, where i will insert these values in database and want to get all the results from the database and show it on the front end.
Now i have implemented the saving in database part but i cant get back the values from database to front end.
I am desperately in need of an jquery function in which i can just send the parameters and it will do all the job for me. I hope you guys might have such a function for yourselves.
Use the jQuery Ajax method to send data to the shoutbox.php:
$.ajax({
type: "POST",
url: "shoutbox.php",
data: { nick: "val_of_nick", msg: "val_of_msg" },
success: function(data) {
alert('Loaded: ' + data);
}
});
Now in your shoutbox.php:
//read the sended data
$nickname = $_POST['nick'];
$msg = $_POST['msg'];
//to send data back, just use echo/print
echo 'You sended nickname: ' . $nickname . ' and msg: "' . $msg . '"';
If you run this code, then your js alert will show the echo line from shoutbox.php.
Hope this helps!
More info about jQuery ajax: info
Just an example:
HTML
<form id="myform">
<input type="text" user" id="nick" name="nickname" /> <!-- use name ->
<input type="text" user" id="message" name="message"/> <!-- use name -->
Send
</form>
jQuery
$('#send').on('click', function(e) {
e.preventDefault(); // prevent page reload on clicking of anchor tag
$.ajax({
type: 'POST',
url: 'url_to_script',
data: $('#myform').serialize(),
dataType: 'json', // if you want to return JSON from php
success: function(response) {
// you can catch the data send from server within response
}
});
});
Now in your PHP side you can catch the send value via ajax like:
<?php
...
$nickname = $_POST['nickname'];
$message = $_POST['message'];
......
?>
Related refs:
.serialize()
.ajax()
Currently i have a form which has an image as a submit. It works fine as in the form variables get passed through and gets processed. However, the page gets refreshed every time click submit for the form since the processing page has a header back to the form page.
I need a way to send the form variables without the refreshing. I understand it can be done via ajax. However, i am facing a prob since my submit button is an image. Any help as to how i can rectify my code to submit the form without refresh would be great
<form name ="nominate" action="" id ="nominate" method="POST">
<input type="hidden" name="id" value="<?php echo $id;?>">
<input type="hidden" name="screenName" value="<?php echo $author;?>">
<input type="hidden" name="course" value="<?php echo $course;?>">
//this is the image submit button
<input type="image" style="float: left;" onMouseOver="this.src='images/nominated.png'"
onMouseOut="this.src='images/nominate.png'" value="Place Order" src="images/nominate.png" width="60" height="20">
</form>
<script>
$(function() {
$(".button").click(function() {
var id = $("#id").val();
var screenName = $("#screenName").val();
var dataString = 'id='+ id + '&screenName=' + screenName + '&course=' + course;
alert (dataString);
$.ajax({
type: "POST",
url: "nominate.php",
data: dataString,
success: function(){
alert(dataString);
}
});
});
});
</script>
The code you've done should work, if you add the class of "button" to the image.
<input type="image" class="button"....
Firstly you need to add the id attribute as in jquery $("#") is the id of the element.
<input type="hidden" name="id" id="id" value="<?php echo $id;?>">
<input type="hidden" name="screenName" id="screenName" value="<?php echo $author;?>">
<input type="hidden" name="course" id="course" value="<?php echo $course;?>">
Then as said by Andrew either add the class="button" or use $("#some_id") and then give the button input an id="some_id".
$(".button").click(function(){
var url = "nominate.php";
var id = $("#id").val();
var screenName = $("#screenName").val();
var course = $("#course").val();
$.post(url,{id:id, screenName:screenName , course:course }, function(data){
alert(data);
});
});
This will alert whatever you send back from "nominate.php". Make sure you remove the header() from the script and send back a success or error message possibly.
Add the class 'button' to your image.
Also, you don't seem to have course defined anywhere. You might want to fix that, too.