i have two files trying to use ajax
here is code of test.php file
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript">
var email = $('#email').val();
$(document).ready(function(){
$("#submit").click(function() {
$.ajax({
url:"test1.php",
success:function(){
alert('');
}
});
});
});
</script>
</head>
<body>
<form method="post">
Email:<input type="text" name="email" id="email" />
<input type="submit" name="submit" value="submit" id="submit" />
</form>
</body>
</html>
and here is code of test1.php file
<?php
echo "hi";
exit;
?>
it is not working i am not able to get alert in sucess function
Change the submit button type to just a button. Otherwise, you are submitting the form before the ajax is firing.
Try giving a return false in the end of the click function.
var email = $('#email').val();
$(document).ready(function(){
$("#submit").click(function() {
$.ajax({
url:"",
success:function(){
alert('');
}
});
return false;
});
});
This might work!
In this case I'd use the submit event on the form because if you bind the click event on the submit button, the submit event still gets triggered.
see the example here
http://api.jquery.com/submit/
Related
We have a set up with multiple forms on a single page. We are rendering each recaptcha successfully, however I'm struggling to invoke the recaptcha challenge programatically targeted to an ID.
Looking at the docs (https://developers.google.com/recaptcha/docs/invisible#programmatic_execute) my understanding is that I can pass an ID with the execute command so the response is filled into g-response within the correct form, otherwise the response defaults to the first g-response it finds on the page (which is no good for anything other than the first form on the page).
I've tried it with a slightly modified version of Googles own example, however we get the error message 'Invalid site key or not loaded in api.js: recaptcha123' even though the key is correct.
Does anyone have any idea how we might get this working?
<html>
<head>
<script>
function onSubmit(token) {
alert('thanks ' + document.getElementById('field').value);
}
function validate(event) {
event.preventDefault();
if (!document.getElementById('field').value) {
alert("You must add text to the required field");
} else {
grecaptcha.execute('recaptcha123');
}
}
function onload() {
var element = document.getElementById('submit');
element.onclick = validate;
}
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form>
Name: (required) <input id="field" name="field">
<div id="recaptcha123" class="g-recaptcha"
data-sitekey="XXXXXXXXXXXXXXXX"
data-callback="onSubmit"
data-size="invisible"></div>
<button id="submit">submit</button>
</form>
<script>onload();</script>
</body>
</html>
The following code works:
<html>
<head>
<title>reCAPTCHA demo: Explicit render after an onload callback</title>
<script>
var onSubmit = function(token) {
console.log('success!');
};
var onloadCallback = function() {
widgetId1 = grecaptcha.render('recaptcha', {
'sitekey' : 'XXXXXXXXXXXXXXXXXX',
'callback' : onSubmit
});
};
</script>
</head>
<body>
<script src="/wp-content/themes/kc_water_care_services/js/pristine.min.js"></script>
<form action="?" method="POST" id="contactForm">
<div class="form-group">
<label for="name">Name (required)</label>
<input type="text" required data-pristine-required-message="Please enter your name"
id="name" name="name" />
</div><!--/.form-group-->
<div id="recaptcha" data-size="invisible"></div>
<input id="submit" type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer>
</script>
</body>
</html>
<script>
var form = document.getElementById("contactForm");
// create the pristine instance
var pristine = new Pristine(form);
form.addEventListener('submit', function (event) {
event.preventDefault();
// check if the form is valid
var valid = pristine.validate(); // returns true or false
if(valid == true){
grecaptcha.execute(widgetId1);
}
});
</script>
Turns out the id doesn't refer to the css ID, it refers to an ID created when you use the render function.
<!DOCTYPE html>
<head>
<meta charset=" UTF-8">
<title> Document</title>
</head>
<body id="chat">
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.0/socket.io.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<form v-on="submit: send">
<input v-model="message">
<button>Send</button>
</form>
<script>
var socket = io();
new Vue({
el: '#chat',
date: {
message: ''
},
methods: {
send: function(e)
{
e.preventDefault();
alert("a");
}
}
})
</script>
</body>
I want to call the send method defined in new Vue when the form is submitted ,
But when i submit the form, page is reloading.
I have created a Vue object and linked it to the chat element.
I guess e.preventDefault() is not working.
Interesting, I just helped somebody with a similar issue, the syntax for Vue.2.0 is v-on:submit="send" not v-on="submit: send". Vue already has a way stop the form submitting which is: v-on:submit.prevent so you don't need the e.preventDefault, you would get:
<form v-on:submit="send" v-on:submit.prevent>
or a shorter version:
<form v-on:submit.prevent="send">
There are a few more issues here, so I will go through them for you:
Firstly, you are never submitting the form. To submit a form you need a submit input, not a button:
<input type="submit" value="Send" />
However, from what I can see it's likely you don't even need a form, and can simply use a button with v-on:click:
<div>
<input v-model="message">
<button v-on:click="send">Send</button>
</div>
And then get what was submitted from the view model:
send: function()
{
alert(this.message);
}
You should also use the console (under developer tools in your browser) and log any output rather than alert (console.log(this.message)), because it will also sniff out any general errors with your code - for example I can see that you also have a typo (the same one I always make) it's data not date:
data: {
message: ''
},
Okay, what about this
<form #submit.prevent="send">
<input v-model="message">
<button>Send</button>
</form>
And then you can remove preventing default browser action from your send() method
I can't get this form to submit via Ajax to a PHP script and cannot figure out why. Please help. I am planning to use this in phone gap after development and was under the impression this ajax format would work better than xmlhttprequest method - is this really the case?
<html>
<head>
<title></title>
</head>
<body>
<h1>Welcome</h1>
<hr>
<form id="idForm" name="idForm">
<input type="text" size="8" id="date" name="date"><br>
<input type="hidden" size="8" id="reversedate" name="reversedate"><br>
<input type="hidden" size="1" id="dow" name="dow"><br>
<input type="submit" id="submitbutton" name="submitbutton">
</form>
<br><br><br>
<br>
<br>
<p id="p1">x</p>
<br>
log out
<script>
$('#submitbutton').click(function(){
$("#idForm").submit(function() {
var url = "fetchsimple.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/ui.js"></script>
</body>
</html>
I have search already on google and come empty handed because all the answer that I found are not working for me for some reason, maybe there is someone out there that can look at my codess:
<html>
<head>
<meta charset="utf-8">
<title>jQuery Adapter — CKEditor Sample</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="ckeditor.js"></script>
<script src="adapters/jquery.js"></script>
<script src="jquery.form.js"></script>
<script>
CKEDITOR.disableAutoInline = true;
$( document ).ready( function() {
$( '#editor1' ).ckeditor(); // Use CKEDITOR.replace() if element is <textarea>.
$( '#editable' ).ckeditor(); // Use CKEDITOR.inline().
} );
function setValue() {
$( '#editor1' ).val( $( 'input#val' ).val() );
}
</script>
</head>
<body>
<form id="f1" action="some.php" method="post" enctype="multipart/form-data">
<table>
<tr>
<td>Title:</td>
<td><input type="text" name="articletitle" id="articletitle" required/></td>
</tr>
<tr>
<td>Featured Image:</td>
<td><input name="MAX_FILE_SIZE" value="2097152" type="hidden">
<input name="image" id="image" type="file" required/></td>
</tr>
<tr>
<td colspan="3"><textarea cols="80" id="editor1" name="editor1" rows="10"></textarea></td>
</tr>
<tr>
<td><input id="save" type="submit" value="Save"></td>
<td><button id="reset">RESET</button></td>
</tr>
</table>
</form>
<script type="text/javascript">
$(document).ready(function(){
var options = {
success: function(){
//$("#articletitle").val("");
alert('HELLO');
}
};
$('#f1').ajaxForm(options);
//$("#button").click(function(){
// $('#f1').clearForm();
// alert("Successfully Added Record");
//});
});
</script>
</body>
</html>
I just want my user to have an alert so that they are aware that their form has been submitted.
If You want to show some of the message inside Ajax callback function You have to return some values in some.php using 'echo' and you have to put die();
eg.
echo '1'; die();
In jQuery You have to do like this:
$('#f1').ajaxForm(function(result){
if(result)
{
alert('Success');
});
// this is the id of the submit button
$("#submitButtonId").click(function() {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});
I can't make heads or tails of this and am wondering if you could help! When I click on the button, nothing happens. Ideally, I would like the form to validate before submission and to prevent submission if it doesn't validate.
<script type="text/javascript" src="../assets/js/validate/jquery.validate.min.js">
</script>
<script type="text/javascript" src="../assets/js/validate/jquery.validate.more.js">
</script>
<script type="text/javascript" language="javascript">
var J = jQuery.noConflict();
J(document).ready(function(){
J("form#nameform").validate({
rules: {
"name": {
required: true,
format: true},
},
submitHandler: function() {
J.ajax({
type: "POST",
url: "process.php",
data: J("form#nameform").serialize(),
success: function(html) {
J('form#nameform').html('hello');
}
});
};
});
});
</script>
<div id="name">
<form id="nameform" method="post">
<input id="name" class="text" name="name" size="20" type="text">
<input type="submit" value="go" />
</form>
</div>
A lot of tutorial to make Jquery Form valitation, they show how to make ajax validation too :)