Solved

Radio button selected by default and then onclick

Posted on 2013-01-16
2
308 Views
Last Modified: 2013-01-17
I'm creating a form, and if the user selects to use an alternate address, the program should adjust and create six new rows with information.  Otherwise, by default, I want the 'Use Default Billing' to be selected on page load, so to hide the six rows by default.

I also want the ability to toggle back to use default, if they accidently click on 'bill to another address' radio button.

Thank you!

	<form id="createNew" method="POST" enctype="multipart/form-data" action="<?=$_SERVER['PHP_SELF']?>?kdaccount=<?=$vendorid?>&part=poitems">
		<table width="100%" cellspacing="0" cellpadding="0" border="0">
			<tr>
				<td class="td_leftCol3" width="150px">Bill To:</td>
				<td class="td_rightCol">
					<strong><?php echo getLocationIDResp($respid) . '-' . substr((getBranchName(getLocationIDResp($respid))),20); ?></strong>
					<input type="hidden" name="billBranch" value = "<?= getLocationIDResp($respid)?>">
					(<small><input type="radio" id="usedefault" name="billtoadd" value="usedefault" <?=$fullChecked?> onclick="$(this).closest('tbody').next().hide();" /> Use Default Billing? <input type="radio" id="usealternate" name="billtoadd" value="usealternate" <?=$portionChecked?> onclick="$(this).closest('tb').next().show();" /> Bill to another Address</small></span></a>)
				</td>
			</tr>
			<tbody>
				<tr>
					<td class="td_leftCol3" width="150px">Company Name:</td>
					<td class="td_rightCol"><input type="text" name="billCompName" value="" class="formFields required"></td>
				</tr>
				<tr>
					<td class="td_leftCol3" width="150px">Address:</td>
					<td class="td_rightCol"><input type="text" name="billAddress" value="" class="formFields required"></td>
				</tr>
				<tr>
					<td class="td_leftCol3" width="150px">City:</td>
					<td class="td_rightCol"><input type="text" name="billCity" value="" class="formFields required"></td>
				</tr>
				<tr>
					<td class="td_leftCol3" width="150px">State:</td>
					<td class="td_rightCol"><input type="text" name="billState" value="" class="formFields required"></td>
				</tr>
				<tr>
					<td class="td_leftCol3" width="150px">Zip Code:</td>
					<td class="td_rightCol"><input type="text" name="billZip" value="" class="formFields required"></td>
				</tr>
				<tr>
					<td class="td_leftCol3" width="150px">Attention:</td>
					<td class="td_rightCol"><input type="text" name="billAttn" value="" class="formFields required"></td>
				</tr>
			</tbody>
			
			
			<tr>
				<td class="td_leftCol3" width="150px">Ship To:</td>
				<td class="td_rightCol">
					<select name="shipBranch" class="formFields"><?=lghDropDown($prevlocation,$subSTRING_lghLoc)?></select>
					(<span class="nonboldblacklinks"><a href="changebillship.php?type=ship" class="iframetall"><small>Change Ship To Address</small></span></a>)
				</td>
			</tr>
			<tr>
				<td class="td_leftCol3">LGH Contact:</td>
				<td class="td_rightCol"><select class="formFields" name="lghcontact"><?=lghcontacts2($respid)?></select></td>
			</tr>
			<tr>
				<td class="td_leftCol3">Receiving Depot:</td>
				<td class="td_rightCol"><select name="receivingDepot" class="formFields"><?=lghDropDown($prevlocation,$subSTRING_lghLoc)?></select></td>
			</tr>
			<tr>
				<td class="td_leftCol3">Customer Ref:</td>
				<td class="td_rightCol"><input type="text" name="custRef" class="formFields" value="<?php if($_POST['custRef']) echo $_POST['custRef'];?>"></td>
			</tr>
			<tr>
				<td class="td_leftCol3">PO Type:</td>
				<td class="td_rightCol"><select name="poType" class="formFields"><?=poTypeDD($poType)?></select></td>
			</tr>
			<tr>
				<td class="td_leftCol3">Payment Type:</td>
				<td class="td_rightCol"><select name="payType" class="formFields"><?=getPaymentType($paytype)?></td>
			</tr>
		</table>
	</form>

Open in new window

0
Comment
Question by:t3chguy
2 Comments
 
LVL 41

Accepted Solution

by:
guru_sami earned 250 total points
ID: 38785129
You can use jquery to hide/show on radio click. Here's something simple but  you can adjust script accordingly.

<input id="defaultaddr" type="radio" /> Use Default Billing
    <input id="newaddr" type="radio" /> Bill to another Address
    <div id="defaultdiv">
        Default Address
    </div>
    <div id="newdiv" style="display:none;">
        New Address
    </div>

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () { 
    $("#defaultaddr").click(function () {
        $("#newdiv").hide();
     });
    $("#newaddr").click(function () {
        $("#newdiv").show();
    });
});
</script>

Open in new window

0
 
LVL 1

Author Closing Comment

by:t3chguy
ID: 38788019
Excellent solution and adaptation to what I needed to do!  Thanks!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now