Send button from a form

Asked

Viewed 55 times

0

I have a contact form on my website, only I have a problem! When I send him, he’s redirecting to the home and I don’t want him to do that I want him to stay in the same place and I can’t figure out why he would do that.

<div class="col-md-8">
   <div class="row">
      <form id="contact" action="<?= $_SERVER['PHP_SELF'] ?>" method="post">

           <div class="col-sm-6 form-group">
             <input class="form-control" name="name" type="text" placeholder="Nome" value="<?= $name ?>">
              <span class="error"><?= $name_error ?></span>
           </div>

           <div class="col-sm-6 form-group">
              <input class="form-control" name="email" type="text" placeholder="Email" value="<?= $email ?>">
               <span class="error"><?= $email_error ?></span>
            </div>

            <div class="col-sm-12 form-group">
               <textarea class="form-control" name="message" type="text" value="<?= $message ?>" rows="5"></textarea>
            </div>

             <div class="col-sm-12 form-group">
                <button class="btn pull-right" name="submit" type="submit" id="contact-submit" data-submit="...Sending">Enviar</button>
             </div>

             <div class="success"><?= $success; ?></div>
       </form>
    </div>
  </div>
php html

  • <?= $_SERVER['PHP_SELF'] ?> he’s not at home?

  • yes you are! but the page is divided into 4 parts, and in the 4th I have the contacts where it contains the form and when I press send it goes to the top of the page and I do not want that, I want it to be in the contacts section.

  • Read about Fragment of the URL.

  • When submitting the form the page is reloaded, it goes to the beginning.

  • and how can I make the page not be reloaded again? it is even when missing fields to fill it should remain in the same place, but not it goes also to the top of the page and then when I scroll to the form I have there the message that the fields to fill.

  • For the page not to be loaded you will have to use Ajax.... for the form not to be sent with empty fields, you can use required or validate via Javascript.

  • Only that the required only works in HTML5, so I find it more valid to do via JS

  • But I already have this evaluation in Java, for example I put the name, but I do not put the email and upload to send, it goes to the top of the page and then when I scroll appears there message that the email is missing. That’s where my problem is, I want it to stay in the same place, because otherwise it feels like the email has already been sent and has not been sent, because there are still fields to fill.

  • So your validation is wrong, it is allowing the sending of the form even without the fields being properly filled.

  • @Chip The question is about positioning after post or form validation?

  • @Leandroangelo after the post, because he if I do not fill in the fields does not send the email, so is doing well the validation of the fields.

  • @Chip you tested my suggestion?

  • @Leandroangelo yes, I had already defined this, so much so that if I click in the navigation bar in the contacts area it adds to the url /#sec_05 and if so I click in the send and it is in the contacts area, but if I don’t click the navigation bar and simply scroll when I enter the website to the contacts it doesn’t take #sec_05

Show 8 more comments

1 answer

0


You can add a hash to your action and an anchor in your html, so when reloading the page after the post, the scroll will be done to until the form again.

In your case as the target of the action is the same page, you could even use only the target <form id="contact" action="#contact" method="post">

<div class="col-md-8">       
   <div class="row">
      <a name="contact"></a>
      <form id="contact" action="<?= $_SERVER['PHP_SELF'] ?>#contact" method="post">

           <div class="col-sm-6 form-group">
             <input class="form-control" name="name" type="text" placeholder="Nome" value="<?= $name ?>">
              <span class="error"><?= $name_error ?></span>
           </div>

           <div class="col-sm-6 form-group">
              <input class="form-control" name="email" type="text" placeholder="Email" value="<?= $email ?>">
               <span class="error"><?= $email_error ?></span>
            </div>

            <div class="col-sm-12 form-group">
               <textarea class="form-control" name="message" type="text" value="<?= $message ?>" rows="5"></textarea>
            </div>

             <div class="col-sm-12 form-group">
                <button class="btn pull-right" name="submit" type="submit" id="contact-submit" data-submit="...Sending">Enviar</button>
             </div>

             <div class="success"><?= $success; ?></div>
       </form>
    </div>
  </div>

  • I’m sorry @Leandro Angelo hadn’t seen this suggestion of yours yet. Yes this way works, now yes it is as wanted ;) Thanks for the help.

Browser other questions tagged php html

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