Javascript Получить фактический URL, чтобы заполнить форму - PullRequest
Новая
       12

Javascript Получить фактический URL, чтобы заполнить форму

0 голосов
/ 26 октября 2018

Я новичок в Javascript и хочу добавить немного кода javascript на мой сайт WP.

Я хочу сделать, чтобы иметь возможность заполнить часть URL моей формы фактическим URL. Например: we're on www.example.com / test1, на нем есть форма с несколькими сведениями и поле URL для заполнения.

Я хочу, чтобы это поле было полем с фактическим URL www.example.com/test1

На самом деле я знаю, что должен использовать window.location.href в своем Javascript, но как заставить его заполнить форму?

РЕДАКТИРОВАТЬ (часть формы): 

                        <div class="job_application application">

        <input type="button" class="application_button button" value="Postuler" />

        <div class="application_details">
            <div role="form" class="wpcf7" id="wpcf7-f89-p76-o1" lang="fr-FR" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/wp/poste/recruitment-intern-human-resources-knowledge/#wpcf7-f89-p76-o1" method="post" class="wpcf7-form" enctype="multipart/form-data" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="89" />
<input type="hidden" name="_wpcf7_version" value="4.7" />
<input type="hidden" name="_wpcf7_locale" value="fr_FR" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f89-p76-o1" />
<input type="hidden" name="_wpnonce" value="2a4920fb40" />
</div>
<p><label> Votre nom (obligatoire)<br />
    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><label> Votre prénom(obligatoire)<br />
    <span class="wpcf7-form-control-wrap your-forename"><input type="text" name="your-forename" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><label> Votre adresse de messagerie (obligatoire)<br />
    <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><label> Numéro de Téléphone (obligatoire)<br />
    <span class="wpcf7-form-control-wrap your-tel"><input type="tel" name="your-tel" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><label> Votre CV (obligatoire)<br />
    <span class="wpcf7-form-control-wrap your-cv"><input type="file" name="your-cv" size="40" class="wpcf7-form-control wpcf7-file wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><label> Votre Lettre de Motivation (obligatoire)<br />
    <span class="wpcf7-form-control-wrap your-lm"><input type="file" name="your-lm" size="40" class="wpcf7-form-control wpcf7-file wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><label> Commentaire<br />
    <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> </label></p>
<p><label> URL<br />
<span class="wpcf7-form-control-wrap your-subject"><input type="url" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-url wpcf7-validates-as-required wpcf7-validates-as-url" autocomplete="on" aria-required="true" aria-invalid="false" /></span> </label></p>
<p><input type="submit" value="Envoyer" class="wpcf7-form-control wpcf7-submit" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div>       </div>
            </div>

            </div>
            </div>
            </div><!-- .entry-content -->

            <div class="shapely-next-prev row">
            <div class="col-md-6 text-left">
                <div class="wrapper"><span class="fa fa-angle-left"></span> <a href="http://192.168.125.218/wp/poste/ubisoft-montreuil-france-6-assistante-chargee-de-communication-interne-h-f-stage-6-mois-janvier-2019-communications-pr/" rel="prev">Assistant(e) Chargé(e) de Communication Interne H/F &#8211; Stage 6 mois &#8211; Janvier 2019 (Communications &#038; PR)</a></div>         </div>
            <div class="col-md-6 text-right">
                            </div>
        </div>


            </article>
        </div><!-- #primary -->
            </div>

</div><!-- #main -->

Ответы [ 2 ]

0 голосов
/ 26 октября 2018

Javascript: 

 function autoFill() 
    {
document.querySelector('[name="your-subject"]').value = window.location.href;
    }

HTML вызывает функцию ввода с событиями HTML (oclick, onload, ...)

0 голосов
/ 26 октября 2018

Способ сделать то, что вам нужно, получить элемент DOM, используя свойство, например, «type» 

document.querySelector('[type="url"]').value = window.location.href;

Конечно, если у вас есть разные элементы DOM с этим типом, я бы порекомендовал вам назначитьэто уникальный идентификатор, а затем вы можете использовать следующим образом: 

document.getElementById("myURLField").value = window.location.href;
...