How to use html web resource with dynamic content.

(0) Share

Report

Posted on by EmployeeOcta

Hello All Experts,

I want to use a simple html web resource which will do below things.

1. one select (Dropdown) will have 4 options.

2. on selecting of either of the option i would like to load the contents on the form.

3. contents will have text, textarea, checkbox etc.

4. finally will have submit and cancel button.

5. dynamic contents will gets saved when click on the submit button.

I just want to use the plain html and javascript and no third party library.

if it is possible kindly help me to get sample.

*This post is locked for comments

All responses (1)

Answers (1)

Verified answer

Emre GULCAN 2,379 on at

Like (1)

Report
RE: How to use html web resource with dynamic content.

Hi,

Firstly you should add (create) all fields on your custom webresource and disable or show/hide depend on your dropdown option.

You can call external webservice or Dynamics CRM webapi on your "submit" button click event to save your data.

You can find very very simple example below;

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#ddlProcess").change(function () { var selectedValue = $(this).val(); if (selectedValue == 1) { //By Phone $("#txtEmail").attr('disabled', 'disabled'); $("#txtPhonenumber").removeAttr('disabled'); } else if (selectedValue == 2) { //By Email $("#txtPhonenumber").attr('disabled', 'disabled'); $("#txtEmail").removeAttr('disabled'); } else { //do your ELSE logic } }); $("#btnSubmit").click(function () { //call your external webservice }); }); </script> </head> <body> <select id="ddlProcess"> <option value="0">Please select</option> <option value="1">By Phone</option> <option value="2">By Email</option> </select> <label for="txtFirstname">Firstname</label> <input type="text" id="txtFirstname" /> <label for="txtLastname">Lastname</label> <input type="text" id="txtLastname" /> <label for="txtEmail">E-mail</label> <input type="text" id="txtEmail" /> <label for="txtPhonenumber">PhoneNumber</label> <input type="text" id="txtPhonenumber" /> <button id="btnSubmit">Save data</button> </body> </html>