How to call code in jQuery from a form request?

Asked

Viewed 1,797 times

2

I have a system with several forms calling jQuery and ajax to solve the problems and register the recovered data in mysql database. As 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 make functions to validate some and then with ajax send to the database and process all messages. I can’t write this script any other way than in an external . js that will stay just for that. I tried to create one . js external but when I click send the script does not search the . js with the parameter #enviar to begin processing the form even if form action I call the file PHP and put jQuery inside it.

Question: How to give id action enviar in form Submit, 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 it would be a include or require as in the PHP but totally unsuccessful.

php javascript jquery ajax

1 answer

4


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

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>

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.");
                }
          });
    });

Note that instead of observing the button click event, the form Submit event is observed, which is a more generic event (covers the case of the user simply pressing the enter key).

The line "evento.preventDefault()" causes the form to not 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 run its-script.php , which should validate the data again (because the user may have disabled javascript, or forged the sending of data through another tool other than the browser) and communicate with the database.

  • If it works, and of course it will, you’re a super-cool guy, and I’ll give you the best answer. Everyone here could be so understanding with beginners. You mean that calling my file under the form will run . js before . php? Outstanding.

  • Excellent @Daniel Neis ... thank you so much for your help. Excellent your answer which is the solution of my question. I expect thousands of nice people like you around.

  • With this experience I also discovered a little of the reason why the scripts go to the bottom of the sites, precisely to make this call before PHP among other things. Infos for beginners like me.

Browser other questions tagged php javascript jquery ajax

You are not signed in. Login or sign up in order to post.