Menu
Outros JS

JQuery Set UnSet Functions

Data: 15-04-2008
Autor: Candido Tominaga

Use estas funcões para preencher e esvaziar os campos do formulário


/*
* SetF - Set values in form fields
* @param selector jquery id : #group , .class p 
* @param string|array vv - vv=[1,2,3,4,...]
* PS: 
*/
function SetF(id, vv)
{
	try {
			$(id)[0].type;
	}
	catch(e) {return}
	if(!$(id)[0].type)
	{
		var type = $("input[@name="+id.replace("#","")+"]")[0].type;
		var o = $("input[@name="+id.replace("#","")+"]");
	}
	else
	{
		var type = $(id)[0].type;
		var o = $(id);
	}

	if(typeof vv == "string" || typeof vv == "number"){
		v = []; 
		v.push(vv); 
	}
	else v = vv;
	switch(type)
	{
		case "radio":
		case "checkbox":
		case "select-multiple":
		case "select-one":
				o.val(v);
				break;
		default:
			o.val(v.join(','));
	}
}

/*
* @param slist = Selector List. Ex.: #sel1,#sel2,...
*/
function UnSetF(slist)
{
	var l = slist.split(',');
	for(var i=0; i < l.length; i++)
	{
		SetF(l[i],'');
	}
}

/**
* Chain function
* Ex.: $("#a,#b,#c").show().UnSetF();
*/
$.fn.UnSetF = function ()
{
   $(this).each(function(){
    UnSetF("#"+this.id);
   })
}


 

Exemplo



<script type="text/javascript" src="/tparty/jquery/jquery.js"></script>
<script type="text/javascript" src="/inc/js/global.js"></script>

<form id="form">
  <table border="0">
    <tr>
      <td>Text</td>
      <td><input name="text" type="text" id="text"></td>
    </tr>
    <tr>
      <td>Select</td>
      <td><select name="select" id="select">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Select-Multi</td>
      <td><select name="select-multi" size="5" multiple id="select-multi">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select></td>
    </tr>
    <tr>
      <td>CheckBox</td>
      <td><span id="ckb">
        <input name="ckb" type="checkbox" value="1">
        1
        <input name="ckb" type="checkbox" value="2">
        2
        <input name="ckb" type="checkbox" value="3">
        3
        <input name="ckb" type="checkbox" value="4">
        4
        <input name="ckb" type="checkbox" value="5">
        5</span> </td>
    </tr>
    <tr>
      <td>Radio</td>
      <td><span id="numero">
        <input name="numero" type="radio" value="1">
        1
        <input name="numero" type="radio" value="2">
        2
        <input name="numero" type="radio" value="3">
        3
        <input name="numero" type="radio" value="4">
        4
        <input name="numero" type="radio" value="5">
        5 </span></td>
    </tr>
    <tr>
      <td>Button</td>
      <td><input name="botao" type="button" id="botao" value="Button"></td>
    </tr>
    <tr>
      <td>Submit</td>
      <td><input name="submit" type="submit" id="submit" value="Submit"></td>
    </tr>
    <tr>
      <td>TextArea</td>
      <td><textarea name="textarea" id="textarea"></textarea></td>
    </tr>
  </table>
  <p><a id="set" href="">SET</a> .:::. <a id="unset" href="">UNSET</a> </p>
</form>
<script type="text/javascript">
$(document).ready(function(){
	$("#set").click(function(){
		Set();
		return false;
	})
	
	$("#unset").click(function(){
		UnsetAll()
		return false;
	})
	
})
function Set()
{
	SetF("#text",'2222222');
	SetF("#select",2);
	SetF("#select-multi",[1,5]);
	SetF("#ckb",[1,3]);
	SetF("#numero", 4);
	SetF("#botao","eeee");
	SetF("#submit","Enviar...");
	SetF("#textarea","tessssssssste");
}

function UnsetAll()
{
	SetF("#text",'');
	SetF("#select",'');
	SetF("#select-multi",'');
	SetF("#ckb",'');
	SetF("#numero", '');
	SetF("#botao",'');
	SetF("#submit",'');
	SetF("#textarea",'');
}
</script>


Veja o exemplo em ação:

Exemplo

 



A cobardia, aviltando, preserva freqüentes vezes a vida. [299]