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>
Related
i have a form and i wanna use jQuery with it. but when i submit it it just doesnt use the code at all.
<form id="form">
<label>Name</label><br />
<input type="text" name="name"><br /><br />
<label>Message</label><br />
<textarea name="message"></textarea><br /><br />
<button type="submit">Submit form</button>
</form>
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous">
//have to use jQuery to get the form data
jQuery(document).ready(function($){
$('#form').submit(function(e){
e.preventDefault();
alert('hello');
var data = $(this).serialize();
$.ajax({
url: 'http://localhost:8888/wp-json/v1/contact_form/submit',
type: 'POST',
data: data,
success: function(response){
console.log(response);
}
});
});
});
</script>
i used a alert to see if it works but it just does nothing.
when i submit i get to a blank page. so the e.preventDefaults also doesnt work.
i tried using copilot but it didnt do anything usefull
You must declare your scripts in different tags.
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script>
//have to use jQuery to get the form data
jQuery(document).ready(function($){
$('#form').submit(function(e){
e.preventDefault();
alert('hello');
var data = $(this).serialize();
$.ajax({
url: 'http://localhost:8888/wp-json/v1/contact_form/submit',
type: 'POST',
data: data,
success: function(response){
console.log(response);
}
});
});
});
</script>
I just want to know how i can send a "callback" message for "success" or "error".
I really don't know much about jquery/ajax, but, i tried to do this:
I have a basic form with some informations and i sent the informations for a "test.php" with POST method.
My send (not input) have this id: "#send". And here is my JS in the index.html
$(document).ready(function() {
$("#send").click(function(e) {
e.preventDefault();
$(".message").load('teste.php');
});
});
And, in my PHP (test.php) have this:
<?php
$name = $_POST['name'];
if($name == "Test")
{
echo "Success!";
}
else{
echo "Error :(";
}
?>
When i click in the button, the message is always:
Notice: Undefined index: name in /Applications/XAMPP/xamppfiles/htdocs/sites/port/public/test.php on line 3
Error :(
Help :'(
This is your new JS:
$(document).ready(function()
{
$("#send").click(function(e) {
e.preventDefault();
var form_data = $("#my_form").serialize();
$.post('teste.php', form_data, function(data){
$(".message").empty().append(data);
});
});
});
This is your new HTML:
<form id="my_form">
<input type="text" name="name" value="" />
<input type="button" id="send" value="Send" />
</form>
The problem is you have not passed name data to your PHP Use My Javascript Code.
Problem in understanding please reply
$(document).ready(function() {
$(document).on('click','#send',function(e)
{
var params={};
params.name="Your Name ";
$.post('test.php',params,function(response)
{
e.preventDefault();
alert(response); //Alert Response
$(".message").html(response); //Load Response in message class div span or anywhere
});
});
});
This is somewhat more complicated by you can use it more generally in your project. just add a new callback function for each of the forms that you want to use.
<form method="POST" action="test.php" id="nameForm">
<input name="name">
<input type="submit">
</form>
<script>
// wrap everything in an anonymous function
// as not to pollute the global namespace
(function($){
// document ready
$(function(){
$('#nameForm').on('submit', {callback: nameFormCallback },submitForm);
});
// specific code to your form
var nameFormCallback = function(data) {
alert(data);
};
// general form submit function
var submitForm = function(event) {
event.preventDefault();
event.stopPropagation();
var data = $(event.target).serialize();
// you could validate your form here
// post the form data to your form action
$.ajax({
url : event.target.action,
type: 'POST',
data: data,
success: function(data){
event.data.callback(data);
}
});
};
}(jQuery));
</script>
I'm trying to get data via ajax then send it through a form. However it doesn't seem to be working. Any ideas what im doing wrong?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form method="get" action="test.php">
<input id="myvar" type="hidden" name="albumid" />
<button type="submit" id="btnsubmit">Submit</button>
</form>
<script type="text/javascript">
$('form').submit(function() {
$.ajax({
url: "newAlbum.php",
success: function(data){
var album = data;
$('#myvar').val(album);
}
});
});
</script>
newAlbum.php
<?PHP echo '11'; ?>
test.php
<?php echo $_GET["albumid"]; ?>
Okay try adding as follows:
$('form').submit(function() {
$.ajax({
url: "newAlbum.php",
async:false,
success: function(data){
var album = data;
$('#myvar').val(album);
}
});
});
As someone else pointed out - you need to add the data parameter. But I would also use $(this).serialize(), since that will fetch all form input elements.
<script type="text/javascript">
$('form').submit(function() {
$.ajax({
url: "newAlbum.php",
data: $(this).serialize(),
success: function(data){
var album = data;
$('#myvar').val(album);
},
error : function(data) {
console.log(data);
}
});
});
</script>
Try receiving the data as JSON
$.getJSON()
I am trying to submit data to the db without refreshing the page using jquery and php
But I guess there is something I get wrong in my code , its works nicely if I do not apply Jquery :
Bellow is my code am using .
<!---Insert into database -->
<script type="text/javascript">
$(document).ready(function () {
$('.chatbutton').click(function () {
$.ajax({
type: 'post',
url: "insertchatmessages.php",
success: function () {}
});
});
});
</script>
<!---Insert into database ends here -->
</head>
<body>
<table class="chattable" id="chattable" border="0">
<tr><td><div id="load_tweets">
</div></td></tr>
<form id ="chatform" action="?" method="post"></td></tr>
<tr><td><input class ="chattext" type ="text" name="message"></td></tr>
<tr><td><input class="chatbutton" class="chatbutton" type="submit" value="send" name ="submit">
</div>
</table>
HTML (this is derived from your code but modified to work in jsfiddle):
<table class="chattable" id="chattable" border="0">
<tr>
<td>
<div id="load_tweets"></div>
</td>
</tr>
<tr>
<td>
<form id ="chatform" action="/echo/html/" method="post"> <!-- your action should point to your php (insertchatmessages.php) -->
<input type="hidden" name="html" value="This is sample text to show that this works!"/> <!-- for jsfiddle test only. remove this in your code. -->
<input class ="chattext" type ="text" name="message" />
<input class="chatbutton" class="chatbutton" type="submit" value="send" name ="submit" />
</form>
</td>
</tr>
</table>
jQuery:
$(document).ready(function(){
$('#chatform').submit(function(e){
e.preventDefault();
var $form = $(this),
data = $form.serialize();
$.ajax({
data: data,
type: $form.attr("method"),
url: $form.attr("action"),
success: function(data){
$("#load_tweets").html("<p>"+data+"</p>");
}
});
});
});
Working example: http://jsfiddle.net/darshanags/6vxMs/6/
Notes: I have made slight modifications to your code to make it work on jsfiddle, you will have to change it back to make it work in your setup.
.chatbutton is a submit button. When you click it, the jQuery handler fires, and then the form submits (which is the browser's default behavior). In your jQuery script you must call preventDefault():
$('.chatbutton').click(function(e){
e.preventDefault();
// rest of your code
Better, assign a handler to the form submit function (but still you need to prevent default behavior).
Use submit jquery function.
$('#chatform').submit(function() { });
Complete JS Code
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$('#chatform').submit(function (e)
{
e.preventDefault();
$.ajax({
type: 'post',
url: "random.php",
success: function (response)
{
//do after response.
}
});
});
});
</script>
jQuery serialize will be helful
<script type="text/javascript">
$(document).ready(function () {
$('.chatbutton').click(function (e) {
e.preventDefault();
$.ajax({
data: $('chatform').serialize(),
type: 'post',
url: "insertchatmessages.php",
success: function () {}
});
});
});
</script>
Simple user e.preventDefault() in start of your onclick call, it is used when you want to stop the default behavior:
<script type="text/javascript">
$(document).ready(function (e) {
$('.chatbutton').click(function () {
e.preventDefault();
$.ajax({
type: 'post',
url: "insertchatmessages.php",
success: function () {}
});
});
});
</script>
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 :