Опишу как сделать форму для пользователей, позволяющую отправлять админу сайта сообщение об ошибке в тексте страницы.
[spoiler]
Нам понадобится:
1. созданная форма с вопросами
2. размещенный компонент в шаблоне сайта для заполнения формы
3. страничка результата отправки сообщения
4. JS обработки поведения формы на странице
Вначале создаем форму и добавляем к ней вопросы. У меня: Адрес страницы, Текст с ошибкой, Комментарий пользователя.
Потом размещаем ее в шаблоне сайта и описываем для нее шаблон. Например так:
Естественно параметр поля name прописываем свой. Подсмотреть его можно в HTML коде, который загрузился в браузер.
Теперь создаем JS:
Где maxTXT_Length - это максимальная длинна текста, который можно выделить и положить в форму.
Не забудем про CSS:
Вот в принципе и все.
PS: Жирным я выделил ключевые моменты.
[spoiler]
Нам понадобится:
1. созданная форма с вопросами
2. размещенный компонент в шаблоне сайта для заполнения формы
3. страничка результата отправки сообщения
4. JS обработки поведения формы на странице
Вначале создаем форму и добавляем к ней вопросы. У меня: Адрес страницы, Текст с ошибкой, Комментарий пользователя.
Потом размещаем ее в шаблоне сайта и описываем для нее шаблон. Например так:
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> <div id="[B]frm_errMsg[/B]"> <div onclick="return CloseMsgForm()" id="close-form-window" title="<?=GetMessage("AUTH_CLOSE_WINDOW")?>"></div> <?if ($arResult["isFormErrors"] == "Y"):?><?=$arResult["FORM_ERRORS_TEXT"];?><?endif;?> <?=$arResult["FORM_NOTE"]?> <?if ($arResult["isFormNote"] != "Y") { ?> <?=$arResult["FORM_HEADER"]?> <table> <? if ($arResult["isFormDescription"] == "Y" || $arResult["isFormTitle"] == "Y" || $arResult["isFormImage"] == "Y") { ?> <tr> <td><? /***form header***/ if ($arResult["isFormTitle"]) { ?> <h3><?=$arResult["FORM_TITLE"]?></h3> <? } //endif ; if ($arResult["isFormImage"] == "Y") { ?> <a href="<?=$arResult["FORM_IMAGE"]["URL"]?>" target="_blank" alt="<?=GetMessage("FORM_ENLARGE")?>"><img src="<?=$arResult["FORM_IMAGE"]["URL"]?>" <?if($arResult["FORM_IMAGE"]["WIDTH"] > 300):?>width="300"<?elseif($arResult["FORM_IMAGE"]["HEIGHT"] > 200):?>height="200"<?else:?><?=$arResult["FORM_IMAGE"]["ATTR"]?><?endif;?> hspace="3" vscape="3" border="0" /></a> <?//=$arResult["FORM_IMAGE"]["HTML_CODE"]?> <? } //endif ?> <p><?=$arResult["FORM_DESCRIPTION"]?></p> </td> </tr> <? } // endif ?> </table> <br /> <? /**questions ****/ ?> <table class="form-table data-table"> <thead> <tr> <th colspan="2"> </th> </tr> </thead> <tbody> <tr> <td>Адрес страницы</td> <td> <?=$_SERVER['SERVER_NAME'].$_SERVER['PHP_SELF']?><input type="hidden" value="<?=$_SERVER['SERVER_NAME'].'/'.$_SERVER['REQUEST_URI']?>" name="[I][B]form_text_29[/B][/I]"/> </td> </tr> <tr> <td>Текст с ошибкой<font color="red"><span class="form-required starrequired">*</span></font></td> <td><textarea name="[B][I]form_textarea_30[/I][/B]" id="[B]frm_err_str[/B]" cols="20" rows="3" class="inputtextarea"></textarea></td> </tr> <tr> <td>Комментарий пользователя</td> <td><textarea name="[B][I]form_textarea_31[/I][/B]" cols="20" rows="3" class="inputtextarea"></textarea></td> </tr> <? if($arResult["isUseCaptcha"] == "Y"){ ?> <tr> <th colspan="2"><b><?=GetMessage("FORM_CAPTCHA_TABLE_TITLE")?></b></th> </tr> <tr> <td> </td> <td><input type="hidden" name="captcha_sid" value="<?=htmlspecialchars($arResult["CAPTCHACode"]);?>" /><img src="/bitrix/tools/captcha.php?captcha_sid=<?=htmlspecialchars($arResult["CAPTCHACode"]);?>" width="180" height="40" /></td> </tr> <tr> <td><?=GetMessage("FORM_CAPTCHA_FIELD_TITLE")?><?=$arResult["REQUIRED_SIGN"];?></td> <td><input type="text" name="captcha_word" size="30" maxlength="50" value="" class="inputtext" /></td> </tr> <?} // isUseCaptcha ?> </tbody> <tfoot> <tr> <th colspan="2"> <input <?=(intval($arResult["F_RIGHT"]) < 10 ? "disabled=\"disabled\"" : "");?> type="submit" name="web_form_submit" value="<?=strlen(trim($arResult["arForm"]["BUTTON"])) <= 0 ? GetMessage("FORM_ADD") : $arResult["arForm"]["BUTTON"];?>" /> <?if ($arResult["F_RIGHT"] >= 15):?> <input type="hidden" name="web_form_apply" value="Y" /><input type="submit" name="web_form_apply" value="<?=GetMessage("FORM_APPLY")?>" /> <?endif;?> <input type="reset" value="<?=GetMessage("FORM_RESET");?>" /> </th> </tr> </tfoot> </table> <p> <?=$arResult["REQUIRED_SIGN"];?> - <?=GetMessage("FORM_REQUIRED_FIELDS")?> </p> <?=$arResult["FORM_FOOTER"]?> <? } //endif (isFormNote) ?> </div> <div class="b-foo-err">Для того, чтобы сообщить об ошибке на сайте или дать комментарий: выделите фрагмент текста и нажмите Ctrl+Enter или <a href="#" onclick="return ShowMsgForm();">отправьте сообщение</a></div> |
Естественно параметр поля name прописываем свой. Подсмотреть его можно в HTML коде, который загрузился в браузер.
Теперь создаем JS:
function getSelText(){ var txt = ''; if (window.getSelection){ txt = window.getSelection(); }else if (document.getSelection){ txt = document.getSelection(); }else if (document.selection){ txt = document.selection.createRange().text; } return txt; } var err_maxTXT_Length = 'Слишком длинный текст'; var [B]maxTXT_Length[/B] = 100; document.onkeypress = function(){ var e = arguments[0] || window.event; var code=e.keyCode?e.keyCode:(e.which?e.which:e.charCode); if(e.ctrlKey && code==13){ var text = getSelText(); txt = text.toString(); if(txt.length > maxTXT_Length){ alert(err_maxTXT_Length); }else{ var txtarea = document.getElementById("[B]frm_err_str[/B]"); txtarea.value = txt; ShowMsgForm(); } } } function ShowMsgForm() { var div = document.getElementById("[B]frm_errMsg[/B]"); if (!div) return; div.style.display = "[B]block[/B]"; document.body.appendChild(div); return false; } function CloseMsgForm() { var div = document.getElementById("[B]frm_errMsg[/B]"); if (!div) return; div.style.display = "[B]none[/B]"; return false; } |
Где maxTXT_Length - это максимальная длинна текста, который можно выделить и положить в форму.
Не забудем про CSS:
#frm_errMsg { position:absolute; top:235px; left:auto; right:440px; z-index:100; background:#fff; border:1px solid #bbb; padding:20px 16px 6px; width:26.75em; [B]display:none;[/B] } #close-form-window { background:url(images/bt/close.gif) no-repeat 0 0; width:12px; height:11px; float:right; cursor:pointer; margin:-14px -10px 0 0; display:inline; } |
Вот в принципе и все.
PS: Жирным я выделил ключевые моменты.