函数的返回值返回未定义

Question

I have an html which has a form that a user could enter url if the value of the input text has www. in it i will create a variable and return it to the function then pass it to the ajax but it seems that when I check it(ajaxData var) in the console it says undefined.

<form action="" id="defaultForm">
  <input type="text" id="url">
  <button id="submit">Submit</button>
</form>

JS:

$(function () {
   function myreturnValue() {
      $('#defaultForm').submit(function () {

         var w = 'www.';
         var current = $('#url').val();
         var appendW = w + current;

         if (current.match('www.')) {
            console.log('it already consists of www');
            var returnValue = 'site_url:' + current; //site_url:www.domain.com or http://
            console.log(typeof returnValue);
            return returnValue;
         } else {
            var returnValue = 'site_url:' + appendW; //www+url
            console.log(current);
            console.log(appendW);
            console.log(returnValue);
            return returnValue;
         }
      }); //end submit
   }
   var ajaxData = myreturnValue();
   console.log(typeof ajaxData);
   var data = 'data:{' + ajaxData + '}';
});

then in the ajax I will pass the data variable. I hope my explanation is kinda clear.

Answer 1

A few problems here.

Calling $('#defaultForm').submit(function () { binds a submit handler to the form. It does not submit the form nor execute the function. Please familiarize yourself with the documentation .

Your myreturnValue() doesn't return anything. You only have one top level line which is the above submit binding. Not only is it not executed, but return inside that function does not propagate up like you're expecting it to. Returning inside an event handler won't do anything in any context.

Don't declare vars inside if branches in general.

Here's a quick attempt to reorganize this code, but with this many problems the corrected code may depend on your specific needs.

(function () {
    $('#defaultForm').submit(function (event) {

        // prevent default form submit
        event.preventDefault();

        var w = 'www.';
        var current = $('#url').val();
        var appendW = w + current;
        var value;

        if (current.match('www.')) {
            console.log('it already consists of www');
            value = 'site_url:' + current; //site_url:www.domain.com or http://
            console.log(typeof returnValue);
        } else {
            value = 'site_url:' + appendW; //www+url
            console.log(current);
            console.log(appendW);
            console.log(returnValue);
        }

        var data = 'data:{' + ajaxData + '}';

        // Do whatever you want with data here

    });

    // If you want to now submit the form by hand...
    $('#defaultForm').submit();

});

Answer 2

Currently in your code, myreturnValue function only execute a code to register an event listener to your form, without return value (your return statement will only be triggered on submit event), so that's why it will return undefined at the first time.

Try this:

• Put your url detect logic in myreturnValue function
• Then put a code to prevent default submit event to be fired
• Finally register a event listener for submit button.

And your original regex www. means match www with one other character, like wwww. and www0. will be valid. You may consider changing it to other regex like this one

 $(function() { function myreturnValue() { var w = 'www.'; var current = $('#url').val(); var appendW = w + current; if (current.match(w)) { console.log('it already consists of www'); var returnValue = 'site_url:' + current; //site_url:www.domain.com or http:// console.log(typeof returnValue); return returnValue; } else { var returnValue = 'site_url:' + appendW; //www+url console.log(current); console.log(appendW); console.log(returnValue); return returnValue; } } $('#defaultForm').submit(function(e) { e.preventDefault(); }); $('#submit').on('click', function() { var data = 'data:{' + myreturnValue() + '}'; console.log(data); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="" id="defaultForm"> <input type="text" id="url"> <button id="submit">Submit</button> </form> 

Answer 3

In your code, the myreturnValue() is only return the returnValue of the function in Submit. 'myreturnValue' function return anything because it doesn't any return value.

You executed unnecessary function to get the ajaxData. To get the ajaxData, You only need to

$('#defaultForm').submit(function () {
    contents
}

If fix the code simple...

$('#defaultForm').submit(function () {
  var returnValue;
  var w = 'www.';
  var current = $('#url').val();
  var appendW = w + current;

  if (current.match('www.')) {
    console.log('it already consists of www');
    returnValue = 'site_url:' + current;   //site_url:www.domain.com or http://
    console.log(typeof returnValue);
  } else {
    returnValue = 'site_url:' + appendW; //www+url
    console.log(current);
    console.log(appendW);
    console.log(returnValue);
  }
  console.log(typeof returnValue);
  var data = 'data:{' + ajaxData + '}';
  console.log('data : ', data)
});

Please, Note : http://codepen.io/onyoon7/pen/mRdJJV