I have two submit buttons in html "form":
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<input type="text" name="field1" id="field1" />
<input type="text" name="field2" id="field2" />
<form id="form1" action="" method ="post">
<input type="submit" value="check data" id="checkdata" name="checkdata" /><p>
<input type="submit" value="download" id="download" name="download" /><p>
which I have to get the query results of the button clicks from two separate "php" codes in the "same page" by ajax call. I have the script for the first button but I have trouble to assign the query for the second button which has to be referred to another php code:
$(document).ready(function(){
$("#checkdata").click(function(){
var field1 = $("#field1").val();
var field2 = $("#field2").val();
var datastr ='&field1=' + field1 + '&field2=' + field2;
$("#response").css("display", "block");
$("#response").html("setting parameters... ");
$("#response").fadeIn("slow");
setTimeout("send('"+datastr+"')",2000);
return false;
});
});
function send(datastr){
$.ajax({
type: "POST",
url: "some_php_code.php",
data: datastr,
cache: false,
success: function(html){
$("#response").fadeIn("slow");
$("#response").html(html);
setTimeout('$("#response").fadeOut("slow")',2000);
}
});
}
could you please give me some hint on this or is there any other method to do that?
(I have checked all the relevant questions that you might refer me to.
like this question which is related to only one ajax call
jQuery submit ajax form with 2 submit buttons)
Just add the following function.
$(document).ready(function(){
$("#download").click(function(){
var field1 = $("#field1").val();
var field2 = $("#field2").val();
var datastr ='&field1=' + field1 + '&field2=' + field2;
$("#response").css("display", "block");
$("#response").html("setting parameters... ");
$("#response").fadeIn("slow");
setTimeout("send('"+datastr+"')",2000);
return false;
});
});
Or better:
$(document).ready(function(){
$("#checkdata").click(function(){
SendData();
});
$("#download").click(function(){
SendData();
});
});
function SendData() {
var field1 = $("#field1").val();
var field2 = $("#field2").val();
var datastr ='&field1=' + field1 + '&field2=' + field2;
$("#response").css("display", "block");
$("#response").html("setting parameters... ");
$("#response").fadeIn("slow");
setTimeout("send('"+datastr+"')",2000);
return false
}
hth
Related
the problem is that i am unable to insert data in my database without reloading
i have tested it without the note_sql.js and my note_sql.php works fine but there seems to be a problem in my js file if some body could point me in the right direction it would be wonderful
Index.php
<form id="noteform" action="note_sql.php" method="POST">
<input type="text" name="note"></input>
<input id="sub" type="submit" value="Save Note" />
</form>
<span id="result_note"><span>
<script type ="text/javascript" src="jquery/note_sql.js"></script>
note_sql.js
$("#sub").click(function(){
var data = $("#noteform: input").serializeArray();
$.post($("#noteform").attr("action"),data,function(info){$("result_note").html(info); });
clearInput();
});
$("#noteform").submit(function(){
return false;
});
function clearInput(){
$("#noteform :input").each(function(){
$(this).val('');
});
}
Use Jquery Ajax the working code is given below :
please add ID to Note Form Element :
<pre>
<script>
$(document).ready(function () {
$("#sub").click(function () {
var name = $("#note").val();
var message = $("#message").val();
$.ajax({
type: "post",
url: "note_sql.php",
data: "name=" + name,
success: function (data) {
alert(data);
}
});
});
});
</script>
</pre>
My form
<div class="replymsg">
<form class="mainform" action="reply.php" method="POST">
<textarea class="replytext" ></textarea>
<button data-value="<?php echo $id; ?>"
class="replybutton">Submit</button>
</form>
</div>
$id comes from a MYSQL database. The following "test" code gives me the id of the reply form using Jquery:
<script>
$(".replybutton").click(function(){
alert($(this).data("value"));
});
</script>
Value of commentid :id is not passed when I use "actual" code for the website as follows (reply:replytext ... sends message is working):
<script>
$(document).ready(function(){
$(".replybutton").click(function(){
var id = $(this).data("value");
var replytext = $(".replytext").val();
$.post("reply.php",{ commentid: id, reply: replytext },function(data){
$("#result").html(data);
});
});
});
</script>
Any ideas,any help is appreciated?
Most probably you should stop the form to submit if you are using ajax because a buttons default behavior is to submit the form:
<script>
$(document).ready(function(){
$(".replybutton").click(function(e){
e.preventDefault(); //<---------------stops the form submission here
var id = $(this).data("value");
var replytext = $(".replytext").val();
$.post("reply.php",{ commentid: id, reply: replytext },function(data){
$("#result").html(data);
});
});
});
</script>
or add a type to the button:
<button type='button' data-value="<?php echo $id; ?>" class="replybutton">Submit</button>
//------^^^^^^^^^^^^
another way is to use .submit() event:
<script>
$(document).ready(function(){
$(".mainform").submit(function(e){ //<-----pass the event here
e.preventDefault(); //<---------------still you need this
var id = $(this).find('.replybutton').data("value"); // find the elements
var replytext = $(this).find(".replytext").val(); // and here.
$.post("reply.php",{ commentid: id, reply: replytext },function(data){
$("#result").html(data);
});
});
});
</script>
and in this case you don't need to have a type to your button, but it's good to have it.
Submitting form with AJAX
In form
<div class="replymsg">
<form class="mainform" action="" method=" ">
<textarea class="replytext" ></textarea>
<input type="text" value="<?php echo $id; ?>" name="comment_id" id="comment_id" style="display: none"> <!-- this contain the ID-->
<input type="submit" class="replybutton" id="replybutton" value="Submit">
</form>
</div>
use AJAX
<script>
$(function(){
$( "#replybutton" ).click(function(event)
{
event.preventDefault();
var comment_id = $("#comment_id").val();
var replytext = $(".replytext").val();
$.ajax(
{
type:"post",
url: "./reply.php",
data:{ id:comment_id, reply:replytext,},
success:function($data)
{
$("#result").html(data);
}
});
});
});
</script>
$(document).ready(function(){
$(".replybutton").click(function(e){
e.preventDefault();
var id = $(this).data("value");
var replytext = $(this).prev().val();
$.post("reply.php",{ commentid: id, reply: replytext
},function(data){
$("#result").html(data);
});
});
});
Thanks for the help,I figured it out,my problem was sending Id and replytext in a comment/reply system when clicking replybutton. Working code above.
I am working in wordpress and I have one form and two submit buttons. I am using ajax and it is wordpress.
When first submit button is pressed I want statement 1 to be echoed and when submit button number 2 is pressed I want state 2 be echoed. I have followed the code tutorials but when I press submit from the control returns empty or no result and in inspect there is no error in the browser. Below is my code.
HTML Form
<form id="voteform" action="" method="post">
<input name='vote' value='two' src='http://localhost:8080/test/wp-content/uploads/2015/04/up.jpg' type='submit' type='image'>
<input name='vote' value='one' src='http://localhost:8080/test/wp-content/uploads/2015/04/up.jpg' type='submit' type='image'>
</form>
I am not copying the enqueue code but just the actual php function that executes
function articlevote ()
{
if ($_POST['vote'] == 'one') {
echo json_encode("1 vote button is pressed");
die();
}
else if ($_POST['vote'] == 'two') {
echo json_encode("2 vote button is pressed");
die();
}
}
Ajax and jquery
jQuery(function ($) {
$(document).on("click","input[name=vote]", function() {
var _data= $('#voteform').serialize() + '&vote=' + $(this).val();
$.ajax({
type: 'POST',
url: yes.ajaxurl,
data:_data,
success: function(html){
$("#myresult").html(res);
}
});
return false;
});
});
Again kindly note that I am using wordpress so kindly guide me in this thanks
This should get you what you need:
Html:
<form id="voteform" action="" method="post">
<input type="text" name="field1" value="field one value"/>
<input type="text" name="field2" value="field two value"/>
<input class='vote' value='two' src='http://localhost:8080/test/wp-content/uploads/2015/04/up.jpg' type='submit' type='image'/>
<input class='vote' value='one' src='http://localhost:8080/test/wp-content/uploads/2015/04/up.jpg' type='submit' type='image'/>
</form>
jQuery
jQuery(function($) {
var yes = {ajaxurl:"mypage.php"}; // created for demo
$('.vote').click(function(e) {
e.preventDefault(); // stop the normal submit
var _data = $('#voteform').serialize()+'&vote=' + $(this).val();
//alert(_data)
$.ajax({
type: 'POST',
url: yes.ajaxurl,
data: _data,
success: function(html) {
$("#myresult").html(html); // you had `res` here
}
});
});
});
$(document).ready(function(){
$('input[value=\'one\'], input[value=\'two\']').on('click', function(){
var _data= $('#voteform').serialize() + '&vote=' + $(this).val();
$.ajax({
type: 'POST',
url: yes.ajaxurl,
data:_data,
success: function(html){
$("#myresult").html(res);
}
});
return false;
});
});
How to send some message to other php file? I should to see "Loading" or result from my imput. I try to find some answer even this code is from this place, but still dosn't work.
I have:
<form>
something<input name="sthis" type="text" />
<input type="submit" value="submit" id="submit" />
</form>
<script type="text/javascript">
$(function(){
$('submit').click(function(){
$('#container').append('loading');
var sthis = $('#sthis').val();
$.ajax({
url: 'form1.php' ,
type: 'POST',
data: 'sthis: ' + sthis,
success: function(result){
$('#container').append('<p>' + result + '</p>')
}
});
return false;
});
});
});
</script>
Form1.php
<?php
$str = $_POST['sthis'];
echo $str;
}
?>
Any ideas?
Try this, I think should be like
data: {"sthis": sthis},
<form id="form1">
<input name="sthis" type="text" />
<input type="button" value="submit" id="submit" />
</form>
<script type="text/javascript">
$('#submit').click(function(){
$('#container').append('loading');
var data = $('#form1').serialize();
$.ajax({
url: 'form1.php' ,
type: 'POST',
data: data,
success: function(result){
$('#container').append('<p>' + result + '</p>')
}
});
return false;
});
</script>
This will send all data from your form to php file
So there are some things you have to change in your script:
$(function(){
$(':submit').click(function(event){
event.stopPropagation();
$('#container').append('loading');
var sthis = $('#sthis').val();
$.ajax({
url: 'form1.php' ,
type: 'POST',
data: {'sthis': sthis},
success: function(result){
$('#container').append('<p>' + result + '</p>');
}
});
return false;
});
});
First there is an extra }); at the end you can remove.
Your input field must have an id with the name sthis, not just a name, so you can access it with $("#sthis"), like this:
<input name="sthis" type="text" id="sthis" />
3rd, change your the data line so it look like this:
data: {'sthis': sthis},
Also, to capture the event of the button you have to use $(':submit'), watch for the :
I want to filter realtime results with jQuery (just like on this site http://shop.www.hi.nl/hi/mcsmambo.p?M5NextUrl=RSRCH). So when someones checks a checkbox the results should update realtime (in a div). Now I'm a newbie with jQuery and I've tried lots of examples but I can't get it to work. Here's my code, could anyone tell what I'm doing wrong? Thank you very much!
HTML
<div id="c_b">
Kleur:<br />
<input type="checkbox" name="kleur[1]" value="Blauw"> Blauw <br />
<input type="checkbox" name="kleur[2]" value="Wit"> Wit <br />
<input type="checkbox" name="kleur[3]" value="Zwart"> Zwart <br />
<br />
Operating System:<br />
<input type="checkbox" name="os[1]" value="Android"> Android <br />
<input type="checkbox" name="os[2]" value="Apple iOS"> Apple iOS <br />
</div>
<div id="myResponse">Here should be the result</div>
jQuery
function updateTextArea() {
var allVals = [];
$('#c_b :checked').each(function() {
allVals.push($(this).val());
});
var dataString = $(allVals).serialize();
$.ajax({
type:'POST',
url:'/wp-content/themes/u-design/filteropties.php',
data: dataString,
success: function(data){
$('#myResponse').html(data);
}
});
}
$(document).ready(function() {
$('#c_b input').click(updateTextArea);
updateTextArea();
});
PHP
//Just to see if the var passing works
echo var_export($_POST);
You are using .serialize() incorrectly, it works only with form elements.
With this code i think you'll get what you need.
Javascript / JQuery
function updateTextArea() {
var allVals = "";
$('#c_b input[type=checkbox]:checked').each(function() {
currentName = $(this).attr("name");
currentVal = $(this).val();
allVals = allVals.concat( (allVals == "") ? currentName + "=" + currentVal : "&" + currentName + "=" + currentVal );
});
$.ajax({
type:'POST',
url:'/wp-content/themes/u-design/filteropties.php',
data: allVals,
dataType: "html",
success: function(data){
$('#myResponse').html(data);
}
});
}
$(document).ready(function() {
$('#c_b input[type=checkbox]').click(updateTextArea);
updateTextArea();
});