I have an index.php page that contains a paragraph element & an input button:
<p id="result">Hello this is test paragraph</p>
<input id="insertbutton" type="button" value="insert" />
I would like to store the paragraph content into database without refreshing the page when I click the insert button..
Hope I can get help
Thank you very much
<p id="result">Hello this is test paragraph</p>
<input id="insertbutton" type="button" value="insert" />
//AJAX
$("#insertbutton").click(function(){
var dataToPass=$("#result").html();
$.ajax({
url:'Your_PHP_File_URL_that_will_do_insertion',
data:dataToPass
});
})
Using Ajax with jQuery to make a post request like this should be enough.
$("#insertbutton").click(function(){
var data = "text=" + $("#result").text();
$.ajax({
type: "POST",
url: "post.php",
data: data,
success: function(){
alert("success");
}
});
});
Related
i searched a lot about this problem, but I didn't find a solution, yet.
At first a short description about my setup to make my problem clearer.
Settings.php Page with a Menu, where you can select different settings categories
By clicking on one menu point the corresponding loads by ajax and is displayed.
$('#content').load("http://"+ document.domain + "/domainhere/settings/menupoint1.php");
On the menupont1.php page I got a list with mysql data.
I implemented a "edit" button for each row - while clicking on the edit button, a boostrap modal appears with a form and the corresponding data filled in and ready to edit.
When i now click on "Save changes", the POST-Request is always empty.
To realize the form submit, I already tried several codes:
e.g.:
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
}
}
});
or
$(function(){
$('#editform').on('submit', function(e){
e.preventDefault();
$.ajax({
url: url, //this is the submit URL
type: 'GET', //or POST
data: $('#editform').serialize(),
success: function(data){
alert('successfully submitted')
}
});
});
});
At the moment:
while($xy= $xysql->fetch_assoc()) {
<div class="modal fade" id="edit-<?php echo $xy["id"] ?>" [..]>
<button id="submit>" class="btn btn-default">Save</button>
</div>
<script>
$(function() {
$('button#submit').click(function(){
$.ajax({
type: 'POST',
url: './test2.php',
data: $('form#modal-form').serialize(),
success: function(msg){
$('#test').html(msg)
$('#form-content').modal('hide');
},
error: function(){
alert('failure');
}
});
});
});
</script>
Maybe someone here could help me out with this problem?
thank you very much :)
I've set up a minimal example of how this would work:
example html of two modals, which are produced in a loop in your case.
I've now done it without a unique id, but with selecting via class.
<div class="modal">
<!-- // this classname is new and important -->
<form class="editform">
<input name="test" value="value1">
<button class="btn btn-default">Save</button>
</form>
</div>
<div class="modal">
<form class="editform">
<input name="test" value="value2">
<button class="btn btn-default">Save</button>
</form>
</div>
Your javascript would be something like this:
$(function() {
var formsAll = $('.editform');
// changed this to onSubmit, because it's easier to implement the preventDefault!
formsAll.on('submit',function(e){
e.preventDefault();
var formData = $(this).serialize();
console.log(formData);
// add your ajax call here.
// note, that we already have the formData, it would be "data: formData," in ajax.
});
});
Note, that I don't have your real html structure, so details might vary. But you get the idea.
also available here:
https://jsfiddle.net/a0qhgmsb/16/
I have below code. when I click reply link, it will show a comment box.
I want 2 points.
or give me best way to do my work.
When 1 comment box open other must be hide.
when I click on send button correct value should send vie serialize values.
These are the codes
PHP code
<?PHP
for($i = 1; $i < 10; $i++)
{
?>
<div>comments text etc etc...</div>
Reply
<div class="reply-comment-form" style="display:none;">
<form class="comment_form" method="post">
<textarea name="comment_box" rows="6" class="span10"></textarea> <br /><br />
<input type="button" onClick="send_comment()" class="btn btn-primary" value="send" />
</form>
</div>
<?PHP
}
?>
Jquery code
<script>
$(function(){
$('.reply-comment').on('click', function(e){
e.preventDefault();
$(this).next('.reply-comment-form').show();
});
});
function send_comment()
{
$.ajax({
type: "POST",
data : $('.comment_form').serialize(),
cache: false,
url: 'test.php',
success: function(data){
}
});
}
</script>
test.php file no need. I am checking values through firebug.
please help me to clarify this problem.
or give me best way to do my work.
I am stuck since 2 days.
Thank you for your valuable time.
For the first one
$('.reply-comment').on('click', function(e){
e.preventDefault();
// Hide others
$(".reply-comment-form").hide();
// Show the one which is required
$(this).next('.reply-comment-form').show();
});
And for second, do a .on("submit"... on the form and it will serialize the right input fields only.
UPDATE:
<form class="comment_form" method="post">
<textarea name="comment_box" rows="6" class="span10"></textarea> <br /><br />
// Change type to submit and remove onclick
<input type="submit" class="btn btn-primary" value="send" />
</form>
jQuery:
$(".comment_form").on("submit", function(e){
e.preventDefault(); // Here
var _data = $(this).serialize();
$.ajax({
type: "POST",
data : _data,
cache: false,
url: 'test.php',
success: function(data){
console.log(data);
}
});
});
I found a solution. #void helped me for this.
$(".test").on("click", function(){
var _data = $(this).parent().serialize();
$.ajax({
type: "POST",
data : _data,
cache: false,
url: 'test.php',
success: function(data){
}
});
});
Thanks!
I'm trying to post a single form to two pages. The first page is loacally hosted and other one is a remote page which need to be redirected after posting to first page. I can use jquery to post the form but have no idea how to post to the remote server's file.
My form is like:
<form method ='POST' action='https://remotewebsite.com/api/step1.asp' id='payment_form' class='form-horizontal' >
<div class='form-body'>
<input type='hidden' name='group' value='$net_amount'/>
<input type='hidden' name='type' value='$payment_type' />
<div class='modal-footer'>
<button type='button' class='btn default' data-dismiss='modal'>Cancel</button>
<input type='button' id='pay' name='pay' value='pay' class='btn green' />
</div>
</div>
</form>
I can use jquery to post it to my other page say "process.php" but couldn't find any way to submit the form again to the url https://remotewebsite.com/api/step1.asp
<script type="text/javascript">
$('input[type=button]').click(function(e){
e.preventDefault(); // prevent the browser's default action of submitting
$.ajax({
type: "POST",
url: "process.php",
data=$("#payment_form").serialize(),
data: data,
dataType: "html",
});
});
</script>
One solution would be to POST to your process.php script as you currently are.
Then after you've finished processing, fire off a cURL POST request to the remote server (from your process.php script. If you Google for PHP curl post request you should find a load of articles telling you how to do so, e.g: http://davidwalsh.name/curl-post
how about just simply duplicate $.ajax?
<script type="text/javascript">
$('input[type=button]').click(function(e){
e.preventDefault(); // prevent the browser's default action of submitting
$.ajax({
type: "POST",
url: "process.php",
data=$("#payment_form").serialize(),
data: data,
dataType: "html",
});
$.ajax({
type: "POST",
url: "https://remotewebsite.com/api/step1.asp",
data=$("#payment_form").serialize(),
data: data,
dataType: "html",
});
});
</script>
First let me say I'm new to Ajax. I've been reading articles from jquery.com and some tutorials but I didn't figured it out yet how this works on what I'm trying to achieve.
I am trying to get the weather for a searched city using Google's Weather API XML, without page refresh.
I managed to retrieve the Weather XML and parse the data but everytime I search for a different place, the page reloads since my weather widget is under a tab.
This is what I have in my HTML:
<script type="text/javascript">
$(document).ready(function(){
// FOR THE TAB
$('.tab_btn').live('click', function (e) {
$('.tab_content').fadeIn();
});
$(".submit").click(function(){
$.ajax({
type : 'post',
url:"weather.php",
datatype: "text",
aysnc:false,
success:function(result){
$(".wedata").html(result);
}});
});
});
</script>
<style>.tab_content{display:none;}</style>
</head><body>
<input type="button" value="Show Content" class="tab_btn">
<div class="tab_content">
<h2>Weather</h2>
<form id="searchform" onKeyPress="return submitenter(this,event)" method="get"/>
<input type="search" placeholder="City" name="city">
<input type="hidden" placeholder="Language" name="lang">
<input type="submit" value="search" class="submit" style="width:100px">
</form>
<div id="weather" class="wedata">
</div>
</div>
And here is the actual demo I'm working on: http://downloadlive.org.
Now, if I add action="weather.php" on the search form I get the results, but I get redirected to weather.php which is logical. Without the action="weather.php", everytime I search my index which I'm on, adds up /?city=CITY+NAME which shouldn't. This should be added to weather.php, get the results and then retrieve them back into my index, if that makes sense?
This is my php code for weather.php: http://pastebin.com/aidXCeQg
which can be viewed here: http://downloadlive.org/weather.php
Can someone please help me out with this please?
Thanks alot
You just need to return false; from the click event handler. This will prevent the default action from occuring - in this case, submitting the form. Also, remove the async: false setting. You almost never want synchronous ajax requests.
$(".submit").click(function(){
$.ajax({
type : 'post',
url:"weather.php",
datatype: "text",
success: function(result){
$(".wedata").html(result);
}
});
return false;
});
Alternately you can pass a parameter name to the callback and then use event.preventDefault() to accomplish the same result as above:
$(".submit").click(function(e){
$.ajax({
type : 'post',
url:"weather.php",
datatype: "text",
success: function(result){
$(".wedata").html(result);
}
});
e.preventDefault();
});
You need to send the form data with the POST. It's super-easy to do this using .serialize().
$(".submit").click(function(){
$.ajax({
type : 'post',
url:"weather.php",
data: $(this.form).serialize(),
datatype: "text",
success: function(result){
$(".wedata").html(result);
}
});
return false;
});
im trying to achieve the following, in php i have a form like this:
<form method="post" id="form_1" action="php.php">
<input type="submit" value="add" name="sub"/>
<input type="submit" value="envoi" name="sub"/>
</form>
the form action file is:
<?php
if( $_POST["sub"]=="add"){ ?>
<script>
alert("")
</script>
<?php echo "ZZZZZZ"; ?>
<?php } ?>
so this means if i press sub with value add an alert prompt will come up, how can i do the same thing(differentiate both submit) but using a Ajax request:
the following code so does not work:
$(function(){
$('form#form_1').submit(function(){
var _data= $(this).serialize()
$.ajax({
type: 'POST',
url: "php.php?",
data:_data,
success: function(html){
$('div#1').html(html)
}
})
})
})
</script>
</head>
<body>
<div id="1" style="width: 100px;height: 100px;border: 1px solid red"></div>
<form method="post" id="form_1" action="javascript:;">
<input type="submit" value="add" name="sub"/>
<input type="submit" value="envoi" name="sub"/>
</form>
</body>
You could put the event handler on the buttons instead of on the form. Get the parameters from the form, and then add a parameter for the button, and post the form. Make sure the handler returns "false".
$(function() {
$('input[name=sub]').click(function(){
var _data= $('#form_1').serialize() + '&sub=' + $(this).val();
$.ajax({
type: 'POST',
url: "php.php?",
data:_data,
success: function(html){
$('div#1').html(html);
}
});
return false;
});
});
You have to explicitly add the "sub" parameter because jQuery doesn't include those when you call "serialize()".
In this case you need to manually add the submit button to the posted data, like this:
$(function(){
$('form#form_1 :submit').submit(function(){
var _data = $(this).closest('form').serializeArray(); //serialize form
_data.push({ name : this.name, value: this.value }); //add this name/value
_data = $.param(_data); //convert to string
$.ajax({
type: 'POST',
url: "php.php?",
data: _data,
success: function(html){
$('div#1').html(html);
}
});
return false; //prevent default submit
});
});
We're using .serializeArray() to get a serialized version of the form (which is what .serialize() uses internally), adding our name/value pair to that array before it gets serialized to a string via $.param().
The last addition is a return false to prevent the default submit behavior which would leave the page.
Lots of semicolon missing, see below
$(function(){
$('form#form_1').submit(function(){
var _data= $(this).serialize();
$.ajax({
type: 'POST',
url: "php.php?",
data:_data,
success: function(html){
$('div#1').html(html);
}
});
});
});
jQuery Form plugin provide some advance functionalities and it has automated some tasks which we have to do manually, please have a look at it. Also it provides better way of handling form elements, serialization and you can plug pre processing functions before submitting the form.