How to call code in jQuery from a form request?

Question

How to call code in jQuery from a form request?

Navigation

#1 by (4 votes)

2

I have a system with several forms calling jQuery and ajax to solve the problems and register the data retrieved in the mysql database. Since I am a beginner, I am having problems due to lack of knowledge. What I learned:

<script src="jQuery"></script>
<script>
$(document).ready(function(){
      $("#enviar").click(function() {

            $nome = $("nome").val();
            if(nome != "") { tratamento e banco } else { avisa o usuário }

      });
});
</script>

<body>
      <form action="" method="post" enctype="application/x-www-form-urlencoded">
             <input type="text" id="nome">
             <input type="submit" id="enviar">
      </form>

But now I have to process 20 variables, suddenly do functions to validate some and then with ajax send to the database and process all the messages. I can not write this script any way other than in an external .js file that will be left alone for this. I tried to create an external .js but when I click send the script it does not search the .js with the #enviar parameter to start processing the form even though in form action I call the file PHP and put the jQuery inside of it.

Question: As when giving the action of the id enviar in the submit of the form, it will fetch the external file and will process all this javascript. I am a beginner but I already have systems in PHP. Now, how do I call my external javascript?

I also tried to insert it at the top of the system thinking that it would be include or require as PHP but totally unsuccessful.

php javascript jquery ajax

asked by anonymous 07.08.2014 / 04:21

1 answer

API StackOverFlow, "quota_max" Call Java class inside Oracle

score 4 · Accepted Answer

From what I understand, what you want to do is to prevent the form from being submitted if the name is not filled out. You can do this as follows:

Your HTML file will contain the following content:

    <html>
    <head>...</head>
    <body>
    <form id="formulario" action="seu-script.php" method="post" enctype="application/x-www-form-urlencoded">
         <input type="text" id="nome">
         <input type="submit" id="enviar">
    </form>
    <script type="text/javascript" src="jquery.min.js" ></script>
    <script type="text/javascript" src="seu-script.js" ></script>
    </body>
    </html>

In this way, jquery will be loaded before your script. Now, your-script.js should be the following content:

    $(function(){
          $("#formulario").submit(function(evento) {
                if (!$("#nome").val()) {
                   evento.preventDefault();
                   alert("Você deve preencher o campo nome.");
                }
          });
    });

See that instead of observing the click event of the button, the submit event of the form is observed, which is a more general event (covers the user's case simply hit the enter key).

The line "event.preventDefault ()" causes the form not to be submitted.

The line below warns the user. You may prefer to create an element on the page or show some hidden element, rather than using the alert.

When the form is submitted, it will execute its-script.php, which should revalidate the data (since the user may have disabled the javascript, or forged the sending of data through another tool other than the browser) and communicate with the database.