想要通过按钮显示特定的表单详细信息

时间:2015-08-20 12:24:17

标签: jquery html button

我的脚本中有一些表单信息显示有关鼠标悬停的信息。

当我按下按钮时,如何在我的原始表单中构建一个按钮并将其全部显示在新窗口中。

我希望有关我的标签,最大长度等的所有信息都显示在新的单独页面上

    $('form').on('mouseover', 'input, textarea, select', function () {
    var $tag = $(this);
    var $form = $tag.closest('form');
    var title = this.title;
    var id = this.id;
    var name = this.name;
    var value = this.value;
    var type = this.type;
    var cls = this.className;
    var tagName = this.tagName;
    var options = [];
    var hidden = [];
    var formDetails = '';
    var isRequired = $(this).prop('required');
    var alignment = $(this).attr('align');
    var maxlength = $(this).prop('maxlength');
    var format = $(this).attr('Format');
    var AutoComplete = '';
    var selectInfo = '';
    var readonly = $(this).attr('readonly');
    var disabled = $(this).attr('disabled');


    if ($form.length) {
        $form.find(':input[type="hidden"]').each(function (index, el) {
            hidden.push("\t" + el.name + ' = ' + el.value);
        });

        var formName = $form.prop('name');
        var formTitle = $form.prop('title');
        var formId = $form.prop('id');
        var formClass = $form.prop('class');

        formDetails +=
            "\n\n\nFORM NAME: " + formName +
            "\nFORM TITLE: " + formTitle +
            "\nFORM ID: " + formId +
            "\nFORM CLASS: " + formClass +
            "\nFORM HIDDEN INPUT:\n" + hidden.join("\n");
    }

    if ((isRequired === 'undefined') || (isRequired === false))        
        isRequired = '';        
    else         
        isRequired = "\nRequired: " + "Y";

    if (format === undefined)
        format = '';
    else
        format = "\nFormat: " + format;

    if (value === "")
        value = "";
    else
        value = "\nDefault Value: " + value;

    if (readonly === undefined)
        readonly = '';
    else
        readonly = "\nReadOnly: " + "Y";

    if (disabled === undefined)
        disabled = '';
    else
        disabled = "\nDisabled: " + "Y";


    if ($(this).hasClass('ui-autocomplete-input'))
        AutoComplete = 'AutoComplete';


    if ('SELECT' === tagName) {
        $tag.find('option').each(function (index, el) {
            options.push(el.value);
        });
        maxlength = 'Not required';

        selectInfo +=
            "\nSelect Options:\n\t" + options;
    }

    var tempTitle =
        "\nName: " + name +
        "\nType: " + tagName + "\ -  " + type +            
        "\nMaxlength: " + maxlength +
        isRequired +
        value +
        readonly +
        disabled +
        format +
        selectInfo;

    if (AutoComplete !== '')
        tempTitle += "\nAutoComplete: Y";


    $(this).each(function () {
        $.each(this.attributes, function () {
            // this.attributes is not a plain object, but an array
            // of attribute nodes, which contain both the name and value
            if (this.specified) {
                //console.log(this.name, this.value);
            }
        });
    });

    //tempTitle += formDetails;
    tempTitle;

    $tag.prop('title', tempTitle);
    $tag.on('mouseout', function () {
        $tag.prop('title', title);
    })
});

1 个答案:

答案 0 :(得分:0)

你正在寻找这个:

注意:此“运行代码段”上会阻止弹出窗口。请在最后试一试。

<script type="text/javascript">
	var info1 = "some information 1";
	var info2 = "some information 2";
    	var info3 = "some information info3";
var info4 = "some information info4";

$("#openPopup").click(function(){
  var newWin = window.open("","infowindow","height=200,width=300");

  newWin.document.write("<p>"+info1+"</p>");
  newWin.document.write("<p>"+info2+"</p>");

  var bodyElem = $(newWin.document).find("body");
  
  if(bodyElem)
  {
    bodyElem.append("<p>"+info3+"</p>");
    bodyElem.append("<p>"+info4+"</p>");
  }
  
  
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<button id="openPopup">Open Popup</button>