11487 sujets

JavaScript, DOM et API Web HTML5

Changer le type submit en type Button

bonsoir

Je desire modifier mon formulaire pour que la validation se fasse grâce a un type button mais après plusieurs essais cela ne fonctionne pas,

avec le formulaire comme ca et le jquery tout fonctionne, mais pour différentes raisons je dois le modifier en en button.

Voici les code;



<form id="contact">

    <div style="color: #ffff;"> * Champs Obligatoires </div>
    <div style="color: #000;">
        <div class="row">
            <div class="col-md-12 col-sm-12">
                <div class="row">
                    <div class="col-md-4 col-sm-4">
                        <div class="form-group">
                            <div class="libelle">Civilité*</div> <select name="titre">
<option value='0'>- </option> 
                              <option value='5'>Docteur </option>
                             <option value='2'>Mademoiselle </option>
                             <option value='6'>Maître </option>
                             <option value='3'>Madame </option>
                             <option value='1'>Monsieur </option>
                              <option value='7'>Monsieur et Madame </option>          </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 col-sm-6">
                        <div class="form-group">
                            <div class="libelle">Nom*</div>
                            <input type="text" name="nom" value="" minlength="2" required>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <div class="form-group">
                            <div class="libelle">Prénom*</div>
                            <input type="text" name="prenom" value="" minlength="2" required>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-sm-6">
                        <div class="form-group">
                            <div class="libelle">Email*</div>
                            <input type="text" name="email" value="" minlength="5" required>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <div class="form-group">
                            <div class="libelle">Téléphone*</div>
                            <input type="text" name="telephone" value="" minlength="10" required>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-5 col-sm-5">
                        <div class="form-group">
                            <div class="libelle">Adresse*</div>
                            <input type="text" name="adresse" minlength="10" required>
                        </div>
                    </div>
                    <div class="col-md-2 col-sm-2">
                        <div class="form-group">
                            <div class="libelle">CP* </div>
                            <input type="text" name="code_postal" minlength="5" required>
                        </div>
                    </div>
                    <div class="col-md-2 col-sm-2">
                        <div class="form-group">
                            <div class="libelle">Ville*</div>
                            <input type="text" name="ville_particulier" minlength="3" required>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-3">
                        <div class="form-group">
                            <div class="libelle">Date de naissance* </div> <input type="text" name="date_de_naissance_particulier" placeholder="JJ-MM-AAAA" required>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 col-sm-4">
                        <div class="form-group">
                            <div class="libelle">Catégorie Professionnelle*</div> <select name="profession" required>
                  <option value='0'>- </option> <option value='11'>Artisan-Commerçant</option><option value='24'>Assistante Maternelle</option><option value='20'>CDD</option><option value='13'>CDI non Cadre</option><option value='8'>CDI-Cadre</option><option value='21'>Congé Parental</option><option value='9'>Fonctionnaire (Titulaire)</option><option value='16'>Gérant- PDG</option><option value='19'>Intérimaire</option><option value='26'>Invalidité</option><option value='2'>Profession libérale</option><option value='4'>Retraité(e)</option><option value='25'>Sans Activité-Chomeur</option> 
          </select>

                        </div>
                    </div>


                    <div class="col-md-4 col-sm-4">
                        <div class="form-group">
                            <div class="libelle">Situation de Famille*</div> <select name="situation_de_famille_particulier" required>
              <option value='0'>- </option><option value='1'>Célibataire</option><option value='2'>Concubinage</option><option value='3'>Divorce</option><option value='7'>Divorce et union libre</option><option value='4'>Marie(e)</option><option value='9'>Pacsé</option><option value='8'>Séparé(e), instance de divorce</option><option value='5'>Vnion libre</option><option value='6'>Veuf(ve)</option>  </select>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4">
                        <div class="form-group">
                            <div class="libelle">Type d'hébergement*</div> <select name="hebergement_particulier" required>
<option value='0'>- </option> 
                  <option value='0'>-</option>
                              <option value='4'>Hebergement de fonction </option>
                             <option value='3'>Hebergement familial </option>
                             <option value='5'>Hebergement par l'employeur </option>
                             <option value='1'>Locataire </option>
                             <option value='6'>Locataire et proprietaire </option>
                              <option value='2'>Proprietaire </option>          
                  <option value='7'>Sans effet </option>          </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 col-sm-3">
                        <div class="form-group">
                            <center>
                                <div class="libelle"> Revenu mensuel total du ménage*</div>
                            </center> <input type="text" name="revenu_total_menage" required></div>
                    </div>
                    <div class="col-md-3 col-sm-3">
                        <div class="form-group">
                            <center>
                                <div class="libelle">Valeur de votre bien immobilier*</div>
                            </center>
                            <input type="text" name="valeur_bien_immobilier" required>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-3">
                        <div class="form-group">
                            <center>
                                <div class="libelle">Capital restant dû de votre pret* </div>
                            </center> <input type="text" name="krd_immo" required>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-3">
                        <div class="form-group">
                            <center>
                                <div class="libelle"> Montant des dettes et des crédits*</div>
                            </center> <input type="text" name="krd_total" required>
                        </div>
                    </div>
                </div>

                <center>
                    <div>
                        <p>Résumé de votre demande<br /><textarea name="resume_demande" rows="4" cols="50"></textarea> </p>
                    </div>
                </center>

                <center>
                    <div>
                        <input type="button" onclick="contact.submit()" name="submit" id="submit" value="envoyer" class="fusion-button button-flat button-round button-default button-1 button-large" />
                    </div>
                </center>
            </div>
        </div>
    </div>
</form>



<script src="https://jqueryvalidation.org/files/dist/jquery.validate.js"></script>

<script>
  jQuery("#contact").validate({
        submitHandler: function() {
           jQuery("#contact").submit(function() {

               jQuery.ajax({
                    type: 'POST',
                    url: 'demande1.php',
                    data:jQuery("#contact").serialize(),
                    dataType: 'json'
                })

                .done(function(data) {

                    alert(JSON.stringify("Votre Numero de dossier:" + data["dossier"]) + ", " +JSON.stringify(data["response"]));
                    window.location = 'home'

                })

                .fail(function(data) {


                    // just in case posting your form failed
                    alert(JSON.stringify(data['response']));

                });
            });
        },

        rules: {
            email: {
                required: true,
                email: true
            },
            telephone: {
                required: true,
                number: true
            },
            code_postal: {
                required: true,
                number: true
            }
        }
 
    });

    jQuery.extend(jQuery.validator.messages, {
        required: "Ce Champ est requis.",
        remote: "Veuillez verifier ce champ.",
        email: "Veuillez mettre une adresse email valide.",
        url: "Please enter a valid URL.",
        date: "Please enter a valid date.",
        dateISO: "Please enter a valid date ( ISO ).",
        number: "S'il vous plait, entrez un nombre valide.",
        digits: "Merci de n'entrer que des chiffres.",
        equalTo: "Entrez à nouveau la même valeur s'il vous plait.",
        maxlength:jQuery.validator.format("Please enter no more than {0} characters."),
        minlength:jQuery.validator.format("S'il vous plaît entrer au moins {0} caractères."),
        rangelength:jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
        range:jQuery.validator.format("Please enter a value between {0} and {1}."),
        max:jQuery.validator.format("Please enter a value less than or equal to {0}."),
        min:jQuery.validator.format("S'il vous plaît entrer une valeur supérieure ou égale à {0}."),
        step:jQuery.validator.format("Please enter a multiple of {0}.")

      });
</script>


Merci de votre aide
Bonjour

Je vois pas bien le problème si ce n'est peut être une mauvaise utilisation du à une méconnaissance ???

si je suppose que tu avais ceci au départ 

<input type="submit" name="submit" id="submit" value="envoyer" class="fusion-button button-flat button-round button-default button-1 button-large" />


si tu dois ABSOLUMENT avoir un button Smiley cligne 

<button type="submit" name="submit" id="submit" class="fusion-button button-flat button-round button-default button-1 button-large" />Envoyer</button>



un tour sur les attributs de type de button t'aiderai Smiley cligne

http://www.w3schools.com/tags/tag_button.asp
En faite, pour faire fonctionner une formulaire, il faut OBLIGATOIREMENT le submiter. Si tu met un input type button, on a pas le submit du formulaire, mais tu pourrais faire une action click et gérer cela autrement.

Après je n'ai aps saisi ton problème et où tu veux en venir.
Sujet clos
Aller à