我如何将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?

一键多值的Alamofire参数

将 R 函数作为 Java 方法参数传递

如何将数组作为参数发送到iOS中的json服务