Solved

Populating input field based on radio selection

Posted on 2014-07-21
7
1,120 Views
Last Modified: 2014-07-22
Hi everyone,

I tried out some jQuery code using  jsfiddle, the results are at the following url:

http://jsfiddle.net/6hfER/

As you can see at the above link, the contents of the input field is populated with the value from the checked radio button.

It's works fine at jsfiddle however when I insert the code on my working page amid all the other code, it no longer works. I've posted the page code below and wondered if someone to take a quick look to see what the problem might be. I thought maybe it was clashing with some other jQuery on the page or perhaps it's the location of the code on the page.

I'd really be grateful for any advice.

Thanks


<!DOCTYPE html>
<html lang="en" class="no-js">

    <!--<![endif]-->
    <!-- BC_OBNW -->
<head>
<title>Title</title>
<link href="/StyleSheets/ModuleStyleSheets.css" type="text/css" rel="StyleSheet" />
<script type="text/javascript">var jslang='EN';</script>
<link rel="stylesheet" href="/CatalystStyles/Box.css?vs=b2364.r426701" type="text/css" media="screen" />
<script type="text/javascript" src="/CatalystScripts/Java_Box.js?vs=b2364.r426701"></script>
<link rel="shortcut icon" href="/favicon.png" />
<link rel="apple-touch-icon" href="/home_badge_64.png" />
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:400,300,500,700" />
<link rel="stylesheet" href="/_assets/css/normalize.css" />
<link rel="stylesheet" href="/_assets/css/foundation.css" />
<link rel="stylesheet" href="/_assets/css/styles.css" />
<script src="/_assets/js/custom.modernizr.js"></script>
<script src="/_assets/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    // Will retun 1 or 0 based on if user is logged in(1) or not logged in(0)
    var _isLoggedIn = !!parseInt("0");
    </script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<!--[if IE 8]> <link rel="stylesheet" href="/_assets/css/ie8.css"> <![endif]-->

</head>
<body class="antialiased">

    
        <header class="alpha" role="banner">
<div class="row">
<div class="columns large-12">
<div class="utility">
<ul class="left">

<li><span id="catCartSummary" quote="False" vertical="False"><table cellspacing="0"  class="cartSummaryTable"><tr><td class="cartSummaryItem">Shopping cart is empty.</td></tr></table></span></li>
</ul>
<ul class="right">
	
</ul>
</div>
<!-- //.utility -->
</div>
<!-- //.columns.large-12 -->
</div>
<!-- //.row -->
<div class="row collapse">
<div class="columns large-12 contain-to-grid">
<nav class="top-bar" role="navigation">
  <ul class="title-area">
    <li class="name"><a id="logo" href="/"><img src="/_assets/css/images/logo.png" alt="">
</a></li>
    <li class="toggle-topbar menu-icon"> <a href="#"><span></span></a> </li>
  </ul>
  <!-- //.title-area -->
  <section class="top-bar-section">
    <ul class="left">
      <li class="has-dropdown">
	<a href="/about">About</a>
	<ul class="dropdown">
<li >
	<a href="/q-and-a">Questions and Answers</a>
	<ul class="dropdown"></ul>
</li>
</ul>
</li>
<li >
	<a href="/media">Media</a>
	<ul class="dropdown"></ul>
</li>
<li >
	<a href="/events">Events</a>
	<ul class="dropdown"></ul>
</li>
<li class="has-dropdown">
	<a href="#">Features</a>
	<ul class="dropdown"><li >
	<a href="/features/news">News</a>
	<ul class="dropdown"></ul>
</li>
<li >
	<a href="/features/photo-gallery">Photo Gallery</a>
	<ul class="dropdown"></ul>
</li>
<li >
	<a href="/features/downloads">Media Downloads</a>
	<ul class="dropdown"></ul>
</li>
<li >
	<a href="/features/publications">Publications</a>
	<ul class="dropdown"></ul>
</li>
</ul>
</li>
<li class="right">
	<a href="/contact">Contact</a>
	<ul class="dropdown"></ul>
</li>
<li class="right">
	<a href="/giving">Giving</a>
	<ul class="dropdown"></ul>
</li>
<li class="right">
	<a href="/prayers">Prayers</a>
	<ul class="dropdown"></ul>
</li>
<li class="right">
	<a href="/join">Join</a>
	<ul class="dropdown"></ul>
</li>

    </ul>
  </section>
  <!-- //.top-bar-section --> 
</nav>
<!-- //.top-bar -->
</div>
<!-- //.columns.large-12 -->
</div>
<!-- //.row -->
</header>
        <!-- //header.row -->
        <div class="omega delta">
        <div class="row">
        <div class="columns large-9" role="main">
        <script type="text/javascript">
$(function () {
    // redirect to non-secure version of page
    $("a").each(function (idx) {
        var href = $(this).attr("href");
        if (href.indexOf("http") == -1 && href.indexOf("https") == -1) {
            href = 'http://site.org.au' + href;
            $(this).attr("href", href);
        }
    });
});
</script>
<script type="text/javascript" src="/_assets/js/moment.js"></script>
<script type="text/javascript">
$(function(){
	$('.date-fix').each(function(){
		var $root = $(this),
			$date = $root.text(),
			$moment = moment($date, 'DD-MMM-YYYY'),
			$cleanDate = "<big id='chang'>"+$moment.format('D')+"</big> "+ $moment.format(' MMM YYYY'); 

		$root.html($cleanDate);
	});
});

$(function(){
	$('.date-fix2').each(function(){
		var $root = $(this),
			$date = $root.text(),
			$moment = moment($date, 'DD-MMM-YYYY'),
			$cleanDate = $moment.format("D MMMM YYYY");
			
		$root.text($cleanDate);
	});
});
</script>

<script type="text/javascript">
$(function(){

		// When the Event amount is checked
	$(".eventAmount").click(function(){
		$("#event-price").val(this.value); // Put the value into the Amount field
	});
});
</script>


<div class="booking-detail">
<img src="/_assets/images/events/img-detail-12021.jpg" border="0" alt="" />
<aside>
<p style="border: 0px;">
<span class="date-fix">27-Aug-2014 </span>
<!--<span class="enlarge">No items found.</span> No items found. No items found.-->
</p>
</aside></div>
<h1>Title</h1>
<p><p> Text goes here. Text goes here. Text goes here. </p>
<p> Text goes here. Text goes here. Text goes here.  </p>
<p>Text goes here. Text goes here. Text goes here.  </p>
</p>
<div class="close-space">
<p><strong>Date:</strong> Wednesday, <span class="date-fix2">Date </span></p>
<p><strong>Time:</strong> Time</p>
<p><strong>Venue:</strong> Address</p>
<p><strong>Dinner:</strong> <span class="populated"></span></p>
<p><strong>Cost:</strong> $<span id="event-price" class="populated"></span></p>
    
<p><strong>Cost:</strong>
<span id="member-price" class="populated"><input type="radio" name="price" value="30" checked="checked" class="eventAmount" /> $30 Member</span>&nbsp;&nbsp;
<span id="student-price" class="populated"><input type="radio" name="price" value="10" class="eventAmount" /> $10 Student</span>
</p>
    <p><input type="text" name="event-price" id="event-price" maxlength="255" value="30" /> </p>
</div>
<div class="row collapse">
<div class="small-12 large-6">
<div id="event-registration">
<div id="booking-form"><script type="text/javascript">
$(function () {
    // redirect to non-secure version of page
    $("a").each(function (idx) {
        var href = $(this).attr("href");
        if (href.indexOf("http") == -1 && href.indexOf("https") == -1) {
            href = 'http://site.org.au' + href;
            $(this).attr("href", href);
        }
    });
});
</script>
<script>
var guests = 0;
function calc() {
  var numberOfGuests = 0;
  $(".guestrow").each(function() {
    numberOfGuests+= $(this).find(".cat_textbox").val()!="";
  });    
  var price = $('#event-price').text();
  var participants = numberOfGuests+1;// add the organiser
  var total = participants*price;
  $("#BookingAllocation").val(participants);
  $("#booked").toggle(numberOfGuests>0); // only show booked if guests
  $("#Amount").val(total.toFixed(2));
}


$(function () {
    calc();
    $(".cat_textbox").on("keyup",function() { calc(); /* handle removal of gues*/});
    $("#catwebformbutton").on("click", function () {
        guests++;
        if (guests <= 10) {
            $(".guestrow").eq(guests-1).show();
        }
        $("#removeGuest").toggle(guests>0);
        calc();
    });
    $("#removeGuest").on("click",function(e) {
        guests--;
        $(this).toggle(guests>0);
        var $row = $(".guestrow").eq(guests);
        $row.find(".cat_textbox").val("");
        $row.hide();
        calc();
    });
    $('form[name="catwebformform81201"]').on("submit", function (e) {
        calc();
        if (checkWholeForm81201(this)) {
            // ...
        }
        else {
          e.preventDefault(); // cancel submit
        } 
    });
});
</script>
<script type="text/javascript">
$(function() {
    $('#Title).append(
            $("<option></option>").attr("value","").text("")
    ); 
})
</script>
<script>
$(document).ready(function() {
$('#creditCardType , #payOffline').hide();
$('.creditCard').click(function() {
$('#creditCardType').toggle();
$('#payOffline').hide();
});
$('.payPal').click(function() {
$('#creditCardType').hide();
$('#payOffline').hide();
});
    $('.payOffline').click(function() {
$('#payOffline').toggle();
$('#creditCardType').hide();
});
});
</script>
<form name="catwebformform81201" method="post" onsubmit="return checkWholeForm81201(this)" enctype="multipart/form-data" action="https://site.worldsecuresystems.com/FormProcessv2.aspx?WebFormID=70464&amp;OID=4792782&amp;OTYPE=35&amp;EID=0&amp;CID=0&amp;CC=AU&amp;Referrer=https%3a%2f%2fsite.worldsecuresystems.com&amp;Optin=True">
    <h4 style="margin-top: 25px;"><em class="icon-edit"></em> Enter your booking</h4>
    <span class="req">*</span>  Required
    <table class="webform" cellspacing="0" cellpadding="2" border="0">
        <tbody>
            <tr>
                <td><label for="Title">Title</label><br />
                <select name="Title" id="Title" class="cat_dropdown_smaller">
                <option value="913142">Dr</option>
                <option value="913141">Miss</option>
                <option value="913138" selected="selected">Mr</option>
                <option value="913139">Mrs</option>
                <option value="913140">Ms</option>
                </select></td>
            </tr>
            <tr>
                <td><label for="FirstName">First Name <span class="req">*</span></label><br />
                <input type="text" name="FirstName" id="FirstName" class="cat_textbox" maxlength="255" /> </td>
            </tr>
            <tr>
                <td><label for="LastName">Last Name <span class="req">*</span></label><br />
                <input type="text" name="LastName" id="LastName" class="cat_textbox" maxlength="255" /> </td>
            </tr>
            <tr>
                <td><label for="EmailAddress">Email Address <span class="req">*</span></label><br />
                <input type="text" name="EmailAddress" id="EmailAddress" class="cat_textbox" maxlength="255" /> </td>
            </tr>
            <tr>
                <td>
                <label>Would you like to add guests to your booking? (Max 10)</label>
                <br />
                <input style="background-color: #accdec; border-color: #95b1cc;" class="cat_button" type="button" value="Add a Guest" id="catwebformbutton" /><input style="background-color: #accdec; border-color: #95b1cc;" class="cat_button" type="button" value="Remove a Guest" id="removeGuest" />
                </td>
            </tr>
            <tr class="guestrow">
                <td><label for="CAT_Custom_331038_129864">Guest Name 1</label><br />
                <input type="text" maxlength="4000" name="CAT_Custom_331038_129864" id="CAT_Custom_331038_129864" class="cat_textbox" /></td>
            </tr>
            <tr class="guestrow">
                <td><label for="CAT_Custom_331039_129864">Guest Name 2</label><br />
                <input type="text" maxlength="4000" name="CAT_Custom_331039_129864" id="CAT_Custom_331039_129864" class="cat_textbox" /></td>
            </tr>
            <tr class="guestrow">
                <td><label for="CAT_Custom_331040_129864">Guest Name 3</label><br />
                <input type="text" maxlength="4000" name="CAT_Custom_331040_129864" id="CAT_Custom_331040_129864" class="cat_textbox" /></td>
            </tr>
            <tr class="guestrow">
                <td><label for="CAT_Custom_331041_129864">Guest Name 4</label><br />
                <input type="text" maxlength="4000" name="CAT_Custom_331041_129864" id="CAT_Custom_331041_129864" class="cat_textbox" /></td>
            </tr>
            <tr class="guestrow">
                <td><label for="CAT_Custom_331042_129864">Guest Name 5</label><br />
                <input type="text" maxlength="4000" name="CAT_Custom_331042_129864" id="CAT_Custom_331042_129864" class="cat_textbox" /></td>
            </tr>
            <tr class="guestrow">
                <td><label for="CAT_Custom_331043_129864">Guest Name 6</label><br />
                <input type="text" maxlength="4000" name="CAT_Custom_331043_129864" id="CAT_Custom_331043_129864" class="cat_textbox" /></td>
            </tr>
            <tr class="guestrow">
                <td><label for="CAT_Custom_331044_129864">Guest Name 7</label><br />
                <input type="text" maxlength="4000" name="CAT_Custom_331044_129864" id="CAT_Custom_331044_129864" class="cat_textbox" /></td>
            </tr>
            <tr class="guestrow">
                <td><label for="CAT_Custom_331045_129864">Guest Name 8</label><br />
                <input type="text" maxlength="4000" name="CAT_Custom_331045_129864" id="CAT_Custom_331045_129864" class="cat_textbox" /></td>
            </tr>
            <tr class="guestrow">
                <td><label for="CAT_Custom_331046_129864">Guest Name 9</label><br />
                <input type="text" maxlength="4000" name="CAT_Custom_331046_129864" id="CAT_Custom_331046_129864" class="cat_textbox" /></td>
            </tr>
            <tr class="guestrow">
                <td><label for="CAT_Custom_331047_129864">Guest Name 10</label><br />
                <input type="text" maxlength="4000" name="CAT_Custom_331047_129864" id="CAT_Custom_331047_129864" class="cat_textbox" /></td>
            </tr>
            <tr id="booked">
                <td><label for="BookingAllocation">Number of seats booked</label><br />
                <input type="text" maxlength="4000" name="BookingAllocation" id="BookingAllocation" class="cat_textbox" /></td>
            </tr>
            <tr>
                <td><label for="CAT_Custom_331313_130050">Any special dietary instructions?</label><br />
                <input type="text" maxlength="4000" name="CAT_Custom_331313_130050" id="CAT_Custom_331313_130050" class="cat_textbox" /></td>
            </tr>
            <tr>
                <td><label for="BillingAddress">Billing Address <span class="req">*</span></label><br />
                <input type="text" name="BillingAddress" id="BillingAddress" class="cat_textbox" maxlength="500" /></td>
            </tr>
            <tr>
                <td><label for="BillingCity">City <span class="req">*</span></label><br />
                <input type="text" name="BillingCity" id="BillingCity" class="cat_textbox" maxlength="255" /></td>
            </tr>
            <tr>
                <td><label for="BillingState">State <span class="req">*</span></label><br />
                <input type="text" name="BillingState" id="BillingState" class="cat_textbox" maxlength="255" /></td>
            </tr>
            <tr>
                <td><label for="BillingZip">Zipcode/Postcode <span class="req">*</span></label><br />
                <input type="text" name="BillingZip" id="BillingZip" class="cat_textbox" maxlength="255" /></td>
            </tr>
            <tr>
                <td><label for="BillingCountry">Country <span class="req">*</span></label><br />
                <select name="BillingCountry" id="BillingCountry" class="cat_dropdown">
                <option value=" ">-- Select Country --</option>
                <option value="AF">AFGHANISTAN</option>
                <option value="AX">ALAND ISLANDS</option>
                <option value="AL">ALBANIA</option>
                <option value="DZ">ALGERIA</option>
                <option value="AS">AMERICAN SAMOA</option>
                <option value="AD">ANDORRA</option>
                <option value="AO">ANGOLA</option>
                <option value="AI">ANGUILLA</option>
          
                </select></td>
            </tr>
            <tr>
                <td><label>Payment Method <span class="req">*</span></label><br />
                <p class="payPal close-space"><input checked="checked" type="radio" name="PaymentMethodType" id="PaymentMethodType_5" value="5" /> &nbsp; PayPal</p>
                <p class="payOffline close-space"><input type="radio" name="PaymentMethodType" id="PaymentMethodType_3" value="3" /> &nbsp; Pay Offline</p>
                <div id="payOffline">
                <table style="margin: 0px; padding: 0px;">
                    <tbody>
                        <tr>
                            <td>
                            <p style="margin: 0px; padding: 0px;"> Text goes here.
                            </p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                </div>
                <p class="creditCard" style="margin: 0px; padding: 0px;"><input type="radio" name="PaymentMethodType" id="PaymentMethodType_1" value="1" /> &nbsp; Credit Card</p>
                <div id="creditCardType" style="margin: 0px; padding: 0px;">
                <table style="margin: 0px; padding: 0px;">
                    <tbody>
                        <tr>
                            <td><label for="CardName">Name on Card <span class="req">*</span></label><br />
                            <input type="text" name="CardName" id="CardName" class="cat_textbox" autocomplete="off" /></td>
                        </tr>
                        <tr>
                            <td><label for="CardNumber">Card Number <span class="req">*</span></label><br />
                            <input type="text" name="CardNumber" id="CardNumber" class="cat_textbox" autocomplete="off" /></td>
                        </tr>
                        <tr>
                            <td><label>Card Expiry <span class="req">*</span></label><br />
                            <select name="CardExpiryMonth" id="CardExpiryMonth" class="cat_dropdown_smaller">
                            <option value="01" selected="selected">01</option>
                            <option value="02">02</option>
                            <option value="03">03</option>
                            <option value="04">04</option>
                            <option value="05">05</option>
                            <option value="06">06</option>
                            <option value="07">07</option>
                            <option value="08">08</option>
                            <option value="09">09</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            </select><select name="CardExpiryYear" id="CardExpiryYear" class="cat_dropdown_smaller">
                            <option value="2012">2012</option>
                            <option value="2013">2013</option>
                            <option value="2014">2014</option>
                            <option value="2015" selected="selected">2015</option>
                            <option value="2016">2016</option>
                            <option value="2017">2017</option>
                            <option value="2018">2018</option>
                            <option value="2019">2019</option>
                            <option value="2020">2020</option>
                            </select></td>
                        </tr>
                        <tr>
                            <td><label for="CardType">Card Type <span class="req">*</span></label><br />
                            <select name="CardType" id="CardType" class="cat_dropdown">
                            <option value="1">Visa</option>
                            <option value="2">Mastercard</option>
                            </select></td>
                        </tr>
                        <tr>
                            <td><label for="CardCCV">CCV Number <span class="req">*</span></label><br />
                            <input type="text" name="CardCCV" id="CardCCV" class="cat_textbox" autocomplete="off" /></td>
                        </tr>
                    </tbody>
                </table>
                </div>
                </td>
            </tr>
            <tr>
                <td><label for="Amount">Amount <span class="req">*</span> <span id="constraint-300-label"></span></label>
                <br />
                <input type="text" name="Amount" id="Amount" class="cat_textbox" /></td>
            </tr>
            <tr>
                <td><label>Enter Word Verification in box below <span class="req">*</span></label><br />
                <div class="captchaimg"><img src="/captchahandler.ashx?ID=b1bf5eebb6d545f18c3d9249b68f6488&amp;Color=DimGray&amp;ForeColor=White&amp;Width=160&amp;Height=36" alt="Captcha Image" /></div>
<input id="CaptchaV2" class="cat_textbox" type="text" name="CaptchaV2" style="width:160px" />
<input id="CaptchaTV2" type="text" name="CaptchaTV2" style="display:none;" />
<input id="CaptchaHV2" type="hidden" value="b1bf5eebb6d545f18c3d9249b68f6488" name="CaptchaHV2" />
</td>
            </tr>
            <tr>
                <td><input class="cat_button" type="submit" value="Submit" id="catwebformbutton" /></td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript" src="http://site.businesscatalyst.com/CatalystScripts/ValidationFunctions.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    var submitcount81201 = 0;

    function checkWholeForm81201(theForm) {
        var why = "";
        if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name");
        if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name");
        if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value);
        if (theForm.BillingAddress) why += isEmpty(theForm.BillingAddress.value, "Billing Address");
        if (theForm.BillingCity) why += isEmpty(theForm.BillingCity.value, "Billing City");
        if (theForm.BillingState) why += isEmpty(theForm.BillingState.value, "Billing State");
        if (theForm.BillingZip) why += isEmpty(theForm.BillingZip.value, "");
        if (theForm.BillingCountry) why += checkDropdown(theForm.BillingCountry.value, "Billing Country");
        if (theForm.PaymentMethodType) why += checkSelected(theForm.PaymentMethodType, "Payment Method");
        if (!theForm.PaymentMethodType || getRadioSelected(theForm.PaymentMethodType) == 1) {
            if (theForm.CardName) why += isEmpty(theForm.CardName.value, "Name on Card");
            if (theForm.CardNumber) why += isNumeric(theForm.CardNumber.value, "Card Number");
            if (theForm.Amount) why += isCurrency(theForm.Amount.value, "Amount");
        }
        if (theForm.CaptchaV2) why += captchaIsInvalid(theForm, "Enter Word Verification in box below", "Please enter the correct Word Verification as seen in the image");
        if (why != "") {
            alert(why);
            return false;
        }
        if (submitcount81201 == 0) {
            submitcount81201++;
            theForm.submit();
            return false;
        } else {
            alert("Form submission is in progress.");
            return false;
        }
    }
    //]]>
</script>
</form>
<!-- END .booking-container --></div>
</div>
</div>
</div>

<!--<div class="go-back"><a href="http://www.site.org.au/events-1/talk" Target="">Go Back</a></div>-->
<!-- END .booking-container -->
<script>

    // Detects if your event detail page is not on the secure domain and automatically switches it
    var secureURL = "site.worldsecuresystems.com"; // UPDATE THE URL WITH YOUR SITE SECURE URL
    if ((window.location.protocol == "http:" || location.hostname != secureURL) && location.search.search("A=Template") == -1 && location.search.search("Preview") == -1) window.location = "https://" + secureURL + window.location.pathname;

				
// Updates the amount form field on event registration form
$('#Amount').val(parseFloat($('#event-price').text()).toFixed(2));

    // Replaces the default BC "No events found." message
    var customEmptyMessage = '<div id="event-close">'+'Registration for this event is not currently open.'+'</div>';
    if ($('#event-registration').text().trim() == "No events found.") $('#event-registration').html(customEmptyMessage);
    //


</script>
<script>

(function() {
	var span = document.querySelectorAll('.populated');
	for (var i = 0, ii = span.length; i < ii; i++) {
		var para = span[i].parentNode;
		if (!span[i].innerHTML) {
			para.style.display = 'none';
		}
	}
}());

</script>

        </div>
        <div class="columns large-3" role="complementary">
        <aside>
        <h4><em class="icon-reorder"></em> Search</h4>
<form name="catsearchform43386" method="post" action="/Default.aspx?SiteSearchID=-1&amp;ID=/website/results" class="alpha-form">
    <div class="row collapse">
    <div class="small-10 columns">
    <input name="CAT_Search" type="text" placeholder="Search" />
    </div>
    <div class="small-2 columns">
    <span class="postfix"><em class="icon-search"></em></span>
    </div>
    </div>
</form>
        <h4><em class="icon-reorder"></em> Prayer Request</h4>
<form name="catwebformform18913" method="post" onsubmit="return checkWholeForm18913(this)" enctype="multipart/form-data" action="/FormProcessv2.aspx?WebFormID=36833&amp;OID=4792782&amp;OTYPE=35&amp;EID=0&amp;CID=0">
    <span class="req">*</span> Required<br />
    <label for="FullName">
    <input type="text" name="FullName" id="FullName" class="cat_textbox" maxlength="255" placeholder="First Name *" />
    </label>
    <label for="EmailAddress">
    <input type="email" name="EmailAddress" id="EmailAddress" class="cat_textbox" maxlength="255" placeholder="Email Address *" />
    </label>
    <label for="CAT_Custom_14478">
    <textarea name="CAT_Custom_14478" id="CAT_Custom_14478" cols="10" rows="4" class="cat_listbox" onkeydown="if(this.value.length&gt;=4000)this.value=this.value.substring(0,3999);" placeholder="Prayer Request"></textarea>
    </label>
    <input class="button secondary small" type="submit" value="Submit" id="catwebformbutton" />
    <script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>
    <script type="text/javascript">
//<![CDATA[
var submitcount18913 = 0;

function checkWholeForm18913(theForm) {
    var why = "";
    if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name");
    if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name");
    if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value);
    if (why != "") {
        alert(why);
        return false;
    }
    if (submitcount18913 == 0) {
        submitcount18913++;
        theForm.submit();
        return false;
    } else {
        alert("Form submission is in progress.");
        return false;
    }
}
//]]>
</script>
</form>

        <a  href="/BannerProcess.aspx?ID=11819&amp;URL=%2fcontact"><img alt="Advertise with us" src="/_assets/images/ad-rotators/ad-rotator1.jpg"   border="0" /></a>
        </aside>
        </div>
        </div>
        <!-- //.row -->
        </div>
        <!-- //.omega -->
        <footer role="contentinfo">
        <div class="sigma">
        <div class="row">
        <div class="columns large-4">
        <h4><em class="icon-reorder"></em>Company</h4>
<p> Text goes here. Text goes here. Text goes here.</p>
<p class="bottom-half"><em class="icon-home"></em>  Address goes here.
</p>
<p class="bottom-half"><em class="icon-phone-sign"></em> Phone number goes here</p>
<p class="bottom-half"><em class="icon-envelope"></em> <a href="" style="color:#aba16f;">email address </a>
</p>
        </div>
        <!-- //.columns.large-4 -->
        <div class="columns large-4">
        <h4><em class="icon-reorder"></em>View our Photo Gallery</h4>
<p><a href="/features/photo-gallery"><img alt="" src="/_assets/images/photo-gallery-thumb.png" style="border: 0px;" /></a></p>
        </div>
        <!-- //.columns.large-4 -->
        <div class="columns large-4">
        <h4><em class="icon-reorder"></em> Social Media </h4>
<p><a href="http://www.facebook.com/#!/groups/308556609202984/"><img alt="" src="/_assets/images/facebook.png" style="border: 0px;" /></a></p>
        </div>
        <!-- //.columns.large-4 -->
        </div>
        <!-- //.row -->
        </div>
        <!-- //.sigma -->
        <div class="row">
        <div class="columns large-12">
        <ul class="footer-links"><li  ><a href="/">Home</a></li><li  ><a href="/website/privacy">Privacy Policy</a></li><li  ><a href="/related-orgs">Related Organisations</a></li>
<li>Copyright © <script>document.write(new Date().getFullYear())</script> All Rights Reserved</li></ul>
        </div>
        <!-- //.columns.large-12 -->
        </div>
        <!-- //.row -->
        </footer>
        <!-- //footer -->
        <script src="/_assets/js/foundation.min.js"></script>
<script src="/_assets/js/scripts.js"></script>
<div id="bcmodules" style="display:none;" 
    data-bc-pagename="Title"
    data-bc-pageaddress="https://site.worldsecuresystems.com/events-1/talk"
    data-bc-sitehost="www.site.org.au"
    data-bc-siteurl="site.worldsecuresystems.com"
    data-bc-securezone="<!--This module requires the user to be logged into a secure zone, and should only be placed on pages inside one.-->"
    data-bc-loginstatus="0"
    data-bc-widgits="googleAnalytics:null;"
></div>
<script src="/_assets/js/devinabox.js"></script>
        <script type="text/javascript">
if (document.cookie && document.cookie.indexOf("CartID") < 1) {
document.getElementById('catCartSummary').style.display = "none";
}
</script>
    
</body>
</html>

Open in new window

0
Comment
Question by:gwh2
  • 4
  • 3
7 Comments
 
LVL 63

Assisted Solution

by:Zvonko
Zvonko earned 500 total points
ID: 40211707
Hello gwh2,

beside the typos in your source like this one where you do not have the closing quote char:
$(function() {
    $('#Title).append(
            $("<option></option>").attr("value","").text("")
    ); 
})

Open in new window


is your bigger problem that you cannot access Objects or form Elements before they occure on the page and are rendered and accessible. And even more bigger problem is that your Elements have to have UNIQUE ids to be able to be accessed.
You try to assign the value to the <input> field with the id="event-price" but you have also a <span> with the same id.

That means, move the event onclick code after the input field with the id="event-price" and rename the field to id="event-price2"

Like this:
<p><strong>Cost:</strong> $<span id="event-price" class="populated"></span></p>
<p><strong>Cost:</strong>
<span id="member-price" class="populated"><input type="radio" name="price" value="30" checked="checked" class="eventAmount" /> $30 Member</span>&nbsp;&nbsp;
<span id="student-price" class="populated"><input type="radio" name="price" value="10" class="eventAmount" /> $10 Student</span>
</p>
    <p><input type="text" name="event-price" id="event-price2" maxlength="255" value="30" /> </p>
</div>
<script type="text/javascript">
$(function(){

		// When the Event amount is checked
	$(".eventAmount").click(function(){
		$("#event-price2").val(this.value); // Put the value into the Amount field
	});
});
</script>

Open in new window


Or even better: use more meaningful names for your elements.

Good luck,
Zvonko
0
 
LVL 1

Author Comment

by:gwh2
ID: 40211956
Thanks so much for the reply,

My js is quite basic which is why I have all those mistakes. I changed the id of the input field to 'price-var' and then moved the js to the location you indicated and it's populating correctly now which is great. The contents of the input field with an id of price-var needs to be inserted into the following variable:

 var price = $('#event-price').text();

Since I changed the id of the input field, I also changed the above code to:

var price = $('#price-var').text();

When I tested though, the amount input field wasn't getting populated. I tried instead to revise the above code to:

var price = $('#price-var').value();

... But the following was entered into the amount field instead of the figure:

NaN

I've extracted the code snippet below from the full code that I posted in my original post.

Are you able to help me troubleshoot this further?

I really appreciate your help.

<script>
var guests = 0;
function calc() {
  var numberOfGuests = 0;
  $(".guestrow").each(function() {
    numberOfGuests+= $(this).find(".cat_textbox").val()!="";
  });    
  var price = $('#event-price').text();
  var participants = numberOfGuests+1;// add the organiser
  var total = participants*price;
  $("#BookingAllocation").val(participants);
  $("#booked").toggle(numberOfGuests>0); // only show booked if guests
  $("#Amount").val(total.toFixed(2));
}

Open in new window

0
 
LVL 1

Author Comment

by:gwh2
ID: 40211974
Sorry, could I just revise the above post. I changed the code to the following:

var price = $('#price-var').val();

and this populates the amount field. The problem is that I have two radio buttons which change the value of the input field:

<p><strong>Cost:</strong>
<span id="member-price" class="populated"><input type="radio" name="price" value="30" checked="checked" class="eventAmount" /> $30 Member</span>&nbsp;&nbsp;
<span id="student-price" class="populated"><input type="radio" name="price" value="10" class="eventAmount" /> $10 Student</span>
</p>

Open in new window


As you can see from the above code, the first radio button is checked by default and this is the amount getting populated into the amount field further down on the page. If I click the second radio button, it changes the value of the input field (with an id of price-var) below it but the variable as shown below doesn't get updated and therefore the amount field at the bottom of the page doesn't change:

var price = $('#price-var').val();

Can you help me to revise the code?
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 1

Author Comment

by:gwh2
ID: 40212031
I just tested the code again, and if I press the second radio button, the only way it seems to trigger the update of the amount field is if I click in one of the other input fields and press the tab key on my keyboard.

Is there some method that will allow for the update of the amount field immediately once the radio button is clicked, i.e. it's clicked, then the value correctly populates the input field called price-var, which then gets inserted into the variable:

var price = $('#price-var').val();

Then that value is inserted into the amount field:

$("#Amount").val(total.toFixed(2));

Appreciate any further help.
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 500 total points
ID: 40212072
I think that it does not help you that I find all your pitfalls for you: you have to trap into them and remember : - )

So to avoid to have to click extra key you have to call the calc() method from inside your Radio button onClick event.
Like this:
<p><strong>Cost:</strong>
<span id="member-price" class="populated"><input type="radio" name="price" value="30" checked="checked" class="eventAmount" /> $30 Member</span>&nbsp;&nbsp;
<span id="student-price" class="populated"><input type="radio" name="price" value="10" class="eventAmount" /> $10 Student</span>
</p>
    <p><input type="text" name="price-var" id="price-var" maxlength="255" value="30" /> </p>
</div>
<script type="text/javascript">
$(function(){

		// When the Event amount is checked
	$(".eventAmount").click(function(){
		$("#price-var").val(this.value); // Put the value into the Amount field
		calc();
	});
});
</script>

Open in new window

0
 
LVL 1

Author Comment

by:gwh2
ID: 40212098
Great - thanks very much for helping me solve this. I really appreciate it.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 40212166
You are welcome <|:-)
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn how to dynamically set the form action using jQuery.
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)

707 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

12 Experts available now in Live!

Get 1:1 Help Now