我如何将form_id作为参数发送给javascript函数？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我如何将form_id作为参数发送给javascript函数？相关的知识，希望对你有一定的参考价值。
<!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，带＃号。我想向它发送一个参数。我尝试过了功能（id）选择器：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>以上是关于我如何将form_id作为参数发送给javascript函数？的主要内容，如果未能解决你的问题，请参考以下文章
我可以将 spark 数据帧作为参数发送给 pandas UDF
Angular 2：当您不知道 childComponent 的类时，如何将 childComponent 属性发送给 parent？