I Wanna access the hidden values in ajex posted in a div
<input type="button" value="button 1" class="btn">
<div id="div"><div>
<script>
$.ajax({
url:"btn2.php", success:function(data){
$('#div').html(data);}
});
$( "#table" ).on( "click", ".upd", function() {
alert("button is wrking");
});
</script>
PHP
echo"<input type='button' value='button 2' class='btn'>
<input type='hidden' value='dishonest' id='hdn'>";
can any one help me on this.. i have no idea what to do ...
basically i want value of hidden
var h=$('#hid').val();
but that doesn't work bcoz its posted later in div ...
You will get value from ajax success
success:function(data){
$('#div').html(data);
var h=$('#hid').val();
alert(h);
}
Related
can anyone please help me with sending the below form using Ajax. All I want is to send it to the trolley1.php page for processing, no call backs or anything like that. Basically replicate the form but sending it with Ajax so the page does not go to the trolley1.php page. I have tried so many methods but have not been able to do this. Bill Gates or Steve Wozniak if you guys are reading this, please help
This gives me a console $.Ajax is not a function in the console
<script>
$(document).ready(function(){
$('form').submit(function(event){
event.preventDefault();
var form_data = $(this).serialize();
$.ajax({
url: "trolley1.php",
type: "POST",
dataType:"json",
data: form_data
}).done(function(data){
alert("Item added to Cart!");
}
});
});
</script>
<?php
echo "
<div class='col-sm-3 mt-5'>
<form class='ajax' method='post' action='trolley1.php?action=add&id=$id'>
<div class='products'>
<a>$img</a>
<input type='hidden' name='id' value='$id'/>
<input type='hidden' name='name' value='$product'/>
<input type='hidden' name='price' value='$price'/>
<input type='text' name='quantity' class='form-control' value='1'/>
<input type='submit' name='submit' style='margin-top:5px;' class='btn btn-info'
value='Add to Cart'/>
</div>
</form>
You have one syntax error in your JS Code - see correct code
$(document).ready(function(){
$('form').submit(function(event){
event.preventDefault();
var form_data = $(this).serialize();
$.ajax({
url: "trolley1.php",
type: "POST",
dataType:"json",
data: form_data
}).done(function(data){
alert("Item added to Cart!");
});
});
});
And you are using jQuery as additional javascript libary. jQuery uses $ to access the methods (e.g. $.ajax) Thats the reason why you get undefined as error.
So you need to load the libary first at the beginning of your page (inside <head>). E.g. directly from their CDN
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
Then it should work for you
i am a newbie programmer.I am stuck for two days with a simple code.I try to use jquery form plugin for submitting a form to another page and get a feedback from that page.The problem is the plugin is not working.the form is submitted as normaly without feedback.Here is the code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<div id='preview'></div>
<form action='ajaxcall.php' id='upload_pic' enctype='multipart/form-data' method='post'>
<input type='file' id='pic' name='picture'>
<input type='submit' id='sub'>
</form>
var options=
{
target:'#preview',
url:'ajaxcall.php'
};
$(document).ready(function(){
$("#sub").click(function(){
$('#preview').html("<img src='images/loader.gif' alt='Loading.....'/>");
$('#upload_pic').ajaxForm(options).submit();
});
});
Here is my ajaxcall.php page code
if(!empty($_FILES['picture']['size']))
{
echo "<img src='images/197.jpg'>";
}
Expectation was the echoed image would feddback but the page is simply redirected to ajaxcall.php page.ajaxForm() function is not working.But why?please help.Thanks in advance.
Just replace your submit button for a normal one, because you are already submiting the form programatically from your click handler, so replace your following html:
<input type='submit' id='sub'>
for this one:
<input type='button' id='sub'>
use these codes instead of your script codes. sorry for the late answer
$(document).ready(function(){
$("#sub").click(function(){
var options=
{
target:'#preview',
url:'ajaxcall.php'
};
$('#preview').html("<img src='images/loader.gif' alt='Loading.....'/>");
$('#upload_pic').ajaxForm(options).submit();
});
});
HTML CODE
<form id="product_form" action="" method="post">
<input type="hidden" name="wpsc_ajax_action" value="add_to_cart">
<input type="hidden" name="product_id" value="8191">
<div class="current-items">
<div id="903" class="wpsc_select_variation">
<div id="902" class="wpsc_select_variation">
<div id="903" class="wpsc_select_variation">
<div id="875" class="wpsc_select_variation">
</div>
</form>
jQUERY CODE
jQuery("#product_form").live('submit', function(){
$wpsc_select_variation= $(".current-items > div").attr("id");
$wpsc_ajax_action = $("input[name='wpsc_ajax_action']").val();
$product_id = $("input[name='product_id']").val();
form_values = 'variation[480]='+$wpsc_select_variation+'&wpsc_ajax_action='+$wpsc_ajax_action+'&product_id='+$product_id;
jQuery.ajax({
type:"POST",
url: "wp/products-page/500ml-600ml-colours/krink-k750/index.php?ajax=true",
data:form_values ,
success: function(returned_data){
//$("#response").html(data);
eval(returned_data);
jQuery('div.wpsc_loading_animation').css('visibility', 'hidden');
if(jQuery('#fancy_notification') != null) {
jQuery('#loading_animation').css("display", 'none');
//jQuery('#fancy_notificationimage').css("display", 'none');
}
}
});
return false;
});
if have 4 child div of inside .current-items class div so i want to send 4 Ajax request and pass different id of child class in every loop in this line of code
$wpsc_select_variation= $(".current-items > div").attr("id");
Code is working with one requert
So plz help me make loop in jquery base on child div of inside of .current-items class div
Wrap ajax request inside .each().
$(".current-items > div").each(function(){
//ajax call.
$wpsc_select_variation= $(this).attr("id");
//after work done as asked in comment add below code.
$(this).remove(); //to hide use $(this).hide();
});
Can anyone tell me why this is not working or give me another way into doing what I want.
I have a form on a page when click submit I want it to process into add.php and for it to open up in a DIV called right.
Form page
<script>
$("#Submit").click(function() {
var url = "add.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#myForm").serialize(), // serializes the form's elements.
success: function(html){ $("#right").html(html); }
});
return false; // avoid to execute the actual submit of the form.
});
</script>
</head>
<body>
<form action="add.php" method="post" enctype="multipart/form-data" id ="myForm">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name = "email"><br>
Phone: <input type="text" name = "phone"><br>
Photo: <input type="file" name="photo"><br>
<input type="submit" value="Upload">
</form>
</body>
Now if I add action to form to direct it to add.php all works fine so other script is ok yet when i do it this way,nothing happens it does not load add.php into the 'right' div like I want it to.
Anyone got any suggestions?
Your $("#Submit") selector does not match anything (the submit button has no id and is defined after that bind attempt), so the function is not bound to any event, thus never executed.
Instead the form acts the way it should: upon submit it posts its content to the url specified in the 'action' attribute. This is what happens, that div is never touched.
you have to go back to understand how jquery selectors work. How to bind a function to an event.
Is this your exact code? There are a few issues:
$("#Submit").click should be wrapped in a document ready
handler so it doesnt run before the page has actually loaded.
There is no button that matches #Submit
There is no div that matches #right
Try
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#Submit").click(function() {
var url = "add.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#myForm").serialize(), // serializes the form's elements.
success: function(html){ $("#right").html(html); }
});
return false; // avoid to execute the actual submit of the form.
});
});
</script>
</head>
<body>
<div id="right">
</div>
<form action="add.php" method="post" enctype="multipart/form-data" id ="myForm">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name = "email"><br>
Phone: <input type="text" name = "phone"><br>
Photo: <input type="file" name="photo"><br>
<input type="submit" value="Upload" id="Submit">
</form>
you have to create on div in body tag which id will be right and
<input id="submit" type="submit" name="upload" >
add new div in body tag like this
<div id="right"></div>
im tryin to make a onclick event for my image, but its not workin..the alert is not showing up..
$(document).ready(function(){
$('img.closeAttrIcon').click(function(){
alert("ww");
});
});
even if i try like this with ..bind.. no hope...
$(document).ready(function(){
$('img.closeAttrIcon').bind('click',function(){
alert("ww");
});
});
the html will be created during this event:
$('a#btnAddStdntAttr').click(function(){
var newAttr = '<div class="attrParent"><br class="clear"><label></label><input type="text" id="stdntAttributeKey1" maxlength="250" style="width: 13%;" name="stdntAttributeKey1"/>';
newAttr+= '<input type="text" id="stdntAttributeValue1" maxlength="250" style="width: 13%;" name="stdntAttributeValue1"/>';
newAttr+= '<img src="<c:url value="/static/images/closeIcon.png"/>" onclick="removeStdntAttr();" class="closeAttrIcon" alt="Close" title="Close" /></div>';
$(this).after(newAttr);
});
what am i doing wrong here..please help..
it does not work because you are injecting it after the DOM is created for the first time, for that you need to use the live (if using til jQuery 1.7) or on if using (1.7+) binding method
change your call to:
$(function(){
$('img.closeAttrIcon').live('click', function() {
alert("ww");
});
});
if you're using jQuery 1.7+ then you can also do this:
$(document).on('click', 'img.closeAttrIcon', function() {
alert("ww");
});