Using Contact Form 7 in JavaScript

  • telmorocha

    (@telmorocha)


    6 years, 2 months ago

    Hi,

    I’m creating a new div, same as the one that appears on the site when I click the “Add File” button but is not giving to upload files nor select languages in the second or third div that is created when I click this button. I think the problem is that JavaScript is not recognizing the Contact Form 7 code. Can anyone help me?

    Here is my code.

    //BEGIN OF HTML

    <div id = "alldiv" style = "border: 1px solid lightgrey; padding: 10px; padding-left: 15px; padding-top: 15px;">
            <div class="input-group">
                <span class="input-group-btn">
                <span class="button btn-primary btn-file">[:pt]Procurar[:en]Find File[:es]Encontrar archivo[:fr]Rechercher un fichier[:]&hellip; [multifile your-file filetypes:pdf|txt limit:2mb]</span>
                </span><input type="text" class="form-control" readonly placeholder="[:pt]Documento para tradução[:en]Document for translation[:es]Documento de traducción[:fr]Document à traduire[:]"></div>
            </br>
    
            <div id = "container1">
                <div class="row">
                    <div class="columns twelve">
                        <div class="lang-container">
                            <p class="pleft"><span>[:pt]Traduzir de[:en]Translate from[:es]Traducir de[:fr]Traduire de[:]</span></p>
                            <div class="lang-selectable">
                                <span class="wpcf7-form-control-wrap your-pares"><select name="your-pares" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"><option value="">---</option><option value="Alemão">German</option><option value="Búlgaro">Bulgarian</option><option value="Castelhano">Spanish</option><option value="Checo">Czech</option><option value="Croata">Croatian</option><option value="Dinamarquês">Danish</option><option value="Eslovaco">Slovak</option><option value="Esloveno">Slovenian</option><option value="Estoniano">Estonian</option><option value="Finlandês">Finnish</option><option value="Francês">French</option><option value="Grego">Greek</option><option value="Húngaro">Hungarian</option><option value="Inglês">English</option><option value="Irlandês">Irish</option><option value="Italiano">Italian</option><option value="Letão">Latvian</option><option value="Lituano">Lithuanian</option><option value="Maltês">Maltese</option><option value="Neerlandês">Dutch</option><option value="Polaco">Polish</option><option value="Português">Portuguese</option><option value="Romeno">Romanian</option><option value="Sueco">Swedish</option></select></span>
                            </div>
                            <p class="pright"><span>[:pt]para[:en]to[:es]para[:fr]à[:]</span>
                            <div class="lang-selection">
                                <span class="wpcf7-form-control-wrap your-paresb"><select name="your-paresb" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"><option value="">---</option><option value="Alemão">German</option><option value="Búlgaro">Bulgarian</option><option value="Castelhano">Spanish</option><option value="Checo">Czech</option><option value="Croata">Croatian</option><option value="Dinamarquês">Danish</option><option value="Eslovaco">Slovak</option><option value="Esloveno">Slovenian</option><option value="Estoniano">Estonian</option><option value="Finlandês">Finnish</option><option value="Francês">French</option><option value="Grego">Greek</option><option value="Húngaro">Hungarian</option><option value="Inglês">English</option><option value="Irlandês">Irish</option><option value="Italiano">Italian</option><option value="Letão">Latvian</option><option value="Lituano">Lithuanian</option><option value="Maltês">Maltese</option><option value="Neerlandês">Dutch</option><option value="Polaco">Polish</option><option value="Português">Portuguese</option><option value="Romeno">Romanian</option><option value="Sueco">Swedish</option></select></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <input type="button" class = "button" id = "add" value="Adicionar Language" name="add" /></br>
        </div></br>

    //END OF HTML

    //BEGIN OF JAVASCRIPT (THIS CODE IS IN MY HEADER.PHP)

    $(document).ready(function(e){
        var y = 1;
        var form1 = '<div id = "alldiv" style = "border: 1px solid lightgrey; padding: 10px; padding-left: 15px; padding-top: 15px;"><div class="input-group"><span class="input-group-btn"><span class="button btn-primary btn-file">[:pt]Procurar[:en]Find File[:es]Encontrar archivo[:fr]Rechercher un fichier[:]&hellip; [multifile your-file1 filetypes:pdf|txt limit:2mb]</span></span><input type="text" class="form-control" readonly placeholder="[:pt]Documento para tradução[:en]Document for translation[:es]Documento de traducción[:fr]Document à traduire[:]"></div></br><div id = "container1"><div class="row"><div class="columns twelve"><div class="lang-container"><p class="pleft"><span>[:pt]Traduzir de[:en]Translate from[:es]Traducir de[:fr]Traduire de[:]</span></p><div class="lang-selectable"><span class="wpcf7-form-control-wrap your-pares"><select name="your-pares" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"><option value="">---</option><option value="Alemão">German</option><option value="Búlgaro">Bulgarian</option><option value="Castelhano">Spanish</option><option value="Checo">Czech</option><option value="Croata">Croatian</option><option value="Dinamarquês">Danish</option><option value="Eslovaco">Slovak</option><option value="Esloveno">Slovenian</option><option value="Estoniano">Estonian</option><option value="Finlandês">Finnish</option><option value="Francês">French</option><option value="Grego">Greek</option><option value="Húngaro">Hungarian</option><option value="Inglês">English</option><option value="Irlandês">Irish</option><option value="Italiano">Italian</option><option value="Letão">Latvian</option><option value="Lituano">Lithuanian</option><option value="Maltês">Maltese</option><option value="Neerlandês">Dutch</option><option value="Polaco">Polish</option><option value="Português">Portuguese</option><option value="Romeno">Romanian</option><option value="Sueco">Swedish</option></select></span></div><p class="pright"><span>[:pt]para[:en]to[:es]para[:fr]à[:]</span><div class="lang-selection"><span class="wpcf7-form-control-wrap your-paresb"><select name="your-paresb" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"><option value="">---</option><option value="Alemão">German</option><option value="Búlgaro">Bulgarian</option><option value="Castelhano">Spanish</option><option value="Checo">Czech</option><option value="Croata">Croatian</option><option value="Dinamarquês">Danish</option><option value="Eslovaco">Slovak</option><option value="Esloveno">Slovenian</option><option value="Estoniano">Estonian</option><option value="Finlandês">Finnish</option><option value="Francês">French</option><option value="Grego">Greek</option><option value="Húngaro">Hungarian</option><option value="Inglês">English</option><option value="Irlandês">Irish</option><option value="Italiano">Italian</option><option value="Letão">Latvian</option><option value="Lituano">Lithuanian</option><option value="Maltês">Maltese</option><option value="Neerlandês">Dutch</option><option value="Polaco">Polish</option><option value="Português">Portuguese</option><option value="Romeno">Romanian</option><option value="Sueco">Swedish</option></select></span></div></div></div></div></div><input type="button" class = "button" id = "add" value="Adicionar Par Linguístico" name="add" /></br></div></br>';
        var form2 = '<div id = "alldiv" style = "border: 1px solid lightgrey; padding: 10px; padding-left: 15px; padding-top: 15px;"><div class="input-group"><span class="input-group-btn"><span class="button btn-primary btn-file">[:pt]Procurar[:en]Find File[:es]Encontrar archivo[:fr]Rechercher un fichier[:]&hellip; [multifile your-file2 filetypes:pdf|txt limit:2mb]</span></span><input type="text" class="form-control" readonly placeholder="[:pt]Documento para tradução[:en]Document for translation[:es]Documento de traducción[:fr]Document à traduire[:]"></div></br><div id = "container1"><div class="row"><div class="columns twelve"><div class="lang-container"><p class="pleft"><span>[:pt]Traduzir de[:en]Translate from[:es]Traducir de[:fr]Traduire de[:]</span></p><div class="lang-selectable"><span class="wpcf7-form-control-wrap your-pares"><select name="your-pares" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"><option value="">---</option><option value="Alemão">German</option><option value="Búlgaro">Bulgarian</option><option value="Castelhano">Spanish</option><option value="Checo">Czech</option><option value="Croata">Croatian</option><option value="Dinamarquês">Danish</option><option value="Eslovaco">Slovak</option><option value="Esloveno">Slovenian</option><option value="Estoniano">Estonian</option><option value="Finlandês">Finnish</option><option value="Francês">French</option><option value="Grego">Greek</option><option value="Húngaro">Hungarian</option><option value="Inglês">English</option><option value="Irlandês">Irish</option><option value="Italiano">Italian</option><option value="Letão">Latvian</option><option value="Lituano">Lithuanian</option><option value="Maltês">Maltese</option><option value="Neerlandês">Dutch</option><option value="Polaco">Polish</option><option value="Português">Portuguese</option><option value="Romeno">Romanian</option><option value="Sueco">Swedish</option></select></span></div><p class="pright"><span>[:pt]para[:en]to[:es]para[:fr]à[:]</span><div class="lang-selection"><span class="wpcf7-form-control-wrap your-paresb"><select name="your-paresb" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"><option value="">---</option><option value="Alemão">German</option><option value="Búlgaro">Bulgarian</option><option value="Castelhano">Spanish</option><option value="Checo">Czech</option><option value="Croata">Croatian</option><option value="Dinamarquês">Danish</option><option value="Eslovaco">Slovak</option><option value="Esloveno">Slovenian</option><option value="Estoniano">Estonian</option><option value="Finlandês">Finnish</option><option value="Francês">French</option><option value="Grego">Greek</option><option value="Húngaro">Hungarian</option><option value="Inglês">English</option><option value="Irlandês">Irish</option><option value="Italiano">Italian</option><option value="Letão">Latvian</option><option value="Lituano">Lithuanian</option><option value="Maltês">Maltese</option><option value="Neerlandês">Dutch</option><option value="Polaco">Polish</option><option value="Português">Portuguese</option><option value="Romeno">Romanian</option><option value="Sueco">Swedish</option></select></span></div></div></div></div></div><input type="button" class = "button" id = "add" value="Adicionar Par Linguístico" name="add" /></br></div></br>';
        var div = document.createElement('div');
        $("#newdiv").click(function(e){
            if (y == 1) {
                $("#alldiv").append(form1);
                y++;
            } else if (y == 2) {
                $("#alldiv").append(form2);
                y++;
            }
        });
    });

    //END OF JAVASCRIPT

    The page I need help with: [log in to see the link]

  • The topic ‘Using Contact Form 7 in JavaScript’ is closed to new replies.