[英]How can I send form_id to javascript function as a parameter?
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Başlıksız Belge</title> <style> body { font-family: Open sans, Helvetica; background: #111; color: white; font-size: 16px; } h1 { font-weight: lighter; } small { color: firebrick; } div.checkbox_select { width: 200px; } .checkbox_select_anchor { display: block; background: firebrick; color: white; cursor: pointer; padding: 10px 5px 5px; position: relative; } .checkbox_select_anchor:after { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid darkred; content: ""; position: absolute; right: 10px; top: 15px; } .expanded .checkbox_select_anchor:after { border-top: 0; border-bottom: 10px solid firebrick; } .checkbox_select_anchor:hover { background: #FF3030 !important; } .expanded .checkbox_select_anchor { background: #7C1818; } div.checkbox_select .select_input { width: 100%; cursor: pointer; } .checkbox_select_dropdown { display: none; background: whitesmoke; } .checkbox_select_dropdown.show { display: block; } .checkbox_select_dropdown ul { max-height: 150px; overflow-y: scroll; overflow-x: hidden; padding: 0; margin: 0; border: 1px solid #999; border-top: 0; border-bottom: 0; } .checkbox_select_dropdown ul li { list-style: none; position: relative; color: #666; } .checkbox_select_dropdown ul li label { position: relative; padding: 10px 5px 5px 40px; display: block; cursor: pointer; } .checkbox_select_dropdown ul li label:hover { background: #cbcbcb; color: white; } .checkbox_select_dropdown ul li input:checked + label { background: #bbb; color: white; text-shadow: 0px 1px 1px rgba(150, 150, 150, 1); } .checkbox_select_dropdown ul li input { position: absolute; left:0; z-index:1; display: inline-block; height: 100%; width: 30px; } .checkbox_select_search { width: 200px; padding: 10px 5px 5px; border: 1px solid #999; border-top: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .checkbox_select_submit { background: #00A600; color: white; padding: 10px 5px 5px; border: 0; width: 100%; font-size: 14px; cursor: pointer; } .hide { display: none; } </style> </head> <body> <h1>multiselect</h1> //here I have an form id and it is used javascript function <form id="make_checkbox_select"> <select name="Cinsiyet"> <option data-count="(2)" value="Kadin">Kadın </option> <option data-count="(23)" value="erkek">Erkek </option> </select> <input type="submit" /> </form> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script> $(function() { var mySelectCheckbox = new checkbox_select( { selector : "#make_checkbox_select", selected_translation : "seçildi", all_translation : "Tamamı Seçildi", not_found : "Bulunamadı", // Event during initialization onApply : function(e) { alert("Custom Event: " + e.selected); } }); }); // variable_names // functionNames // CONSTANT_VARIABLE_NAMES // $_my_jquery_selected_element if(typeof String.prototype.trim !== 'function') { String.prototype.trim = function() { return this.replace(/^\\s+|\\s+$/g, ''); } } var checkbox_select = function(params) { // Error handling first // ---------------------------------------------------------------------------------------------------- var error = false; // If the selector is not given if(!params.selector) { console.error("selector needs to be defined"); error = true; } // If the selector is not a string if(typeof params.selector != "string") { console.error("selector needs to be a string"); error = true; } // If the element is not a form if(!$(params.selector).is("form")) { console.error("Element needs to be a form"); error = true; } // If the element doesn't contain a select if($(params.selector).find("select").length < 1) { console.error("Element needs to have a select in it"); error = true; } // If the element doesn't contain option elements if($(params.selector).find("option").length < 1) { console.error("Select element needs to have an option in it"); error = true; } // If the select element doesn't have a name attribute if($(params.selector).find('select').attr('name') == undefined) { console.error("Select element needs to have a name attribute"); error = true; } // If there was an error at all, dont continue in the code. if(error) return false; // ---------------------------------------------------------------------------------------------------- var that = this, $_native_form = $(params.selector), $_native_select = $_native_form.find('select'), // Variables selector = params.selector, select_name = $_native_select.attr('name').charAt(0).toUpperCase() + $_native_select.attr('name').substr(1), selected_translation = params.selected_translation ? params.selected_translation : "selected", all_translation = params.all_translation ? params.all_translation : "All " + select_name + "s", not_found_text = params.not_found ? params.not_found : "No " + select_name + "s found.", currently_selected = [], // Create the elements needed for the checkbox select $_parent_div = $("<div />") .addClass("checkbox_select"), $_select_anchor = $("<a />") .addClass("checkbox_select_anchor") .text( select_name ), $_search = $("<input />") .addClass("checkbox_select_search"), $_submit = $("<input />") .addClass("checkbox_select_submit") .val("Apply") .attr('type','submit') .data("selected", ""), $_dropdown_div = $("<div />") .addClass("checkbox_select_dropdown"), $_not_found = $("<span />") .addClass("not_found hide") .text(not_found_text), $_ul = $("<ul />"), updateCurrentlySelected = function() { var selected = []; $_ul.find("input:checked").each( function() { selected.push($(this).val()); } ); currently_selected = selected; if(selected.length == 0) { $_select_anchor.text( select_name ) } else if(selected.length == 1) { $_select_anchor.text( selected[0] + " " + selected_translation ); } else if(selected.length == $_ul.find("input[type=checkbox]").length) { $_select_anchor.text( all_translation ); } else { $_select_anchor.text( selected.length + " " + selected_translation ); } }, // Template for the li, will be used in a loop. createItem = function(name, value, count) { var uID = 'checkbox_select_' + select_name + "_" + name.replace(" ", "_"), $_li = $("<li />"), $_checkbox = $("<input />").attr( { 'name' : name, 'id' : uID, 'type' : "checkbox", 'value' : value } ) .click( function() { updateCurrentlySelected(); } ), $_label = $("<label />").attr('for', uID), $_name_span = $("<span />").text(name).prependTo($_label), $_count_span = $("<span />").text(count).appendTo($_label); return $_li.append( $_checkbox.after( $_label ) ); }, apply = function() { $_dropdown_div.toggleClass("show"); $_parent_div.toggleClass("expanded"); if(!$_parent_div.hasClass("expanded")) { // Only do the Apply event if its different if(currently_selected != $_submit.data("selected")) { $_submit.data("selected" , currently_selected); that.onApply( { selected : $_submit.data("selected") } ); } } }; // Event of this instance that.onApply = typeof params.onApply == "function" ? params.onApply : function(e) { //e.selected is accessible }; that.update = function() { $_ul.empty(); $_native_select.find("option").each( function(i) { $_ul.append( createItem( $(this).text(), $(this).val(), $(this).data("count") ) ); } ); updateCurrentlySelected(); } that.check = function(checkbox_name, checked) { //$_ul.find("input[type=checkbox][name=" + trim(checkbox_name) + "]").attr('checked', checked ? checked : false); $_ul.find("input[type=checkbox]").each(function() { // If this elements name is equal to the one sent in the function if($(this).attr('name') == checkbox_name) { // Apply the checked state to this checkbox $(this).attr('checked', checked ? checked : false); // Break out of each loop return false; } }); updateCurrentlySelected(); } // Build mark up before pushing into page $_dropdown_div .prepend($_search); $_dropdown_div .append($_ul); $_dropdown_div .append($_not_found); $_dropdown_div .append($_submit); $_dropdown_div .appendTo($_parent_div); $_select_anchor .prependTo($_parent_div); // Iterate through option elements that.update(); // Events // Actual dropdown action $_select_anchor.click( function() { apply(); } ); // Filters the checkboxes by search on keyup $_search.keyup( function() { var search = $(this).val().toLowerCase().trim(); if( search.length == 1 ) { $_ul.find("label").each( function() { if($(this).text().toLowerCase().charAt(0) == search.charAt(0)) { if($(this).parent().hasClass("hide")) $(this).parent().removeClass("hide"); if(!$_not_found.hasClass("hide")) $_not_found.addClass("hide"); } else { if(!$(this).parent().hasClass("hide")) $(this).parent().addClass("hide"); if($_not_found.hasClass("hide")) $_not_found.removeClass("hide"); } } ); } else { // If it doesn't contain if($_ul.text().toLowerCase().indexOf(search) == -1) { if($_not_found.hasClass("hide")) $_not_found.removeClass("hide"); } else { if(!$_not_found.hasClass("hide")) $_not_found.addClass("hide"); } $_ul.find("label").each( function() { if($(this).text().toLowerCase().indexOf(search) > -1) { if($(this).parent().hasClass("hide")) $(this).parent().removeClass("hide"); } else { if(!$(this).parent().hasClass("hide")) $(this).parent().addClass("hide"); } } ); } } ); $_submit.click( function(e) { e.preventDefault(); apply(); } ); // Delete the original form submit $(params.selector).find('input[type=submit]').remove(); // Put finalized markup into page. $_native_select.after($_parent_div); // Hide the original element $_native_select.hide(); }; </script> </html>
/ 我想使用多个form_id，所以我将发送不同的参数以起作用。 在函数中，我们有选择器：“＃make_checkbox_select”，它的形式为ID，带＃号。 我想向它发送一个参数。 我试图fucntion（id）{selector：id，.........}，但是不起作用。 如何使用此功能使用3个多选复选框？ /
这是简单的示例-如何将参数传递给表单提交处理程序：
var onFormSubmit = function(formId) { alert('submit: id = ' + formId); }
<form id="form1" onsubmit="onFormSubmit('form1')"> <input type="text" name="inputText" value="text1"/> <button type="submit">Submit form1</button> </form> <form id="form2" onsubmit="onFormSubmit('form2')"> <input type="text" name="inputText" value="text2"/> <button type="submit">Submit form2</button> </form>
如何将表单元素的自动生成的ID发送到javascript函数？
[英]How can I send an automatically generated ID for a form element to a javascript function?
如何将元素对象作为参数发送到没有ID的javascript函数
[英]How to send the element object as parameter to javascript function without ID
如何将标签ID作为参数传递给javascript函数，然后根据需要输入不同标签的文本
[英]How can I pass a label ID as a parameter to a javascript function and then chance the text of different labels as required
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.