表单重新加载页面而不发送提交数据

Question

here's my code.

In my .js file:

function Sendit()
{
    bValidate = validateField();
    if(bValidate)
    {
        var title = $("#title").val();

        theUrl = 'index.php';

        params = '';
        params += 'action=Send';   
        params += '&title='+title;        
        $.ajax ({
            url: theUrl,
            data: params,
            async:true,
            success: function (data, textStatus)
            {
                //do smth
                alert('went well'); 

            }
            ,
          error: function(jqXHR, textStatus, errorThrown) 
          {
            alert(errorThrown);
          }
        }); 
    }
}

function validateField()
{
        var title = document.getElementById('title').value;         
        if(!title.match(/\S/)) 
        {
            //do some alerting 
            return false;
        }
        else
        {
         return true;
        }
}

And in my index.php file:

<form action="" method="post" name="myform" id="myform"" > 
Title:  <input class="" type="text" name="title" value="" id="title"/> <br>
<input type="submit" value="Submit"  onClick="javascript:Sendit();return false; "> 
</form>

<?php
if ($_REQUEST["action"]=='Send')
{
  $title = $_REQUEST["title"];  


        $sql = "INSERT INTO ...
       $retval = $mysqli->query($sql, $conn);

       if(! $retval ) {
          echo('Could not enter data insert: ' . mysql_error());
       }
       else
       {
       //inform that everything went well 

       }
       ?>

This does not send a thing when the sunmit button is clicked. In fact, you can click the button until the end of the day that nothing happens (not even a message in the debugger)

If I delete the return false; from the onClick in the button, I click on the button and the page reloads even without filling in the title input which has to be filled in.

Ajax's success does not alert a thing and in both cases, nothing gets inserted in my database.

The insert query is correct, I've checked it.

Any ideas on how to send the data and validate?

Thanks

Answer 1

your validateField() function never returns true, so your if(bValidate) will never run. Javascript functions return undefined unless you explicitly return something, try this:

function validateField()
{
    var title = document.getElementById('title').value;         
    if(!title.match(/\S/)) 
    {
        //do some alerting 
        return false;
    } esle {
        return true;
    }
}

Answer 2

Use below Code to send req.

function Sendit()
{
bValidate = validateField();
if(bValidate)
{
    var title = $("#title").val();

    theUrl = 'index.php';

    params = {};
    params["action"] = 'Send';   
    params["title"] = title;        
    $.ajax ({
        url: theUrl,
        data: params,
        async:true,
        success: function (data, textStatus)
        {
            //do smth
            alert('went well'); 

        }
        ,
      error: function(jqXHR, textStatus, errorThrown) 
      {
        alert(errorThrown);
      }
    }); 
  }
}