jquery not working with if statement - php

Question

I am using an jquery script with an ajax update method that is bound to the focus event of a form element. It works, but I first want to check if the form element is not empty. As soon as I do that, the function stops working. Below is the code:
<script type="text/javascript">
if ($('#txt_updateone').val().trim().length > 0) {
function single_change(txt_updateone) {
$.ajax({
type: "POST",
data: { "txt_updateone": 1 },
url: "single_scorechange.php",
success: function (data) {
$('#listinscore').load(document.URL + '#listinscore');
},
error: function (xhr) {
alert("error");
}
});
return false;
}
}
</script>
txt_updateone is a textarea and the onfocus event calls the single_change function. When I remove the if..... on the second line, it works, but I want it to work only if the textarea is NOT empty.

Answer 1

There are two methods.
1) Validate the data at the place where you are calling this function.
2) Validate the data before sending ajax request using beforeSend.
<script type="text/javascript">
function single_change(txt_updateone) {
$.ajax({
type: "POST",
data: { "txt_updateone": 1 },
url: "single_scorechange.php",
success: function (data) {
$('#listinscore').load(document.URL + '#listinscore');
},
beforeSend: function(xhr) {
alert("Enter some value");
return $('#txt_updateone').val().trim().length > 0 ? true: false;
}
error: function (xhr) {
alert("error");
}
});
return false;
}
</script>

Answer 2

Change your code to
function single_change(txt_updateone) {
if ($('#txt_updateone').val().trim().length > 0) {
$.ajax({
type: "POST",
data: {
"txt_updateone": 1
},
url: "single_scorechange.php",
success: function(data) {
$('#listinscore').load(document.URL + ' #
listinscore ');
},
error: function(xhr) {
alert("error");
}
});
return false;
}
}
You need to perform the if check inside the method.

Answer 3

As you mentioned if condition before the function, the function is actually declared there. So you are calling the undefined function.
function single_change(txt_updateone) {
if ($('#txt_updateone').val().trim().length < 1) {
//form element is empty
return false;
}
$.ajax({
type: "POST",
data: { "txt_updateone": 1 },
url: "single_scorechange.php",
success: function (data) {
$('#listinscore').load(document.URL + '#listinscore');
},
error: function (xhr) {
alert("error");
}
});
return false;
}

Answer 4

Just swap function and if statement
//Declare function in all cases
function single_change(txt_updateone) {
//When you call function, check if statement.
if ($('#txt_updateone').val().trim().length > 0) {
$.ajax({
type: "POST",
data: { "txt_updateone": 1 },
url: "single_scorechange.php",
success: function (data) {
$('#listinscore').load(document.URL + '#listinscore');
},
error: function (xhr) {
alert("error");
}
});
return false;
}
}

Answer 5

What you are doing is defining your function only if the text area is non-empty (and it is likely that when this code runs, it may be empty). I think what you mean to do is to always have the function defined, but only execute the body if the text area has content.
If that's what you want, this may work:
<script type = "text/javascript">
function single_change ( txt_updateone ) {
var content = $('#txt_updateone').val().trim();
if (!content.length) { return; }
// now execute function with non-empty content.
}
</script>