i am trying to prevent the form from executing if the search field is blank.
html
<form id="form" action="">
<input type="text" id="lookup"><input type="submit" id="find" value="Look Up">
</form>
jquery
$('#find').click(function(){
var s = ('#lookup').attr('value');
if(s!=""){
$.ajax({
url: result/,
type:'POST',
data: s
success: function(){ //empty }
});
}
});
also tried
action="result" //form the form
$('#find').click(function(){
var s = ('#lookup').attr('value');
if(s!=""){
$("#form").submit();
}
});
Bind the submit event, and return false when the search field is blank, and true if it isn't. Returning false will prevent the form from being submitted.
$("form").submit(function() {
var s = $.trim($('#lookup').val());
if (s) {
$.ajax();
return true;
}
return false;
});
DEMO.
you can simple add do this
$('#find').click(function(){
var s = ('#lookup').attr('value');
if(s==""){
return false;
}
});
$('#find').click(function(e){
var s = ('#lookup').attr('value');
if(s!=""){
$.ajax({
url: result/,
type:'POST',
data: s
success: function(){ //empty }
});
}
e.preventDefault();
});
e.preventDefault() will stop submit button from actually submitting a form. Or you can use return false.
But suppose in your case it will be enough to do something like:
$('#find').click(function(e){
var s = ('#lookup').attr('value');
if(s==""){
e.preventDefault();
}
});
try
$('#find').click(function(){
var s = ('#lookup').val();
if(s!="" && s != undefined && s!=null){
//do your business here
}
});
Related
<script type="text/javascript">
//$('#student').change(function() {
$('#but').click(function() {
var payid = $("#feType").val();
var course = $("#course").val();
var course_id = $("#course_id").val();
var stud_id = $("#student").val();
var paid_amt1 = $("#paid_amt").val();
var serializedData = $("form").serialize();
$.ajax({
dataType: "json",
url: '<?php echo ADMINPATH;?>student/getNewFee/'+payid+'/'+course_id+'/'+stud_id+'/'+course,
data: '',
async: true,
success: function(data){
if(data == false){
$("form").unbind('submit').submit();
alert("This student doesn't have transport");
return false;
}
var result = data;
if(Number(result) >= Number(paid_amt1)){
$("#fee_data").submit(function(){
return true;
});
}else {
$("form").unbind('submit');
alert("Due Amount is less than paid amount");
return false;
}
}
});
});
</script>
If the data is coming to if condition the form has to submit, and if data is coming to else condition form submitting should stop. "if" condition is working well, but coming to else the form is still getting submitted.
You are calling submit() method from else portion.
Remove below code from else portion.
$("form").unbind('submit').submit();
Remove this line, it is not needed and you are triggering the submit with it:
$("form").unbind('submit').submit();
If you only want to remove the on submit callback, you can do this:
$("form").unbind('submit');
You need to add a return false before the end of the click event:
$('#but').click(function() {
// ....
return false;
});
I am trying to do a simple ajax form post. I think there is an issue with my code at the $.ajax lines. Once the code hits the $.ajax portion, console.log() fails to work and the form just redirects conventionally to the ajax-report-comment.php page and not through ajax. Up to this part my console.log function reports data and doesn't redirect to the page.
Does any one see what I am doing wrong here? Essentially on success I want it to alert the user of successful report.
Thanks in advance!
Code:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('form.ajax').on('submit',function() {
var that = $(this),
url = that.attr('action'),
method = that.attr('method'),
data = {};
that.find('[name]').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
$.ajax({
url: url,
type: type,
data: data,
success: function(response) {
console.log(response);
}
});
return false;
});
});
</script>
</head>
<body>
<form method="post" action="ajax-report-comment.php" class="ajax">
<input type="submit" value="Report" />
<input class="field" type="hidden" name="report_user_id" id="report_user_id" value="5"/>
<input class="field" type="hidden" name="report_comment_id" id="report_comment_id" value="33543"/>
</form>
</body>
</html>
I'm pretty sure return false; to cancel default actions is deprecated in modern versions of jQuery (if you use the migrate plugin, you will see warnings about that), so you should use:
$('form.ajax').on('submit',function(e) {
e.preventDefault();
// the rest of your code
I wanted to add to #jeroen answer a bit:
Use event.preventDefault() as he suggests, but also check into .serialize().
You could replace this entire block of code (from your code above):
// Replace this entire block with jQuery's serialize
that.find('[name]').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
With:
var data = $(this).serialize();
Thanks to Jeroen I was able to find that error of anonymous function. I had method where I should have had type in the var.
Corrected functioning js code:
$(document).ready(function(){
$('form.ajax').on('submit',function(e) {
e.preventDefault();
var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = {};
that.find('[name]').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
$.ajax({
url: url,
type: type,
data: data,
success: function(response) {
console.log(response);
}
});
return false;
});
});
I have the following AJAX script, but for some reason the var ok it's not returning true or false so the form can continue:
function ajax_call(email,title,url){
var email = document.getElementById("email").value;
var title = document.getElementById("title").value;
var url = document.getElementById("url").value;
var parametros = {"emaail":email, "tiitle":title, "uurl":url};
var ok = true;
$.ajax({
data: parametros,
url: 'validate.php',
type: 'post',
error: function () {
alert("An error has occurred! Try Again!");
},
success: function (response) {
if(response == 'bien') { ok = true; } else { $("#ajax_cal").html(response); ok = false; }
}
});
return ok;
}
HTML:
<form onsubmit="return ajax_call();">
...
</form>
PHP:
<?php
//////....
if(!empty($errors)) {
foreach($errors as $error) {
echo '<li>'.$error.'</li>';
}
} else { echo 'bien'; }
?>
Everything works good, except for the return value.
Thanks in advance.
Prevent the submit completely, send the ajax request, then if it's good, submit the form.
HTML:
<form id="myform">
...
</form>
JavaScript:
$("#myform").submit(function(e){
// prevent submit
e.preventDefault();
var email = document.getElementById("email").value;
var title = document.getElementById("title").value;
var url = document.getElementById("url").value;
var parametros = {"emaail":email, "tiitle":title, "uurl":url};
$.ajax({
data: parametros,
url: 'validate.php',
type: 'post',
context: this,
error: function () {
alert("An error has occurred! Try Again!");
},
success: function (response) {
if($.trim(response) == 'bien') {
this.submit(); // submit, bypassing jquery bound event
}
else {
$("#ajax_call").html(response);
}
}
});
});
You are returning ok at the end of your function. This is returned before your ajax request is sent and completed.
You cannot rely on the return value of your function, you should do something inside your "success" part. It basically depends on what you want to do with your return value
I'm a complete newbie to jquery but in some of the scripts I've been working on I've had to prefix the 'response' you have.
For instance...
if(response.tiitle == 'bien') { ok = true; } else { $("#ajax_cal").html(response); ok = false; }
Also be aware you have double letters in your "parametros" but I'm sure that was intentional (i.e. tiitle and not title etc).
I have an Jquery submit textarea, now I want to set textarea submit without button submit. Just using enter key.
<textarea id="ctextarea"></textarea>
Here it's the JS :
$('.comment_button').live("click",function()
{
var ID = $(this).attr("id");
var uid = $("#uid").val();
var comment= $("#ctextarea"+ID).val();
var dataString = 'comment='+ comment + '&msg_id=' + ID + '&uid=' + uid;
if(comment=='')
{
$('#ctextarea').html("").fadeIn('slow');
$("#ctextarea"+ID).focus();
}
else if (!$.trim($("#ctextarea"+ID).val()))
{
$("#ctextarea"+ID).focus();
}
else
{
$.ajax({
type: "POST",
url: "comment_ajax.php",
data: dataString,
cache: false,
success: function(html){
$("#commentload"+ID).append(html);
$("#ctextarea"+ID).val('');
$("#ctextarea"+ID).focus();
}
});
}
return false;
});
I already search the tutorials and found, but I confused where can I put the code in My JS code.
Someone can give the idea ?
Thanks for helps.
$('#ctextarea').on('keyup', function(e){
if(e.which == 13 || e.keyCode == 13){
//enter key pressed..
}
});
You can subscribe to a keydown/keyup event and submit the form inside the event handler:
var KEY_ENTER = 13;
$('#ctextarea').keyup(function (event) {
if (event.keyCode === KEY_ENTER) {
$('form').submit();
// Or perform any necessary ajax calls here
}
});
This is the code I have. I want to prevent the form from submitting if the message i receive from the php side is 0 (an error occured). If the message received is 1 I want to submit the form.
$(document).ready(function(){
$('#form').submit(function(e){
register();
});
});
function register(){
$.ajax({
type:"POST",
url:"submit.php",
data: $('#form').serialize(),
dataType: "json",
success: function(msg){
if(parseInt(msg)==1){
window.location=msg;
}
else if(parseInt(msg)==0){
$('#error_out').html(msg);
}
}
});
}
after register(); include return false;
$('#form').submit(function(e){
e.preventDefault();
//do whatever you want
});
As I understand ,Try use this:
if(parseInt(msg)==0){
$('#submit').attr('disabled','true');
}
after register(); include return false; if it doesn't work then rename register(); to register(e); and then include e.preventDefault(); e.stopPropagation(); hope it works.