CODEWITHSUNDEEP
javascriptformsurlfill
B.Felix
B.Felix

Reputation: 5

Javascript Get the actual url to fill a form

I'm acually new to Javascript and want to add a little javascript code to my WP website.

I want to do is be able to fill an URL part of my form with the actual URL. For example : we're onwww.example.com/test1 and there is a form on it with several informations and there is an URL field to fill.

I want that this field is field with the actual url www.example.com/test1

Acutally I know i have to use the window.location.href in my Javascript but how to make it fill the form ?

EDIT (Form part) :

                        <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 -->

Upvotes: 0

Views: 713

Answers (2)

B.Felix
B.Felix

Reputation: 5

Javascript :

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

HTML call the function in your input with HTML events(oclick,onload,...)

Upvotes: 0

Brank Victoria
Brank Victoria

Reputation: 1455

The way to do what you need is by get the DOM element using the property for example "type"

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

Of course if you have different DOM Elements with that type I would recommend you to assign it a unique id and then you can use as follows:

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

Upvotes: 1

Related Questions