How to focus on a form field only if my data variable is not empty

问题

I have been using php and ajax to validate if an email inserted in my form exists in my database.

I am using jquery to send the email value to my php file and return a message if the email is found. My code is working fine but I want if an email is found the cursor be on focus on the #usu_email field until the email be changed. After this, it should allow me to continue to next field.

This is the jquery code I am using:

function getemail(value) {
  var usumail = $("#usu_email").val();

  $.ajax({
    type: "POST",
    url: "ajax_email.php",
    data: "usu_email=" + usumail,
    success: function(data, textStatus) {
      if (data !== null) {
        $("#eresult").html(data);
        $("#usu_email").focus();
      }
    },
  });
};

My problem is that if and email does not exist in my database the cursor keeps doing focus on my #usu_email field and does not allow me to continue to next field.

I will appreciate any help about this problem because I know very little about jquery.

回答1:

First... Your condition if (data !== null) always will be true since there always will be a data provided... Be it an empty string.

The only case where there will be no data is on Ajax error... And the condition won't even be evaluated because the success callback won't execute.

Next, I assume that your Ajax request is triggered on $("#usu_email") blur... Else, I don't know how you achieve «does not allow me to continue».

Modify it in this way to compare a response:

function getemail(value) {
  var usumail = $("#usu_email").val();

  $.ajax({
    type: "POST",
    url: "ajax_email.php",
    data: "usu_email=" + usumail,
    datatype: "json",
    success: function(data) {  // There is only one argument here.
      // Display the result message
      $("#eresult").html(data.message);

      if (data.email_exist == "yes") {
        $("#usu_email").focus();
      }
      if (data.email_exist == "no") {
        // Something else to do in this case, like focussing the next field.
      }
    },
  });
};

On the PHP side, you have to provide the json response. It would look like something like this:

<?php

// You have this variable to compare against the database
$email = $_POST[usu_email];

// You say it is working.
// ...
// Then, you certainly have a result... Say it's $found (true/false).

// Build an array of all the response param you want to send as a response.
if($found){
  $result[email_exist] = "yes";
  $result[message] = "The submitted email already exist.";
}else{
  $result[email_exist] = "no";
  $result[message] = "A success message about the email here.";
}

// Add this header to the returned document to make it a valid json that doesn't need to be parsed by the client-side.
header("Content-type:application/json");

// Encode the array as a json and print it. That's what is sent in data as an Ajax response.
echo json_encode($result);

?>

Be carefull not to echo anything else. Not even a blank space or a line return.

回答2:

Depends on what type of data you're expecting (simple text response or JSON), but at first i would start to replace your if(data !== null) with if(typeof data != "undefined" && data !== null && data != "") because the returned response might just be empty and not NULL. If it doesn't work you should consider adding your php code to the question so we can figure out exactly what it returns when no matching email is found.

来源：https://stackoverflow.com/questions/51544043/how-to-focus-on-a-form-field-only-if-my-data-variable-is-not-empty

标签

php

jquery

ajax

setfocus