lundi 30 août 2021

I want to preview HTML form data in pop window before submit. How to do that using JavaScript?

Following is my HTML Code having two buttons, Preview and Submit. I want to pop a window showing form preview when click on Preview and then submit the form when I click on Submit.

    <form action="">
    <div class="search-form">
        <div class="form-header">
            <h4>Post a New Job</h4>
        </div>

        <label for="job_title">Job Title</label>
        <input type="text" name="job_title" id="job_title" placeholder="Hiring for which position">


        <label for="company">Company Name</label>
        <input type="text" name="company" id="company" placeholder="Name of the hiring organization">


       
        <label for="experience-required">Total Experience Required</label>
        <div class="input-range">
            <input type="number" min="0" max="50" name="experience-required-min" id="experience-required-min"
                placeholder="Min in Years">
            <span>To</span>
            <input type="number" min="0" max="50" name="experience-required-max" id="experience-required-max"
                placeholder="Max in Years">
        </div>
        <label for="salary-range">Salary Range</label>
        <div class="input-range">
            <input type="number" min="0" max="50" name="salary-range-min" id="salary-range-min"
                placeholder="Min in Lpa">
            <span>To</span>
            <input type="number" min="0" max="50" name="salary-range-max" id="salary-range-max"
                placeholder="Min in Lpa">

        </div>
        
        </div>
        <label for="job-desciption">Job Description</label>
        <textarea name="job-desciption" class="input-range" placeholder="Enter Job Desciption"
            style="height: 100px"></textarea>
    </div>
    <br>
    <a href="" <button class="btn btn-lg btn-warning" type="submit" name="search">Post</button>
    </a>
    <a href="" <button class="btn btn-lg btn-warning" type="submit" name="search">Preview</button>
    </a>

</form>



Aucun commentaire:

Enregistrer un commentaire