Как получить идентификаторы div этой формы? - PullRequest
Новая
       12

Как получить идентификаторы div этой формы?

0 голосов
/ 14 сентября 2018

Работа над приложением, которое экспортирует то, что пользователь набрал в приложении, на определенный веб-сайт с аналогичными компонентами.Например, если пользователь набрал заголовок в приложении, когда он нажимает кнопку, он импортирует это значение на веб-страницу, которая также просит пользователя ввести.

Это блок-схема или что-то еще

Пользователь -> Пользователь вводит текст в приложение -> Приложение копирует то, что набрал пользователь -> Приложение открывает определенный сайт -> Приложение вставляет то, что он скопировал на сайт.

(Веб-сайт: форма Google для примера.)

Теперь я уже закончил все это, за исключением последней части, где приложение вставляет то, что он скопировал.

Проблема в том, что приложение делаетне знаю, куда его вставить.

Так что я хочу получить идентификаторы кода ниже, очень хорошо, если вы просто идентифицируете все идентификаторы или что-то подобное и как их вызывать.

Успешно импортировали данные из бэкэнда, но не знаете, как получить идентификаторы или имена переменных текстовой области, переключателей, div.

javascript: 

(function () {
function WW(ele, val)
{
    if(document.getElementById(ele) && val != "")
    {
        document.getElementById(ele).value = val;
    }
}
WW("story-title", "The Good Peacock");
)();

Скопировано это у кого-то.

Это работает с другими сайтами, которые имеют идентификатор, например: 

<textarea id="story-title">

Итак, необходимо знать идентификаторы HTML ниже.

Эточасть исходного кода сайта, которая заполняется автоматически.

Попытка вызова с getElementByClassName(), но не сработала. 

    <form class="main-edit-form">

          <div class="required-form-wrapper">
            <div class="form-group title-form">
              <label>Title</label>
              <span class="empty-warning hidden" id="title-warning">Required</span>
              <div contenteditable="true" class="story-title">Untitled Story</div>
            </div>

            <div class="form-group description-form">
              <div class="form-wrapper">
                <label>Description</label>
                <span data-toggle="popover" class="popover-icon" id="description-tooltip" title="" data-original-title="Add a story description"><span class="fa fa-info fa-wp-lightergrey " aria-hidden="true" style="font-size:16px;"></span></span>
                <span class="empty-warning hidden" id="description-warning">Required</span>
              </div>
              <textarea type="text" name="title" class="story-description "></textarea>
            </div>

            <div class="form-group tags-form">
              <div class="form-wrapper">
                <label>Tags</label>
                <span data-toggle="popover" class="popover-icon" id="tags-tooltip" title="" data-original-title="Help readers find your story"><span class="fa fa-info fa-wp-lightergrey " aria-hidden="true" style="font-size:16px;"></span></span>
                <span class="empty-warning hidden" id="tag-empty-warning">Required</span>
              </div>
              <div class="tag-container">
                <div id="editable-tags">
                  <div class="component-wrapper" id="component-TagGrid-storyTags-/myworks/new"></div>
                </div>
                <div id="add-tag" class="tag-item with-icon on-add-tag">
                  <span>Add a tag</span><span class="fa fa-plus fa-wp-black " aria-hidden="true" style="font-size:12px;"></span>
                </div>
                <span id="tag-input-wrapper">
                <input id="tag-input" class="hidden on-tag-input" placeholder="Separate tags with a space" autocomplete="off">
              </span>
              </div>
            </div>

            <div class="form-group inline-form">
              <div class="form-wrapper">
                <label for="categoryselect">Genre</label>
                <span data-toggle="popover" class="popover-icon" id="category-tooltip" title="" data-original-title="Tell Wattpad the genre of your story"><span class="fa fa-info fa-wp-lightergrey " aria-hidden="true" style="font-size:16px;"></span></span>
                <select id="categoryselect" class="form-control ">
                  <option value="-1">Select a genre</option>
                    <option value="14">Action</option>
                    <option value="11">Adventure</option>
                    <option value="24">ChickLit</option>
                    <option value="6">Fanfiction</option>
                    <option value="3">Fantasy</option>
                    <option value="21">General Fiction</option>
                    <option value="23">Historical Fiction</option>
                    <option value="9">Horror</option>
                    <option value="7">Humor</option>
                    <option value="8">Mystery / Thriller</option>
                    <option value="16">Non-Fiction</option>
                    <option value="12">Paranormal</option>
                    <option value="2">Poetry</option>
                    <option value="19">Random</option>
                    <option value="4">Romance</option>
                    <option value="5">Science Fiction</option>
                    <option value="17">Short Story</option>
                    <option value="13">Spiritual</option>
                    <option value="1">Teen Fiction</option>
                    <option value="18">Vampire</option>
                    <option value="22">Werewolf</option>
                </select>
                <span class="empty-warning hidden" id="category-empty-warning">Required</span>
              </div>
            </div>
          </div>

          <div class="inline-form-wrapper">
            <div class="inline-form-row">
              <div class="form-group inline-form">
                <div class="form-wrapper">
                  <label>Language</label>
                  <span data-toggle="popover" class="popover-icon" id="language-tooltip" title="" data-original-title="What language is your story in?"><span class="fa fa-info fa-wp-lightergrey " aria-hidden="true" style="font-size:16px;"></span></span>
                  <select id="languageselect" class="form-control ">
                      <option value="1" selected="selected">English</option>
                      <option value="2">Français</option>
                      <option value="3">Italiano</option>
                      <option value="4">Deutsch</option>
                      <option value="5">Español</option>
                      <option value="6">Português</option>
                      <option value="38">Català</option>
                      <option value="19">Tiếng Việt</option>
                      <option value="18">Filipino</option>
                      <option value="20">Bahasa Indonesia</option>
                      <option value="22">Bahasa Melayu</option>
                      <option value="32">ภาษาไทย</option>
                      <option value="7">Русский</option>
                      <option value="15">Română</option>
                      <option value="23">Türkçe</option>
                      <option value="24">Česky</option>
                      <option value="14">Polski</option>
                      <option value="28">Magyar</option>
                      <option value="30">ελληνικά</option>
                      <option value="35">Eesti</option>
                      <option value="36">Latviešu</option>
                      <option value="37">Lietuvių</option>
                      <option value="39">Босански</option>
                      <option value="40">Српски</option>
                      <option value="41">Hrvatski</option>
                      <option value="43">Български</option>
                      <option value="44">Slovenčina</option>
                      <option value="42">Slovenščina</option>
                      <option value="45">Беларускі</option>
                      <option value="46">Українська</option>
                      <option value="26">Svenska</option>
                      <option value="27">Norsk</option>
                      <option value="34">Suomi</option>
                      <option value="29">Dansk</option>
                      <option value="13">Nederlands</option>
                      <option value="33">Íslenska</option>
                      <option value="12">简体中文</option>
                      <option value="8">繁體中文</option>
                      <option value="9">日本語</option>
                      <option value="10">한국어</option>
                      <option value="16">العربية</option>
                      <option value="53">ગુજરાતી</option>
                      <option value="17">עברית</option>
                      <option value="21">हिन्दी</option>
                      <option value="25">മലയാളം</option>
                      <option value="54">ଓଡ଼ିଆ</option>
                      <option value="31">فارسی</option>
                      <option value="55">ਪੰਜਾਬੀ</option>
                      <option value="56">অসমীয়া</option>
                      <option value="47">বাংলা</option>
                      <option value="48">اُردُو&lrm;</option>
                      <option value="49">தமிழ்</option>
                      <option value="50">Kiswahili</option>
                      <option value="51">Afrikaans</option>
                      <option value="57">मराठी</option>
                      <option value="11">Other</option>
                  </select>
                </div>
              </div>
              <div class="form-group inline-form copyright-form">
                <div class="form-wrapper">
                  <label>Copyright</label>
                  <span data-toggle="popover" class="popover-icon" id="copyright-tooltip" title="" data-original-title="Who owns your story?"><span class="fa fa-info fa-wp-lightergrey " aria-hidden="true" style="font-size:16px;"></span></span>
                  <select id="copyrightSelect" class="form-control ">
                      <option value="0">Not Specified</option>
                      <option value="1">All Rights Reserved</option>
                      <option value="2">Public Domain</option>
                      <option value="3">Creative Commons (CC) Attribution</option>
                      <option value="4">(CC) Attrib. NonCommercial</option>
                      <option value="5">(CC) Attrib. NonComm. NoDerivs</option>
                      <option value="6">(CC) Attrib. NonComm. ShareAlike</option>
                      <option value="7">(CC) Attribution-ShareAlike</option>
                      <option value="8">(CC) Attribution-NoDerivs</option>
                  </select>
                </div>
              </div>
            </div>

            <div class="form-group rating-form">
              <div class="form-wrapper">
                <label class="rating-label">Rating</label>
                <span data-toggle="popover" class="popover-icon" id="rating-tooltip" title="" data-original-title="Rate your story"><span class="fa fa-info fa-wp-lightergrey " aria-hidden="true" style="font-size:16px;"></span></span>
                <span class="toggle-prompt">Mature</span>
                <div class="onoffswitch ">
                  <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="mature-switch">
                  <label class="onoffswitch-label" for="mature-switch">
                    <div class="onoffswitch-inner">
                      <span class="on">ON</span>
                      <span class="off">OFF</span>
                    </div>
                    <span class="onoffswitch-switch"></span>
                  </label>
                </div>
              </div>

Заранее спасибо!

1 Ответ

0 голосов
/ 14 сентября 2018

Эти id, которые вы ищете, не созданы самими собой.

Вам нужно присвоить id полю, которое вам нравится.

Я не предпочитаю использовать id для реализации css. Элемент id необходим только для реализации javascript и извлечения примера значения из тега input.

Вам нужно назначить id во время записи кода, как показано в следующем примере html.

Укажите на примечание :

  1. Не все теги имеют id.
  2. В основном теги, связанные с пользовательским вводом, имеют id.
  3. Нет 2 элементов / тегов имеют одинаковые id.
  4. id элементов различного типа используются для различных целей, например <div>, <span> id используются для скрытия, где input id используется для получения значения.

HTML: 

<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">    
        <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="/css/app.css" />
        <link rel="icon" href="logo.jpg" />
        <title>Info</title>
    </head>
    <body>
        <div class="col-md-6 offset-md-3">
            <div class="col-md-6">
                <p class="btn btn-primary form-control" onclick="showForm('#addInfo')">Add Detail</p>
            </div>
            <div class="col-md-6">
                <p class="btn btn-primary form-control" onclick="showForm('#showInfo');getDetail();">Show Detail</p>
            </div>
            <!-- No need for `form` as will use JavaScript for Single Page Application -->
            <div id="addInfo" class="hide">
                <div id="data"></div>
                <div class="col-md-12 form-group">
                    <label for="addEmail">Email:</label>
                    <input id="addEmail" class="form-control" type="email">
                    <span id="addEmailError" class="hide error">Valid Email Required</span>
                </div>
                <div class="col-md-12 form-group">
                    <label for="addFname">First Name:</label>
                    <input id="addFname" class="form-control" type="text">
                    <span id="addFnameError" class="hide error">Valid First Name Required</span>
                </div>
                <div class="col-md-12 form-group">
                    <label for="addLname">Last Name:</label>
                    <input id="addLname" class="form-control" type="text">
                    <span id="addLnameError" class="hide error">Valid Last Name Required</span>
                </div>
                <div class="col-md-12 form-group">
                    <label for="addPhone">Phone:</label>
                    <input id="addPhone" class="form-control" type="text">
                    <span id="addPhoneError" class="hide error">Valid Phone Required</span>
                </div>
                <div class="col-md-12 form-group">
                    <label for="addGender">Gender:</label>
                    <select id="addGender" class="form-control">
                        <option value="">Select:</option>
                        <option value="male">Male</option>
                        <option value="female">Female</option>
                    </select>
                    <span id="addGenderError" class="hide error">Gender Required</span>
                </div>
                <div class="col-md-12 form-group">
                    <p class="btn btn-primary form-control" onclick="addInfo()">Submit</p>
                </div>
            </div>
            <!-- No need for `form` as will use JavaScript for Single Page Application -->
            <div id="showInfo" class="hide">
                <div id="showDetails" class="col-md-12"></div>
            </div>
        </div>
        <script type="text/javascript" src="/js/jquery.min.js"></script>
        <!-- `login.js` is only used in `login.ejs` -->
        <script type="text/javascript" src="/js/addInfo.js"></script>
        <script type="text/javascript" src="/js/getInfo.js"></script>
        <script type="text/javascript" src="/js/service.js"></script>
    </body>
</html>

addInfo.js: 

"use strict";

function addInfo() {
    // JavaScript uses `id` to fetch value
    let email               = $("#addEmail").val(),
        fName               = $("#addFname").val(),
        lName               = $("#addLname").val(),
        phone               = $("#addPhone").val(),
        gender              = $("#addGender").val();

    // Show error `span` when email is invalid
    if ( validateEmail(email) ) {
        $("#addEmailError").addClass("hide");
    } else {
        $("#addEmailError").removeClass("hide");
        return;
    }

    // Show error `span` when First Name is invalid
    if ( validateFname(fName) ) {
        $("#addFnameError").addClass("hide");
    } else {
        $("#addFnameError").removeClass("hide");
        return;
    }

    // Show error `span` when Last Name is invalid
    if ( validateLname(lName) ) {
        $("#addLnameError").addClass("hide");
    } else {
        $("#addLnameError").removeClass("hide");
        return;
    }

    // Show error `span` when Phone is invalid
    if ( validatePhone(phone) ) {
        $("#addPhoneError").addClass("hide");
    } else {
        $("#addPhoneError").removeClass("hide");
        return;
    }

    // Show error `span` when Gender is invalid
    if ( validateGender(gender) ) {
        $("#addGenderError").addClass("hide");
    } else {
        $("#addGenderError").removeClass("hide");
        return;
    }

    // Calling local API to set authentication
    // Everything in public is visible for hackers
    // Thus to hide auth calling local backend
    $.ajax({
        "url": "/v1/detail",
        "method": "POST",
        "data": {email, fName, lName, phone, gender}
    })
    .then( result => {
        // On success empty all the input fields.
        $("#addEmail").val('');
        $("#addFname").val('');
        $("#addLname").val('');
        $("#addPhone").val('');
        $("#addGender").val("");

        // Message to notify success submition
        alert("Successfully added user.");
        return;
    })
    .catch( err => {
        // Notify in case some error occured
        alert("An error occured.");
        return;
    });
}

getInfo.js 

"use strict";

function getDetail () {

    // Request to get details of all user.
    $.ajax({
        "url": "http://localhost:4000/v1/detail",
        "method": "GET"
    })
    .then( result => {
        // On success using table to display data.
        // This table is dynamic.
        let table = `<div class="alert alert-success" role="alert">
                        Details fetched successfully.
                    </div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th scope="col">#</th>`;

        let headers = [];

        // Setting dynamic headers to ease work at frontend in case field changes
        for ( let key in result[0] ) headers.push(key);
        for ( let h of headers ) table += `<th scope="col">` + h + `</th>`;

        table += `          </tr>
                        </thead>
                        <tbody>`;
        let i = 1;

        // Dynaic rows of table based upon headers.
        for(let row of result) {
            table += `      <tr>
                                <th scope="row">` + i + `</th>`;

            for (let key of headers) table += `<td>` + row[key] + `</td>`;

            table += `      </tr>`;
            i++;
        }

        table += `      </tbody>
                    </table>`;

        // Loading dynamic table into our static HTML page.
        $("#showDetails").html(table);
    })
    .catch( err => {
        // If error setting dynamic error
        let data = `<label class="alert alert-warning">Unable to fetch details</label>`;

        // Loading dynamic error into our static HTML page
        $("#showDetails").html(data);
    })

}

service.js 

"use strict";

/**
 * Common services used by all the other scripts
 * All these are generic functions
 *  
*/

// To toggle between different views
function showForm (id) {
    // Hide all views
    $("#addInfo").addClass("hide");
    $("#showInfo").addClass("hide");

    // Show the view user had clicked
    $(id).removeClass("hide");
}

// Validate Email based upon pattern
function validateEmail (email) {
    if ( email && email.match(/^([A-z0-9_.]{2,})([@]{1})([A-z]{1,})([.]{1})([A-z.]{1,})*$/) ) {
        return true;
    }
    return false;
}

// Validate First Name based upon pattern
function validateFname (fName) {
    if ( fName && fName.match(/^([A-z]{2,})*$/) ) {
        return true;
    }
    return false;
}

// Validate Last Name based upon pattern
function validateLname (lName) {
    if ( lName && lName.match(/^([A-z]{2,})*$/) ) {
        return true;
    }
    return false;
}

// Validate Phone based upon pattern
function validatePhone (phone) {
    if ( phone && phone.match(/^([0-9]{10})*$/) ) {
        return true;
    }
    return false;
}

// Validate Gender based upon pattern
function validateGender (gender) {
    if ( gender && gender.match(/^([A-z]{4,6})*$/) && (gender === "male" || gender === "female") ) {
        return true;
    }
    return false;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...