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 ()
Related
I want to update data of input field with ajax. Being new to Ajax, I've tried this so far. I am passing two variables(i.e, Name and Col to identify the name and id of the input field). So now I am stuck with this. I want to update the value of the input field with name="email_id" and Column name in mysql table "Email". So I passed the two variable so that php can identify the input name. But how do I pass the new data in the field? I have done it in another form with FormData but I need help in this case. And I apologise if I am not being specific, its my first query on stackoverflow.
HTML:
<input type="email" onblur="validate()" value="<?php echo $row['Email']; ?>" id="email_id" data-toggle="tooltip" title="Invalid Email" data-placement="top" data-content="Email must be in the format xyz#abc.com/net/info/org/in" name="email_id" placeholder="E-mail ID eg. max#mymail.com" class="form-control col-sm">
Jquery:
$('input').on("change",function(){
console.log("Clicked");
var Name=$(this).attr('name');
var Col=$(this).attr('id');
console.log(Name);
$.ajax({
url:"update.php",
method:"post",
data:{"Col":Col,"Name":Name},
success:function(response){
console.log(response);
}
});
});
You can use document.getElementByID().value to grab the value of the input field:
$('input').on("change",function(){
console.log("Clicked");
var Val=document.getElementById('email_id').value;
var Name=$(this).attr('name');
var Col=$(this).attr('id');
$.ajax({
url:"update.php",
method:"post",
data:{"Col":Col,"Name":Name, "Email":Val},
success:function(response){
console.log(response);
}
});
});
I am having three group of check boxes as follows:
echo '<input type="checkbox" name="metal[]" value="'.$value.'" id="'.$value.'" onclick="return submitForm()" ><label for="'.$value.'"></label>';
echo '<input type="checkbox" name="shape[]" value="'.$value.'" id="'.$value.'" onclick="return submitForm()"><label for="'.$value.'" ></label>';
echo '<input type="checkbox" name="type[]" value="'.$value.'" id="'.$value.'" onclick="return submitForm()"><label for="'.$value.'" ></label>';
All coming from database.
I want to send these values through ajax. My current code is:
function submitForm() {
var form = document.myform;
var dataString = $(form).serialize();
$.ajax({
type:'POST',
url:'carousel.php',
data: dataString,
success: function(data){
$('#myResponse').html(data);
}
});
return false;
}</script>
This function is sending only single value to carousel.php. I further want to process data and show result according to the checked values. Also on clicking another checkbox, previous checkbox values is lost. I found above code on google and very new to ajax. Please help.
I have buttons and divs and in each part I have them with the same ID I want to get the ID of button and use it for refreshing the div html.how should I write the * section?
$(function() {
$(".button").click(function(){
var id=$(this).attr('id');
var dataString = 'id='+ id ;
$.ajax({
type: "POST",
url: "download_number.php",
data: dataString,
cache: false,
success: function(html)
{
*********I HAVE PROBLEM HERE**************
$('how to get the id of the div from var id of button above?').html(html);
}
});
});
});
Div:
Downloaded:<div id="<?php echo $id; ?>" ><?php echo $downloadcount;?></div>
Button:
<input type = "button" value="Download" class="button" id="<?php echo $id; ?>" name="dl">
If I get class It will update the whole divs I want to update just the div realted to the button
You cannot have the same id on both the button and the div, id values must be unique in a document.
What I'd probably do is put the div's id on the button as a data-divid attribute (all attributes with the prefix data- are valid on all elements as of HTML5, and harmless in earlier versions of HTML), like this:
<input type="button" value="Download" class="button" data-divid="<?php echo $id; ?>" name="dl">
Then change
var id=$(this).attr('id');
to
var id=$(this).attr('data-divid');
...and then use that id var in your success callback (as the callback is a closure created within the context where id is defined, and so the callback has access to id).
Here's a simple example: Live copy | source
HTML:
<div id="div1">This is div1</div>
<div id="div2">This is div2</div>
<div>
<input type="button" data-divid="div1" value="Update div1">
<input type="button" data-divid="div2" value="Update div2">
</div>
JavaScript:
jQuery(function($) {
$("input[type=button]").click(function() {
var id = $(this).attr("data-divid");
// I'll use setTimeout to emulate doing an ajax call
setTimeout(function() {
// This is your 'success' function
$("#" + id).html("Updated at " + new Date());
}, 10);
return false;
});
});
Use the id but prefix them then build the name up...
<div id="div_<?php echo $id; ?>" ><?php echo $downloadcount;?></div>
button:
<input type = "button" value="Download" class="button" id="<?php echo $id; ?>" name="dl">
Then in you're code you have the id used in the buttons already (and also it will be div_), so you can then in you're 'success' just do:
$("#div_"+id).html(html);
change your html to this:
Downloaded:<div id="<?php echo $id; ?>" class="downloaded" ><?php echo $downloadcount;?></div>
then do something like:
var element_id = $(".downloaded").prop("id");
if(element_id = this.id){
$("#"+element_id).html(/* ... */);
}
$(function() {
$(".button").click(function(){
var id=$(this).attr('id');
var dataString = 'id='+ id ;
$.ajax({
type: "POST",
url: "download_number.php",
data: dataString,
cache: false,
success: function(html)
{
$('.count-' + id).html(html); // for class
}
});
});
});
<div class="count-<?php echo $id; ?>" ><?php echo $downloadcount;?></div>
First of all avoid using same IDS.
Then you can use CSS selectors:
$('div.class') //div
$('input[type="button"].youridclass')
You cannot use the id attribute for that purpose, the id cannot be a number (valid html) and thereby id's needs to be unique. Use the data attrib instead.
Try something like:
$('.button').attr('id');
to get the id of the button, then to change it:
$('.button').attr('id',''); //delete previous id if existing
$('.button').attr('id','yourNewId'); //set new id
then to use the new id:
$("#yourNewId").doSomething();
First and foremost, ids should be unique, you'll run into problems, particularly when using jQuery, if you have elements with the same id.
Without seeing your markup it's hard to give you a working example. But you can get the id of the div which corresponds to the clicked button by traversing the DOM.
Example markup:
<div id="example-div">
<input type="button" value="Example" />
</div>
jquery
$('input[type="button"]').click(function() {
console.log($(this).parent('div').prop('id'));
});
// outputs 'example-div'
for your reference check the below link for the various ways that you can use to select the dom elements given the parent element.
jsperf.com/jquery-selectors-context/2
How would I go about submitting the below form without a page refresh using Ajax? I'm needing to send the user1_id via 'toid' and the content from the textarea 'newmsg'.
FORM
<form action="insert.php" method="POST" class="form_statusinput">
<input type="hidden" name="toid" value="<?php echo $user1_id ?>">
<span class="w">
<textarea class="input" name="newmsg" id="newmsg" placeholder="Say something" autocomplete="off"></textarea>
</span>
<button type="submit" value="Submit">Feed</button>
</form>
1) Add an ID to form, lets say "myform".
2) Then you can get all all fields from this form and send it using AJAX (dont forget to include jQuery):
var form_data = $("#myform").serialize();
$.ajax(
{
url: 'script.php',
type: 'POST',
cache: false,
data: form_data,
success: function(message)
{
...
},
error: function(message)
{
...
}
});
If jQuery is an option, it is quite easy.
See jQuery.post(): http://api.jquery.com/jQuery.post/
// Example: send form data using ajax requests
$.post("test.php", $("#testform").serialize());
There are many options depending on what you need to do with the return values, it's best to just read the documentation in this case.
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.