We Keep Coding

How can I append new/updated innerHTML to a p tag that doesn't have a class or id?

I'm writing out a test script where I'm wanting to select an existing p tag in a form and update the copy being used. I don't have access to the original code and having to use JavaScript only to make updates until it's approved by the client's tech lead and test results.
My original code is:
var p = document.querySelector(".form-bg form p").innerHTML;
p.innerHTML = 'By hitting Get Your Quote, I agree to receive autodialed calls, to include scheduling reminders, and texts from this company.';
However, the p tag's content isn't being updated and hitting barriers stating the code is undefined or isn't a function.
So, I attempted using .appendChild() with a thought process of creating a new element and hiding the existing if I can't update the existing copy.
My updated code using .appendChild() is:
let updatedCopy = document.createElement('p');
updatedCopy.id = 'testCopy';
updatedCopy.innerHTML = 'By hitting Get Your Quote, I agree to receive autodialed calls, to include scheduling reminders, and texts from this company';
document.getElementsByClassName('form-bg').appendChild(updatedCopy);
I've tried running this within the browser, but haven't been successful yet. Any guidance would be greatly appreciated! :)
Lastly, here's the HTML snippet with the form that's needing to be modified:
<div id="lightbox_shell">
<div class="test-w_contact-lightbox-individuals">
<div class="form-main-bg">
<div class="close-bg">
<button class="close" type="button">close</button>
</div>
<!-- Form Starts Here -->
<div class="form-bg">
<div class="legend">
Provide your information so an agent can reach you.
</div>
<form method="post">
<input name="offering" type="hidden" value="Individual"> <input name="language" type="hidden" value="English">
<div class="contact-fields">
<div class="flex_columns">
<div class="flex_2col">
<span class="input-text firstname" data-manual="1"><input class="required" id="firstname" maxlength="150" name="firstname" placeholder="First Name *" title="First Name" type="text"></span>
</div>
<div class="flex_2col">
<span class="input-text lastname" data-manual="1"><input class="required" id="lastname" maxlength="150" name="lastname" placeholder="Last Name *" title="Last Name" type="text"></span>
</div>
<div class="clearfloat"></div>
</div>
<div class="flex_columns">
<div class="flex_2col">
<span class="input-text phone" data-manual="1"><input class="required" id="phone" maxlength="12" name="phone" placeholder="Phone Number *" title="Phone Number" type="tel"></span>
</div>
<div class="flex_2col">
<span class="input-text zipcode" data-manual="1"><input class="required" id="zipcode" maxlength="5" name="zipcode" placeholder="Zip Code *" title="Zip Code" type="tel"></span>
</div>
<div class="clearfloat"></div>
</div>
<div class="flex_columns">
<div class="flex_2col">
<span class="input-text email" data-manual="1"><input class="required" id="email" maxlength="255" name="email" placeholder="Email *" title="Email" type="email"></span>
</div>
<div class="flex_2col">
<div class="requirement-info">
* fields are required
</div>
<ul class="misc">
<li>
<p>Would you like an agent to call asap?</p><label class="checkbox"><input name="yesmeet" type="checkbox"> Yes</label> <label class="checkbox"><input name="nomeet" type="checkbox"> No</label>
</li>
</ul>
</div>
<div class="clearfloat"></div>
</div>
</div>
<p style="font-size: 13px;line-height: 100%;margin: 15px 0 14px;">By hitting submit, I agree to receive autodialed calls, to include scheduling reminders, and texts from this company.</p>
</form>
</div>
<div class="raq-complete-panel">
<div class="thanks">
<div class="title">
Thank You!
</div>
<p>An agent will call you<br>
<span class="eta">within 15 minutes.</span></p>
</div>
<div class="info">
<p>Your confirmation number is <span class="number"></span>.</p>
<p>If you have any questions regarding your request, contact us at <a class="textlink" href="mailto:email#test.com">email#test.com</a></p>
<p>Please provide your confirmation number listed above for reference.</p>
</div>
</div>
<div class="clearfloat"></div>
</div>
</div>
</div>

Your first try was so close. You want your assignment to be like this:
var p = document.querySelector(".form-bg form > p");
then you can set the innerHTML.
p.innerHTML = "Your new text";

Adding Stripe payment data to a Multi Part Wizard form in AngularJS

I'm trying to create a three page wizard in angular JS, with the final part taking payment details.
However, looking through the Stripe docs I notice that there are no name attributes on any of the form elements related to Stripe.
At the moment I'm using buttons to link to the next step in the wizard, and only have a single form, which is submitted together. The three page wizard is based on this tutorial:
https://scotch.io/tutorials/angularjs-multi-step-form-using-ui-router
as you can see i'm using:
<div class="col-xs-6 col-xs-offset-3">
<a ui-sref="form.payment" class="btn btn-danger">
Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</div>
to navigate to the next form page.
My question is - how can i submit both the objects bound to the model (formData), and the Stripe data from within the same form. Is this possible?
If so - how can i do this and still keep the wizard functionality?
Below is my controller:
angular.module('formApp')
.controller('formController', ['$scope', 'Appointment', function($scope, Appointment) {
// we will store all of our form data in this object
$scope.formData = {};
$scope.formData.appintment_date = "";
$scope.opened = false;
/*$scope.momentDate = moment($scope.formData.date);*/
$scope.time1 = new Date();
$scope.showMeridian = true;
//Datepicker
$scope.dateOptions = {
'year-format': "'yy'",
'show-weeks' : false,
'show-time':true
};
// function to process the form
$scope.processForm = function() {
console.log($scope.formData);
var date = moment($scope.formData.date).format("dddd, MMMM Do YYYY, h:mm:ss a");
/*console.log(date);*/
var app = new Appointment($scope.formData);
//console.log(app);
app.$save();
};
}]);
home.html
<div class="page-header text-center">
<!-- the links to our nested states using relative paths -->
<!-- add the active class if the state matches our ui-sref -->
<div id="status-buttons" class="text-center">
<a ui-sref-active="active" ui-sref=".date"><span>1</span> Date</a>
<a ui-sref-active="active" ui-sref=".address"><span>2</span> Address</a>
<a ui-sref-active="active" ui-sref=".payment"><span>3</span> Payment</a>
</div>
</div>
<!-- use ng-submit to catch the form submission and use our Angular function -->
<form id="signup-form" ng-submit="processForm()">
<!-- our nested state views will be injected here -->
<div id="form-views" ui-view></div>
</form>
form-interests.html
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" name="name" ng-model="formData.name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" name="email" ng-model="formData.email" required>
</div>
<div class="form-group">
<label for="email">Address</label>
<input type="text" class="form-control" name="address" ng-model="formData.address_1" placeholder="e.g. Unit and Street"required>
<input type="text" class="form-control" name="address" ng-model="formData.city" placeholder="City e.g. Toronto">
<input type="text" class="form-control" name="address" ng-model="formData.postcode" placeholder="Postal Code" required>
</div>
<div class="form-group">
<label for="email">Phone Number</label>
<input type="text" class="form-control" name="address" ng-model="formData.phone" placeholder="(416) - 222 5555"required>
</div>
<div class="form-group row">
<div class="col-xs-6 col-xs-offset-3">
<a ui-sref="form.payment" class="btn btn-danger">
Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</div>
</div>
form-payment.html - note the lack of name attributes.
<!-- form-payment.html -->
<span class="payment-errors"></span>
<div class="form-group">
<label for="card_number">Card Number</label>
<input type="text" class="form-control" size="20" data-stripe="number"/>
</div>
<div class="form-row">
<label for="CVC"> CVC</label>
<input type="text" class="form-control" size="4" data-stripe="cvc"/>
</div>
<div class="form-row">
<label for="exp_month"> Expiration (Month)</label>
<input type="text" class="form-control" size="2" data-stripe="exp-month"/>
<label for="exp_month"> Expiration (Year)</label>
<input type="text" class="form-control" size="4" data-stripe="exp-year"/>
</div>
<div class="text-center">
<span class="glyphicon glyphicon-heart"></span>
<h3>Thanks For Your Money!</h3>
<button type="submit" id="submitButton" class="btn">Submit</button>
</div>

possible to make ajax call for 2 links with one function

When I click fetch, I need the data to be fetched but not displayed in the form, but when I click feeling lucky, i want to display the list and fill up the form.
I got the logic working well for fetch link, Do I have to repeat the same for feeling lucky link? is there a optimized way to do it.
$post-item-# click event is inside success call data each loop, is that the right place to do it?
Here's a mirror of the snippet below: JSFiddle
Data
{
tag: "urlfoodchannel,chocolate,dessert",
searchedTags: "urlfoodchannel,chocolate,dessert|urlfoodchannel,chocolate,dessert|urlfoodchannel,chocolate,dessert",
tagPage: "/food/urlfoodchannel,chocolate,dessert-recipes/",
page: "2",
pages: "2",
total: "20",
posts: [{
postId: "21122896",
postUrl: "/article/2014/12/30/chocolate-oreo-ice-cream/21122896/",
postTitle: "Chocolate Oreo Ice Cream",
postExcerpt: "This creamy chocolate ice cream with chunks of Oreo cookie is perfect and surprisingly easy to make!",
postAuthor: "Marin Mama Cooks",
postPubdate: "2014-12-30T20:49:00",
postPubdateUnix: "1419990540",
postImage: "http://urlcdn.com/hss/storage/midas/201316424/chocolate-oreo-ice-cream-11.jpg"
} {
postId: "21122797",
postUrl: "/article/2014/12/30/sheet-pan-smores/21122797/",
postTitle: "Sheet Pan S'mores",
postExcerpt: "You've never had s'mores quite like this! Try this decadent and delicious recipe for sheet pan s'mores.",
postAuthor: "Oh, Bite It",
postPubdate: "2014-12-30T15:26:00",
postPubdateUnix: "1419971160",
postImage: "http://urlcdn.com/hss/storage/midas/201315673/spsbet.jpg"
}]
}
Script
$(document).ready(function () {
$("#fetch").on("click", function () {
tags = $("#tags").val();
count = $("#count").val() ? $("#count").val() : "10";
page = $("#page").val() ? $("#page").val() : "1";
apiurl = "http://urlblog.url.com/api/tags-v1/" + tags + "?pageSize=" + count + "&page=" + page;
$.ajax({
type: 'GET',
url: apiurl,
data: {
get_param: 'value'
},
success: function (data) {
$("#tag").text(data.tagPage);
$.each(data.posts, function (i) {
$("#posts").append('<li class="post-item-' + i + '"><p class="post-title">' + data.posts[i].postTitle + ' <img class="add-row" src="/portalcms/_tool/media/add.png">+</p><p class="post-thumb"><img src="' + data.posts[i].postImage + '" width="150px" class="post-image"/></p><p class="post-url">' + data.posts[i].postUrl + '</p></li>');
$(".post-item-" + i).bind("click", function () {
k = i + 1;
tval = $(this).find(".post-title").text();
ival = $(this).find(".post-image").attr("src");
uval = $(this).find(".post-url").text();
$("#input-link" + k + "\\.alt").val(tval);
$("#input-link" + k + "\\.href").val(uval);
$("#input-link" + k + "\\.credit").val(ival);
});
});
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<fieldset class="visible">Tags for tomorrow:
<input type="text" name="futuretags" id="future-tags" />
</fieldset>
<fieldset class="visible">Tags:
<input type="text" name="tags" id="tags" value="" />Count:
<input type="text" name="count" id="count" value="10" />Page:
<input type="text" name="page" id="page" value="1" /> Fetch
Feeling Lucky
<ul id="posts"></ul>
</fieldset>
<fieldset>
<legend>Link 1:</legend>
<ul class="inputs">
<li class="compact quickFormField-file ">
<label for="input-link1.src._action">Image:</label>
<br />
<select id="input-link1.src._action" name="link1.src._action">
<option value="no">No File</option>
<option value="upload">Upload a New File:</option>
<option value="url">Use File at Asset URL:</option>
</select> <span class="upload" style="display: none;"><input type="file" name="link1.src._upload" /></span>
<span class="url" style="display: none;"><input type="text" name="link1.src._url" value="" /> <small>(e.g. /path/to/file.jpg)</small></span>
</li>
<li class="">
<label for="input-link1.alt">Alt Text:</label>
<input id="input-link1.alt" type="text" name="link1.alt" value="" />
</li>
<li class="">
<label for="input-link1.credit">Credit:</label>
<input id="input-link1.credit" type="text" name="link1.credit" value="" />
</li>
<li class="">
<label for="input-link1.href">Href (URL):</label>
<input id="input-link1.href" type="text" name="link1.href" value="" />
</li>
</ul>
<div class="advancedgrp">
<div class="hdr">Show Advanced Options</div>
<fieldset class="cnt">
<legend>Advanced Options:</legend>
<ul class="inputs">
<li class="">
<label for="input-link1.target">Target:</label>
<select id="input-link1.target" name="link1.target">
<option value="">Same Window</option>
<option value="_blank">New Window</option>
</select>
</li>
<li class="">
<label for="input-link1.onclick">Onclick:</label>
<input id="input-link1.onclick" type="text" name="link1.onclick" value="" />
</li>
<li class="">
<label for="input-link1.otherAtts">Other Attributes:</label>
<input id="input-link1.otherAtts" type="text" name="link1.otherAtts" value="" />
</li>
<li class="">
<label for="input-link1.trackKey">Tracking Key:</label>
<select id="input-link1.trackKey" name="link1.trackKey">
<option value="icid" selected="selected">icid</option>
<option value="ncid">ncid</option>
</select>
</li>
<li class="">
<label for="input-link1.trackVal">Tracking Value:</label>
<input id="input-link1.trackVal" type="text" name="link1.trackVal" value="" />
</li>
</ul>
</fieldset>
</div>
<ul class="inputs"></ul>
</fieldset>
<fieldset>
<legend>Link 2:</legend>
<ul class="inputs">
<li class="compact quickFormField-file ">
<label for="input-link2.src._action">Image:</label>
<br />
<select id="input-link2.src._action" name="link2.src._action">
<option value="no">No File</option>
<option value="upload">Upload a New File:</option>
<option value="url">Use File at Asset URL:</option>
</select> <span class="upload" style="display: none;"><input type="file" name="link2.src._upload" /></span>
<span class="url" style="display: none;"><input type="text" name="link2.src._url" value="" /> <small>(e.g. /path/to/file.jpg)</small></span>
</li>
<li class="">
<label for="input-link2.alt">Alt Text:</label>
<input id="input-link2.alt" type="text" name="link2.alt" value="" />
</li>
<li class="">
<label for="input-link2.credit">Credit:</label>
<input id="input-link2.credit" type="text" name="link2.credit" value="" />
</li>
<li class="">
<label for="input-link2.href">Href (URL):</label>
<input id="input-link2.href" type="text" name="link2.href" value="" />
</li>
</ul>
<div class="advancedgrp">
<div class="hdr">Show Advanced Options</div>
<fieldset class="cnt">
<legend>Advanced Options:</legend>
<ul class="inputs">
<li class="">
<label for="input-link2.target">Target:</label>
<select id="input-link2.target" name="link2.target">
<option value="">Same Window</option>
<option value="_blank">New Window</option>
</select>
</li>
<li class="">
<label for="input-link2.onclick">Onclick:</label>
<input id="input-link2.onclick" type="text" name="link2.onclick" value="" />
</li>
<li class="">
<label for="input-link2.otherAtts">Other Attributes:</label>
<input id="input-link2.otherAtts" type="text" name="link2.otherAtts" value="" />
</li>
<li class="">
<label for="input-link2.trackKey">Tracking Key:</label>
<select id="input-link2.trackKey" name="link2.trackKey">
<option value="icid" selected="selected">icid</option>
<option value="ncid">ncid</option>
</select>
</li>
<li class="">
<label for="input-link2.trackVal">Tracking Value:</label>
<input id="input-link2.trackVal" type="text" name="link2.trackVal" value="" />
</li>
</ul>
</fieldset>
</div>
<ul class="inputs"></ul>
</fieldset>
<fieldset>
<legend>Link 3:</legend>
<ul class="inputs">
<li class="compact quickFormField-file ">
<label for="input-link3.src._action">Image:</label>
<br />
<select id="input-link3.src._action" name="link3.src._action">
<option value="no">No File</option>
<option value="upload">Upload a New File:</option>
<option value="url">Use File at Asset URL:</option>
</select> <span class="upload" style="display: none;"><input type="file" name="link3.src._upload" /></span>
<span class="url" style="display: none;"><input type="text" name="link3.src._url" value="" /> <small>(e.g. /path/to/file.jpg)</small></span>
</li>
<li class="">
<label for="input-link3.alt">Alt Text:</label>
<input id="input-link3.alt" type="text" name="link3.alt" value="" />
</li>
<li class="">
<label for="input-link3.credit">Credit:</label>
<input id="input-link3.credit" type="text" name="link3.credit" value="" />
</li>
<li class="">
<label for="input-link3.href">Href (URL):</label>
<input id="input-link3.href" type="text" name="link3.href" value="" />
</li>
</ul>
<div class="advancedgrp">
<div class="hdr">Show Advanced Options</div>
<fieldset class="cnt">
<legend>Advanced Options:</legend>
<ul class="inputs">
<li class="">
<label for="input-link3.target">Target:</label>
<select id="input-link3.target" name="link3.target">
<option value="">Same Window</option>
<option value="_blank">New Window</option>
</select>
</li>
<li class="">
<label for="input-link3.onclick">Onclick:</label>
<input id="input-link3.onclick" type="text" name="link3.onclick" value="" />
</li>
<li class="">
<label for="input-link3.otherAtts">Other Attributes:</label>
<input id="input-link3.otherAtts" type="text" name="link3.otherAtts" value="" />
</li>
<li class="">
<label for="input-link3.trackKey">Tracking Key:</label>
<select id="input-link3.trackKey" name="link3.trackKey">
<option value="icid" selected="selected">icid</option>
<option value="ncid">ncid</option>
</select>
</li>
<li class="">
<label for="input-link3.trackVal">Tracking Value:</label>
<input id="input-link3.trackVal" type="text" name="link3.trackVal" value="" />
</li>
</ul>
</fieldset>
</div>
<ul class="inputs"></ul>
</fieldset> <span id="tag"></span>

What you can do is just write the javascript function like this:
$(function(){
var searchmethods = {
fetched : false,
data : "",
fetch : function(callback) {
$.ajax({
success: function(data) {
fetched = false;
searchmethods.data = data;
if($.isFunction(showResults)) showResults();
}
});
},
lucky : function() {
if(searchmethods.fetched) {
searchmethods.showResults();
} else {
searchmethods.fetch(searchmethods.showResults);
}
},
showResults : function() {
// show results
}
};
$(".link").click(function(){
var action = $(this).data("action");
searchmethods[action].apply(this);
});
});
i like this way because you have all the code that you are going to need into an object
called searchmethods and it has the methods. Here is how does this work:
searchmethods.fetch() is called when you click on the fetch link, and retrieves the
data with the jQuery $.ajax() method.
searchmethods.lucky() is called when you click on the lucky link, checks if the data has been
retrieved, if not then it calls the searchmethods.fetch() method an it passes the function searchmethods.lucky() by parameter so it can be called after the $.ajax() retrieves the data
and the HTML like this:
<a data-action="fetch" class="link">fetch</a>
<a data-action="lucky" class="link">lucky</a>
but it is up to you, that's just an easy way
EDIT: answer it's already updated, sorry about my weird english

Conditional Logic on my form, One option will take you to next

So the actual scenario is...
I have a form on a page that needs some conditional logic.
form fields...
Then, I have a bunch of questions for my customer which would determine what (form) would be displayed or not.
(i.e) What type of Marketing list are you looking for?
(options) Saturated or Targeted
If they choose Saturated, Then Saturated displays
If they choose Targeted, Then Targeted displays
either one or the other, both forms cannot be displayed at the same time.
and so on...
one prompt leads you to the next.
I would greatly appreciate any help I could get on this
This is the code I have so far:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var url = window.location.href;
var option = url.match(/option=(.*)/);
if (option !== null) {
$(".link ." . option[1]).trigger('click');
}
$(".link").bind('click', function () {
$('#intro-tekst').hide();
$('.boxes').hide();
$('.link').removeClass('selected');
$(this).removeClass('link');
$('#' + $(this).prop('class')).show();
$(this).addClass('link selected');
});
});
</script>
<body>
<p>
Who Do You Want to Mail to?
<ul>
<li>Business</li>
<li>Residents</li>
<li>Have a list?</li>
</ul>
</p>
<div class="boxes hidden" id="business">
What Type of Business List Do You Want?
<ul>
<li>Saturation</li>
<li>Targeted</li>
</ul>
</div>
<div class="boxes hidden" id="saturation">
Do You Want To: Mail to an Entire Zip Code or Mail to a Radius from an Address?
<ul>
<li>Zipcode</li>
<li>Radius</li>
</ul>
</div>
<div class="boxes hidden" id="zipcode">
<form>
<label for="fname1">First Name: </label>
<input type="text" id="fname1" value="" name="fname1"/>
</form>
</div>
<div class="boxes hidden" id="radius">
<form>
<label for="fname1">First Name: </label>
<input type="text" id="fname1" value="" name="fname1"/>
</form>
</div>
<div class="boxes hidden" id="targeted">
<div id="intro-tekst">Do You Want To: Mail to an Entire Zip Code or Mail to a Radius from an Address?
<ul>
<li>Zipcode</li>
<li>Radius</li>
</ul></div>
</div>
<div class="boxes hidden" id="zipcode">
<form>
<label for="fname1">First Name: </label>
<input type="text" id="fname1" value="" name="fname1"/>
</form>
</div>
<div class="boxes hidden" id="radius">
<form>
<label for="fname1">First Name: </label>
<input type="text" id="fname1" value="" name="fname1"/>
</form>
</div>
<div class="boxes hidden" id="residents">
<div id="intro-tekst">What Type of Consumer List Do You Want?
<ul>
<li>Saturation</li>
<li>Targeted</li>
</ul></div>
</div>
</div>
<div class="boxes hidden" id="have-list">
<form>
<label for="fname1">First Name: </label>
<input type="text" id="fname1" value="" name="fname1"/>
</form>
</div>
</body>

This gets you most of the way there: http://jsfiddle.net/rym2g/
The only thing it doesn't do at the moment is close all the other panes when you choose something further up the list. That I leave to you. :)
<form>
<ul class="form-nav">
<li>AAA</li>
<li>BBB</li>
</ul>
</form>
<form class="hidden" id="a-1">
<ul class="form-nav">
<li>aaa</li>
<li>bbb</li>
</ul>
</form>
<form class="hidden" id="a-1-1">
<p>A-1-1</p>
</form>
<form class="hidden" id="a-1-2">
<p>A-1-2</p>
</form>
<form class="hidden" id="a-2">
<ul class="form-nav">
<li>111</li>
<li>222</li>
</ul>
</form>
<form class="hidden" id="a-2-1">
<p>A-2-1</p>
</form>
<form class="hidden" id="a-2-2">
<p>A-2-2</p>
</form>
And JavaScript:
$(document).on("click", "ul.form-nav a", function(event) {
event.preventDefault();
var id = event.target.href.replace(/^[^#]+/, "");
console.log("Going to: " + id);
$(id).show().focus();
});

Order forms field calculation

I am building a order form for buying Bitcoins via JotForm.Maybe someone could give me a head start here. My order form has a a few fields I have a field with current Bitcoin price which is retrieved with PHP via JSON. What I would like to do is when a user enters a amount of bitcoins he would like to order the field of TOTAL SUM would refresh automatically based on amount he entered like "2xcurent price". Any help is like really appreciated!
This is how it looks visually:
http://oi60.tinypic.com/2k4fgw.jpg
Part of my form code is here:
<h2 id="header_13" class="form-header">
Order form
</h2>
</div>
</li>
<li class="form-line" id="id_15">
<div id="cid_15" class="form-input-wide">
<div id="text_15" class="form-html">
<p>
<strong>
Bitcoin price USD:<?php echo $usd; ?>
</strong>
</p>
</div>
</div>
</li>
<li class="form-line" id="id_18">
<div id="cid_18" class="form-input-wide">
<div id="text_18" class="form-html">
<p>
<strong>
Total Sum :
</strong>
</p>
</div>
</div>
</li>
<li class="form-line" id="id_3">
<label class="form-label-top" id="label_3" for="input_3"> Email: </label>
<div id="cid_3" class="form-input-wide">
<input type="email" class=" form-textbox validate[Email]" id="input_3" name="q3_elPastas" size="25" value="" maxlength="38" />
</div>
</li>
<li class="form-line" id="id_9">
<label class="form-label-top" id="label_9" for="input_9"> Bitcoin amount: </label>
<div id="cid_9" class="form-input-wide">
<input type="text" class=" form-textbox validate[Numeric]" data-type="input-textbox" id="input_9" name="q9_pasirinktosValiutos9" size="25" value="" />
</div>
</li>
<li class="form-line" id="id_10">
<label class="form-label-top" id="label_10" for="input_10"> Bitcoin address: </label>
<div id="cid_10" class="form-input-wide">
<input type="text" class=" form-textbox validate[AlphaNumeric]" data-type="input-textbox" id="input_10" name="q10_bitcoinAdresas10" size="25" value="" maxlength="37" />
</div>
</li>
<li class="form-line" id="id_14">
<label class="form-label-top" id="label_14" for="input_14"> </label>
<div id="cid_14" class="form-input-wide">
<div class="form-single-column"><span class="form-checkbox-item" style="clear:left;"><input type="checkbox" class="form-checkbox" id="input_14_0" name="q14_input14[]" value="I Agree to receive newsletter" />
<label for="input_14_0">I Agree to receive news letter </label></span><span class="clearfix"></span>
</div>
</div>
</li>
<li class="form-line" id="id_12">
<div id="cid_12" class="form-input-wide">
<div style="width:100%; text-align:Left;">
<script id="jcf_custom_field" type="text/javascript" src="http://js.jotform.com/WidgetsServer.min.js"></script>
<iframe onload="widgetFrameLoaded(12)" frameborder="0" scrolling="no" class="custom-field-frame" id="customFieldFrame_12" src="" style="border:none;width:400px; height: 45px">
</iframe>
<div>
<input id="input_12" class="form-hidden widget-required form-widget" type="hidden" name="q12_clickTo" value="">
</div>
</div>
</div>
</li>
<li class="form-line" id="id_2">
<div id="cid_2" class="form-input-wide">
<div style="text-align:center" class="form-buttons-wrapper">
<button id="input_2" type="submit" class="form-submit-button">
ORDER!
</button>
</div>
</div>
</li>
<li style="display:none">
Should be Empty:
<input type="text" name="website" value="" />
</li>
</ul>

I solved this by simply using an array of objects. So for example, I am accepting registrations. So to get the total price I go about it like this:
var registrants = [];
registrants.push({ price: 30 });
registrants.push({ price: 10 });
registrants.push({ price: 20 });
var totalPrice = 0;
for(var x = 0; x < registrants.length; x++){
totalPrice += registrants[x]["price"];
}
and you would just update the price property of the corresponding registrant when appropriate.