We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 43592
    • 97 Posts
    Dear forum!

    I've a single page, where a lot of things happen (also other form).
    One of the forms on the page is a bootstrap modal form which I validate over JQuery and want to submit over Formit.

    The Jquery validation functions well, also the form does submit:

    
    $("#senderbutton").click(function(){		
            var form = $("#register-form");
                if (!form.valid())
                {
                 
                }
               else
               {
               $( "#register-form" ).submit();
               }
    
    });
    


    So the problem is, that the form is submitted, but it seems that formit doesnt reach or recognize the data. Is there a missing piece?
    Any ideas?

    Here is my formit call:
     [[!FormIt?
       &hooks=`spam,email,redirect`
       &emailTpl=`MyEmailChunk`
       &emailTo=`[email protected]`
       &redirectTo =`121`
       &submitVar=`senderbutton`
    &emailCC=`[[+EMailadresse]]`
    &emailSubject=`Produktbestellung`
           &successMessage=`Thanks`
       &store=`1`
    ]]
    [[!FormItRetriever]]
    
    


    And at last the modal form, which, as said works well so far:

    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
    
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="modal-title" style="color:white;"><strong>PS</strong></h4>
          </div>
          <div class="modal-body">
           Ich möchte folgende(s) Produkt(e) kaufen:
             <p>(* = Feld verpflichtend): </p>
             
         
    
              <form class="form-horizontal" id="register-form" role="form" action="[[~[[*id]]]]" method="post">
                  
                  <input type="hidden" name="nospam:blank" value="[[+fi.nospam]]" />
    
     <div class="form-group">
                   <div class="col-sm-12" style="margin-bottom:20px;">
      [[!+fi.validation_error_message:notempty=`<p>[[!+fi.validation_error_message]]</p>`]]
                  </div>
                  </div>
            <div class="form-group">
                   <div class="col-sm-12" style="margin-bottom:20px;">
                       <img src="images/produkte/gutschein.png" class="img-responsive"/>
                    </div>
                        <div class="col-sm-12 col-md-6" style="margin-bottom:20px;">
                            <label for="sel1">Anzahl Gutscheine:</label>
          <select class="form-control kleiner" id="anzahl_gutscheine" name="anzahl_gutscheine">
              <option>0</option>
            <option selected="selected" value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
                        </div>
                        
                          <div class="col-sm-12 col-md-6" style="margin-bottom:20px;">
                            <label for="sel1">im Wert von:</label>
          <select class="form-control kleiner"  id="wert_gutscheine" name="wert_gutscheine">
              <option value="30">30 €</option>
            <option value="50" selected="selected">50 €</option>
            <option value="100">100 €</option>
          </select>
                        </div>
                        
              <div class="col-sm-12"><hr style="color:grey;width:100%;"> </div>  
                        
                          <div class="col-sm-12" style="margin-bottom:20px;">
                       <img src="images/produkte/10erblock.png" class="img-responsive"/>
                    </div>
               
                  
                  
                 <div class="col-sm-12 col-md-6" style="margin-bottom:20px;">
                <label for="anzahl_blocks">Anzahl 10er Blocks zu € 87:</label>
          <select class="form-control kleiner" id="anzahl_blocks" name="anzahl_blocks">
                <option>0</option>
            <option selected>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
             <option>5</option>
          </select>
             </div>
                <div class="col-sm-12 col-md-6" style="margin-bottom:20px;">
                <label for="sel1">Gesamtpreis in Euro:</label>
        <input type="text" class="form-control kleiner" style="margin-right:20px;width:80%;" id="gesamtpreis" placeholder="Gesamtpreis" readonly/>
          
                      </div>
              <div class="col-sm-12"><hr style="color:grey;width:100%;"> </div>  
    
      </div>
     <div class="form-group">
         
         <div class="col-sm-12">
        <label>Deine Bestelldaten:</label>
        </div>                      
                 
                 
             <div class="col-sm-12 col-md-6" >   
              <label class="control-label" for="Vorname">Vorname:</label>
            <input type="text" class="form-control kleiner" style="" id="Vorname" value="[[!+fi.Vorname]]" name="Vorname" placeholder="Dein Vorname*"/>
             </div>
            
            <div class="col-sm-12 col-md-6">
                   <label class="control-label" for="Nachname">Nachname:</label>
             <input type="text" class="form-control kleiner" style="" id="Nachname" value="[[!+fi.Nachname]]" name="Nachname" placeholder="Dein Nachname*"/>
             </div>
             
     </div>
        <div class="form-group">                
                     
                        <div class="col-sm-12">
                               <label class="control-label" for="EMailadresse">E-Mailadresse:</label>
                            <input type="email" value="[[!+fi.EMailadresse]]"  style="width:80%;"  class="form-control kleiner" 
                            id="EMailadresse" name="EMailadresse" placeholder="Deine Email-Adresse*"/>
                        </div>
    </div>   
     <div class="form-group">
                           <div class="col-sm-12">
                                  <label class="control-label" for="Telefon">Telefonnummer:</label>
                            <input type="text"  style="width:80%;"  class="form-control kleiner" 
                            id="Telefon" name="Telefon" placeholder="Deine Telefonnummer*"/>
                        </div>
    
    </div>                
                      <div class="form-group">
                        
                        <div class="col-sm-12"><label class="control-label" for="Strasse">Strasse:</label>
                            <input type="text"  style=""  class="form-control kleiner"
                                id="Strasse" name="Strasse" placeholder="Strasse*"/>
                        </div>
                     </div>
                     
                       <div class="form-group">
                        <div class="col-sm-4"><label class="control-label" for="Strasse">PLZ:</label>
                            <input type="text"  class="form-control kleiner"
                                id="PLZ" name="PLZ" placeholder="PLZ*"/>
                        </div>
                     
                 
                        <div class="col-sm-12 col-md-6"><label class="control-label" for="Ort">Ort:</label>
                            <input type="text"  style=""  class="form-control kleiner"
                                id="Ort" name="Ort" placeholder="Ort*"/>
                        </div>
                          
                       <div class="col-sm-12 " style="margin-top:20px;">
                       <label class="control-label" for="Land">Land:</label>    
          <select class="form-control kleiner" id="Land" name="Land">
            <option value="Österreich" selected="selected">Österreich</option>
            <option value="Deutschland">Deutschland</option>
          </select>
                        </div>
                        
                     <div class="col-sm-12" style="margin-top:20px;">
                             
                               <label class="control-label" class="form-control"  class="">Empfohlen von:</label>
                                <input type="text"  style=""  class="form-control kleiner"
                                id="Empfehler" name="Empfehler" placeholder="Person, die Passionfitness empfohlen hat"/>
                   </div>    
                        
                        
                      </div>
                      
                    <div class="form-group">
                   <div class="col-sm-12" style="margin-bottom:20px;margin-top:20px;">
                       Wichtiger Hinweis: Deine Bestellung wird mittels "Jetzt bestellen" bei uns aufgenommen. Möchtest du gleich via Paypal zahlen, dann folge dem Vorgang, ansonsten schließe einfach das Paypal - Fenster.
                       </div>
                        <div class="col-sm-12 col-md-6">
                             <button type="button" class="btn btn-default schnupperbutton" name="abschicken"  id="abschicken" style="background:#00a1e1;color:white;" data-dismiss="modal" >Schliessen</button>
                  
                      </div>
                  <div class="col-sm-1"></div>
                      <div class="col-sm-12 col-md-6">
                <button type="button" class="btn btn-primary schnupperbutton" name="senderbutton" id="senderbutton" style="background:#00a1e1;color:white;" >Jetzt Bestellen</button>
                      </div>
                      
                    </div> 
                  
                    
                    
                      
                    
                    
                    
                    </form>
            
            
            
            
            
            
            
          </div>
          <div class="modal-footer">
            </div>
        </div>
    
      </div>  
        
    </div>




    This question has been answered by multiple community members. See the first response.

    • discuss.answer
      • 18373 ☆ A M B ☆
      • 3,141 Posts
      A button with type="button" only has its value submitted if it is clicked to submit the form. As you're submitting the form through jquery, the name/value of your form isn't submitted to the server and FormIt doesn't see the value configured as &submitVar.

      A button with type="submit" should as far as I know always submit. Alternatively, add a hidden field with the name matching the &submitVar.

        Mark Hamstra • Developer spending his days working on Premium Extras and a MODX Site Dashboard with the ability to remotely upgrade MODX and extras to make the MODX world a little better.

        Tweet me @mark_hamstra, check my infrequent blog at markhamstra.com, my slightly more frequent ramblings at MODX.today or see code at Github.
        • 28432
        • 372 Posts
        Hi, if you have multiple Forms with Formit you need to use :

        &submitVar=`contactPageFormBtn`
        &placeholderPrefix=`contact.`


        To make POST variable and submit button different for each form.

        EDIT : Mark is right !
          • 43592
          • 97 Posts
          Dear Mark and Steve,

          Thank you for your answers.

          I simply added

           <input type="hidden" name="senderbutton"  value="" />
          to the code which is the name of my "submit"-button how you see in the code. Alternatively I tried to change the submit - button to a real submit-button.

          Both with no success. Actally the submit seems to reload/submit the page but no email is submitted to the definitely correct adress added at &emailTo=`` in the Formit-Tag.

          So still no success!
            • 43592
            • 97 Posts
            And off course i added

             &submitVar=`senderbutton`
            &placeholderPrefix=`shop.`
            • discuss.answer
              • 28432
              • 372 Posts
              Can you try this quickly tutorial ? It will take less than 5 minutes to see if Formit work ;-)
              https://docs.modx.com/extras/revo/formit/formit.tutorials-and-examples/formit.examples.simple-contact-page
                • 43592
                • 97 Posts
                Actually I used Formit sucessfully 4 several times so I dont see the point to do this tutorial ...
                  • 28432
                  • 372 Posts
                  Quote from: sspind at Nov 15, 2016, 08:19 AM
                  Actually I used Formit sucessfully 4 several times so I dont see the point to do this tutorial ...
                  On this website ?
                    • 43592
                    • 97 Posts
                    Ok I try it on this website
                    • discuss.answer
                      • 17301
                      • 932 Posts
                      Not sure off hand what the issue is but I can see a lot of errors in the markup with multiple attributes ie:

                      <label class="control-label" class="form-control"  class="">Empfohlen von:</label>


                      How many classes? smiley Check your HTML thoroughly and try stripping out all of the bootcrap if you still have issues to take it back to the clean barebones of HTML and build upwards if you really have to..




                        ■ email: [email protected] | ■ website: https://alienbuild.uk

                        The greatest compliment you can give back to us, is to spend a few seconds leaving a rating at our trustpilot: https://uk.trustpilot.com/review/alienbuild.uk about the service we provided. We always drop mention of services offered by businesses we've worked with in the past to those of interest.