asked on

Remove values from text box using onclick function

Hi

I m having a issue, where i want to remove values from text box using onclick function...
i pasting the code here... in the code u can see other onclick function which is for other purpose...the deselect image is given onclick functions...
Another thing you can also assume that if same textbox values is required for onclick function on image... we can fetch it from database...

Actually this part comes in edit page... where user wants to reselect few things or user can remove the old selections by clicking the deselect image icon

Just go through the code and help me out..i m attaching the deselect image too... or u can use ur own...

<p>
  <input type="text" name="values" value=",2,3,4,6,7" id="textfield" />
</p>
<p> <div>
                            <ul>
                                                            <li title="Zimbabwe" id="right_country_63" style="display:;">
                                <p><img src="images/deselect-icon.gif" width="10" border="0" style="margin-right:2px;" onclick="$('#right_country_63').hide();$('#left_country_63').show().find('input').attr('checked', false);check_null('country');"></p>
                                <p class="pp-rightpanel">Zimbabwe</p>
                                <br clear="all">
                              </li><li title="Zambia" id="right_country_47" style="display:;">
                                <p><img src="images/deselect-icon.gif" width="10" border="0" style="margin-right:2px;" onclick="$('#right_country_47').hide();$('#left_country_47').show().find('input').attr('checked', false);check_null('country');"></p>
                                <p class="pp-rightpanel">Zambia</p>
                                <br clear="all">
                              </li><li title="Yemen" id="right_country_56" style="display:;">
                                <p><img src="images/deselect-icon.gif" width="10" border="0" style="margin-right:2px;" onclick="$('#right_country_56').hide();$('#left_country_56').show().find('input').attr('checked', false);check_null('country');"></p>
                                <p class="pp-rightpanel">Yemen</p>
                                <br clear="all">
                              </li><li title="Vietnam" id="right_country_67" style="display:;">
                                <p><img src="images/deselect-icon.gif" width="10" border="0" style="margin-right:2px;" onclick="$('#right_country_67').hide();$('#left_country_67').show().find('input').attr('checked', false);check_null('country');"></p>
                                <p class="pp-rightpanel">Vietnam</p>
                                <br clear="all">
                              </li><li title="Venezuela" id="right_country_42" style="display:;">
                                <p><img src="images/deselect-icon.gif" width="10" border="0" style="margin-right:2px;" onclick="$('#right_country_42').hide();$('#left_country_42').show().find('input').attr('checked', false);check_null('country');"></p>
                                <p class="pp-rightpanel">Venezuela</p>
                                <br clear="all">
                              </li><li title="United States" id="right_country_19" style="display:;">
                                <p><img src="images/deselect-icon.gif" width="10" border="0" style="margin-right:2px;" onclick="$('#right_country_19').hide();$('#left_country_19').show().find('input').attr('checked', false);check_null('country');"></p>
                                <p class="pp-rightpanel">United States</p>
                                <br clear="all">
                              </li><li title="United Kingdom" id="right_country_76" style="display:;">
                                <p><img src="images/deselect-icon.gif" width="10" border="0" style="margin-right:2px;" onclick="$('#right_country_76').hide();$('#left_country_76').show().find('input').attr('checked', false);check_null('country');"></p>
                                <p class="pp-rightpanel">United Kingdom</p>
                                <br clear="all">
                              </li>
</ul></div></p>

Open in new window

deselect image:

leakim971

you mean I click on the first one and I remove 2 in the textbox?

ASKER CERTIFIED SOLUTION

iGottZ

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

global_expert_advice

ASKER

yes you are right...
actually the input box is having values of respective countries...
so suppose you click zambia it should remove the value of 47 from the input box...if its there in the input box...

my country table structure is

id country
1 india
2 USA
3 YEMEN
47 ZAMBIA

hope you got it...

or else if you are confused of above code...
you can explain with ur code also

global_expert_advice

ASKER

Hope you get idea from below screenshot...

global_expert_advice

ASKER

hi
Thanks a lot... your rule worked perfectly.... but just got stuck at one time... as you see in the above image... when country goes from left to right... it adds its value... and when you deselect from right box... value gets removd from input box and again checkbox comes in left box...

however i said earlier that... i m also using other onclick functions to move countries between boxes...
now when i use your onclick function, it works and removes value... but again when you try to add same country from left to right... values gets added as per my function... but country don't show up in right box...

i m putting here the code for right and left box...with my javascript and ur... i know i m making somewhere mistake but not able to find..

<script>
function list4(c,n,z)
{
	s=document.InstantSMS1.religiondata.value;
	if(c.checked)
	{
		if(s.indexOf(n)<0) s+=','+n;
	}
	else
	{
		s=document.InstantSMS1.religiondata.value.replace(','+n,'');
	}
	z=",";

	if (s.substring(2) == z) s=s.substring(2);
		document.InstantSMS1.religiondata.value=s;
}

function clear_all(field, gender){
	$("li[id^='right_"+field+"_']").hide();
	$("li[id^='left_"+field+"_']").show().find('input').attr('checked', false);
	$("#right_"+field+"_dm").show();
	$("#data_"+field+"_part").val('');

	if(field == 'mothertongue' || field == 'community'){
		display_caste_option_new('', gender);
	}
}

function removal (nr, that) {
  var religiondata = document.getElementsByName("religiondata")[0];
  var varr = religiondata.value.split(",");
  for (var i = 0; i < varr.length; i++) {
    if (parseInt(varr[i], 10) == nr) {
      varr.splice(i, 1);
      break;
    }
  }
  religiondata.value = varr.join(",");
  var nli = that.parentNode.parentNode;
  nli.parentNode.removeChild(nli);
}
</script>

<table width="100%" border="0" cellspacing="0" cellpadding="4">
                  <tr>
                    <td width="150" valign="top">Religion:</td>
                    <td width="683" valign="top"><div style="float:left;width:480px">
                        <div class="available-options"> <span>Available options</span>
                          <div>
                            <ul>
                              <li style="background-color:#f2f2c3;white-space:nowrap;margin-bottom:2px">Frequently Used</li>
                                                            <li title="Hindu" id="left_religion_1"  >
                                <p>
                                  <input name="religionarray[]" type="checkbox" id="check_1"  value="1" 
 	       onclick="$('#left_religion_1').hide();$('#right_religion_1').show();$('#right_religion_dm').hide(); list4(this,1)" />
                                </p>
                                <p class="pp-rightpanel">Hindu</p>
                                <br clear="all">
                              </li>
                                                            <li title="Muslim" id="left_religion_2"  >
                                <p>
                                  <input name="religionarray[]" type="checkbox" id="check_2"  value="2" 
 	       onclick="$('#left_religion_2').hide();$('#right_religion_2').show();$('#right_religion_dm').hide(); list4(this,2)" />
                                </p>
                                <p class="pp-rightpanel">Muslim</p>
                                <br clear="all">
                              </li>
                                                            <li title="Christian" id="left_religion_3"  >
                                <p>
                                  <input name="religionarray[]" type="checkbox" id="check_3"  value="3" 
 	       onclick="$('#left_religion_3').hide();$('#right_religion_3').show();$('#right_religion_dm').hide(); list4(this,3)" />
                                </p>
                                <p class="pp-rightpanel">Christian</p>
                                <br clear="all">
                              </li>
                                                            <li title="Sikh" id="left_religion_4"  >
                                <p>
                                  <input name="religionarray[]" type="checkbox" id="check_4"  value="4" 
 	       onclick="$('#left_religion_4').hide();$('#right_religion_4').show();$('#right_religion_dm').hide(); list4(this,4)" />
                                </p>
                                <p class="pp-rightpanel">Sikh</p>
                                <br clear="all">
                              </li>
                                                            <li title="Parsi" id="left_religion_5"  >
                                <p>
                                  <input name="religionarray[]" type="checkbox" id="check_5"  value="5" 
 	       onclick="$('#left_religion_5').hide();$('#right_religion_5').show();$('#right_religion_dm').hide(); list4(this,5)" />
                                </p>
                                <p class="pp-rightpanel">Parsi</p>
                                <br clear="all">
                              </li>
                                                            <li title="Jain" id="left_religion_6"  >
                                <p>
                                  <input name="religionarray[]" type="checkbox" id="check_6"  value="6" 
 	       onclick="$('#left_religion_6').hide();$('#right_religion_6').show();$('#right_religion_dm').hide(); list4(this,6)" />
                                </p>
                                <p class="pp-rightpanel">Jain</p>
                                <br clear="all">
                              </li>
                                                            <li title="Buddhist" id="left_religion_7"  >
                                <p>
                                  <input name="religionarray[]" type="checkbox" id="check_7"  value="7" 
 	       onclick="$('#left_religion_7').hide();$('#right_religion_7').show();$('#right_religion_dm').hide(); list4(this,7)" />
                                </p>
                                <p class="pp-rightpanel">Buddhist</p>
                                <br clear="all">
                              </li>
                                                            <li title="Jewish" id="left_religion_8"  >
                                <p>
                                  <input name="religionarray[]" type="checkbox" id="check_8"  value="8" 
 	       onclick="$('#left_religion_8').hide();$('#right_religion_8').show();$('#right_religion_dm').hide(); list4(this,8)" />
                                </p>
                                <p class="pp-rightpanel">Jewish</p>
                                <br clear="all">
                              </li>
                                                            <li title="Spiritual" id="left_religion_9"  >
                                <p>
                                  <input name="religionarray[]" type="checkbox" id="check_9"  value="9" 
 	       onclick="$('#left_religion_9').hide();$('#right_religion_9').show();$('#right_religion_dm').hide(); list4(this,9)" />
                                </p>
                                <p class="pp-rightpanel">Spiritual</p>
                                <br clear="all">
                              </li>
                                                            <li title="Other" id="left_religion_10"  >
                                <p>
                                  <input name="religionarray[]" type="checkbox" id="check_10"  value="10" 
 	       onclick="$('#left_religion_10').hide();$('#right_religion_10').show();$('#right_religion_dm').hide(); list4(this,10)" />
                                </p>
                                <p class="pp-rightpanel">Other</p>
                                <br clear="all">
                              </li>
                                                            <li title="No Religion" id="left_religion_11"  >
                                <p>
                                  <input name="religionarray[]" type="checkbox" id="check_11"  value="11" 
 	       onclick="$('#left_religion_11').hide();$('#right_religion_11').show();$('#right_religion_dm').hide(); list4(this,11)" />
                                </p>
                                <p class="pp-rightpanel">No Religion</p>
                                <br clear="all">
                              </li>
                                                          </ul>
                          </div>
                        </div>
                        <input type="text" name="religiondata" id="data_religion_part" value=",2" />
                        <div class="my-selection"> <span><a class="link" style="float:right;" href="#" onclick="clear_all('religion', '');return false;">Clear</a>My selection(s)</span>
                          <div>
                            <ul>
                              <li title="Muslim" id="right_religion_2" style="display:;">
                                <p><img src="images/deselect-icon.gif" width="10" border="0" style="margin-right:2px;" onclick="removal(2,this);$('#right_religion_2').hide();$('#left_religion_2').show().find('input').attr('checked', false);check_null('religion');"></p>
                                <p class="pp-rightpanel">Muslim</p>
                                <br clear="all">
                              </li>
                                                            <li title="Hindu" id="right_religion_1" style="display:none;">
                                <p><img src="images/deselect-icon.gif" width="10" border="0" style="margin-right:2px" onclick="$('#right_religion_1').hide();$('#left_religion_1').show().find('input').attr('checked', false);check_null('religion');"></p>
                                <p class="pp-rightpanel">Hindu</p>
                                <br clear="all">
                              </li>
                                                            <li title="Muslim" id="right_religion_2" style="display:none;">
                                <p><img src="images/deselect-icon.gif" width="10" border="0" style="margin-right:2px" onclick="$('#right_religion_2').hide();$('#left_religion_2').show().find('input').attr('checked', false);check_null('religion');"></p>
                                <p class="pp-rightpanel">Muslim</p>
                                <br clear="all">
                              </li>
                                                            <li title="Christian" id="right_religion_3" style="display:none;">
                                <p><img src="images/deselect-icon.gif" width="10" border="0" style="margin-right:2px" onclick="$('#right_religion_3').hide();$('#left_religion_3').show().find('input').attr('checked', false);check_null('religion');"></p>
                                <p class="pp-rightpanel">Christian</p>
                                <br clear="all">
                              </li>
                                                            <li title="Sikh" id="right_religion_4" style="display:none;">
                                <p><img src="images/deselect-icon.gif" width="10" border="0" style="margin-right:2px" onclick="$('#right_religion_4').hide();$('#left_religion_4').show().find('input').attr('checked', false);check_null('religion');"></p>
                                <p class="pp-rightpanel">Sikh</p>
                                <br clear="all">
                              </li>
                                                            <li title="Parsi" id="right_religion_5" style="display:none;">
                                <p><img src="images/deselect-icon.gif" width="10" border="0" style="margin-right:2px" onclick="$('#right_religion_5').hide();$('#left_religion_5').show().find('input').attr('checked', false);check_null('religion');"></p>
                                <p class="pp-rightpanel">Parsi</p>
                                <br clear="all">
                              </li>
                                                            <li title="Jain" id="right_religion_6" style="display:none;">
                                <p><img src="images/deselect-icon.gif" width="10" border="0" style="margin-right:2px" onclick="$('#right_religion_6').hide();$('#left_religion_6').show().find('input').attr('checked', false);check_null('religion');"></p>
                                <p class="pp-rightpanel">Jain</p>
                                <br clear="all">
                              </li>
                                                            <li title="Buddhist" id="right_religion_7" style="display:none;">
                                <p><img src="images/deselect-icon.gif" width="10" border="0" style="margin-right:2px" onclick="$('#right_religion_7').hide();$('#left_religion_7').show().find('input').attr('checked', false);check_null('religion');"></p>
                                <p class="pp-rightpanel">Buddhist</p>
                                <br clear="all">
                              </li>
                                                            <li title="Jewish" id="right_religion_8" style="display:none;">
                                <p><img src="images/deselect-icon.gif" width="10" border="0" style="margin-right:2px" onclick="$('#right_religion_8').hide();$('#left_religion_8').show().find('input').attr('checked', false);check_null('religion');"></p>
                                <p class="pp-rightpanel">Jewish</p>
                                <br clear="all">
                              </li>
                                                            <li title="Spiritual" id="right_religion_9" style="display:none;">
                                <p><img src="images/deselect-icon.gif" width="10" border="0" style="margin-right:2px" onclick="$('#right_religion_9').hide();$('#left_religion_9').show().find('input').attr('checked', false);check_null('religion');"></p>
                                <p class="pp-rightpanel">Spiritual</p>
                                <br clear="all">
                              </li>
                                                            <li title="Other" id="right_religion_10" style="display:none;">
                                <p><img src="images/deselect-icon.gif" width="10" border="0" style="margin-right:2px" onclick="$('#right_religion_10').hide();$('#left_religion_10').show().find('input').attr('checked', false);check_null('religion');"></p>
                                <p class="pp-rightpanel">Other</p>
                                <br clear="all">
                              </li>
                                                            <li title="No Religion" id="right_religion_11" style="display:none;">
                                <p><img src="images/deselect-icon.gif" width="10" border="0" style="margin-right:2px" onclick="$('#right_religion_11').hide();$('#left_religion_11').show().find('input').attr('checked', false);check_null('religion');"></p>
                                <p class="pp-rightpanel">No Religion</p>
                                <br clear="all">
                              </li>
                                                          </ul>
                          </div>
                        </div>
                      </div></td>
                  </tr>

Open in new window

global_expert_advice

ASKER

for first time name and value goes from left to right..
but second when you try are deselecting from right box..
only value goes... but not name....

SOLUTION

iGottZ

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Guy Hengel [angelIII / a3]

This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.