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.
Related
I am fairly new to javascript and wish to ask for some guidance.
I am trying to make a function that shows a Div id based on three inputs:
Diet type
Number of calories
Number of meals
Thanks.
<div class="dietSelector">
<div class="diet">
<div class="header">
<h2>Diet</h2>
</div>
<li class=nav-item>
<input type="radio" onclick="create()" id="anything">Anything
</li>
<li class=nav-item>
<input type="radio"id="keto">Keto
</li>
<li class=nav-item>
<input type="radio" id="vegetarian">Vegetarian
</li>
<form class="form" id="form-control">
<label>Calories:
</label>
<input type="number" id="calories" min="500" max="5000">
<br><br>
<label>
Meals:
</label>
<input type="number" placeholder="2" id="meals" min="1" max="5">
<button onClick="create" value="create">Create</button>
<br><br>
</form>
</div>
</div>
There were a few changes required in your code, kindly check the updated code in the below snippet.
I guess, this is your desired output. Let me know if you require further assistance.
function generateMeal(event) {
event.preventDefault();
debugger;
const calories = Number(document.getElementById("calories").value);
const meals = Number(document.getElementById("meals").value);
const anythingPlan3 = document.getElementById("anythingPlan3");
anythingPlan3.style.display = "none";
if (
document.getElementById("anything").checked &&
calories > 1500 &&
calories < 2000 &&
meals == 4
) {
anythingPlan3.style.display = "block";
} else {
anythingPlan3.style.display = "none";
}
}
<div class="dietSelector">
<div class="dietContainer">
<div class="header">
<h2>Please choose your diet</h2>
</div>
<li class="nav-item">
<input
type="radio"
name="diets"
id="anything"
/>Anything
<img src="images/meat.png" class="diets" />
</li>
<li class="nav-item">
<input type="radio" name="diets" id="keto" />Keto
<img src="images/keto.png" class="diets" />
</li>
<li class="nav-item">
<input type="radio" name="diets" id="vegetarian" />Vegetarian
<img src="images/vegetarian.png" class="diets" />
</li>
<form class="diet" onsubmit="generateMeal(event)" id="dietForm">
<label
>Please enter the number of calories you wish to eat in a day:
</label>
<input
type="number"
placeholder="1800"
id="calories"
min="1000"
max="2500"
/>
<br /><br />
<label> How many meals you would like to eat: </label>
<input type="number" placeholder="4" id="meals" min="3" max="4" />
<button type="submit" value="Generate">Generate</button>
</form>
</div>
</div>
<!-- Div container for Anything Plan, 3 meals. 1500-2500 Calories-->
<div id="anythingPlan3" style="display: none;">
<h2>
Your delicious, personalised 3-meal plan of 'Anything' in a 1500-2000
calorie range:
</h2>
<h3 class="headings">Breakfast</h3>
<img src="images/oatmeal.jpg" class="mealImage" />
<span class="calories"> 628 Calories </span>
<br />
<a
class="recipes"
href="https://www.runningtothekitchen.com/strawberry-oatmeal/"
>
Strawberry Oatmeal</a
>
<br />
<span class="serving">2 Bowls</span>
<h3 class="headings">Lunch</h3>
<img src="images/drumsticks.jpg" class="mealImage" />
<span class="calories"> 504 Calories </span>
<br />
<a
class="recipes"
href="https://www.taste.com.au/recipes/smoky-bbq-drumsticks-carrot-noodle-salad/RUmTZzJv?r=healthy/qnLBa1zE"
>
Smokey Bbq Drumsticks and Carrot Noodle Salad</a
>
<br />
<span class="serving">1 serving</span>
<h3 class="headings">Dinner</h3>
<img src="images/meatballs.jpg" class="mealImage" />
<span class="calories"> 628 Calories</span>
<br />
<a
class="recipes"
href="https://www.bbcgoodfood.com/recipes/chicken-meatballs-quinoa-curried-cauliflower"
>
Chicken Meatballs with Quinoa & Curried cauliflower></a
>
<br />
<span class="serving">1 serving</span>
</div>
You need to dynamically set conditions and render the divs. That's the cleanest way I can recommend.
const divArr = [
{
id: "anythingPlan2",
calorieLow: 1000,
calorieHigh: 2000
},
{
id: "anythingPlan3",
calorieLow: 2000,
calorieHigh: 3000
},
];
Fiddle: https://jsfiddle.net/h6es573m/
I am trying to locate this span with a certain class and then work up finding closest div with another specified class and hide it. Perhaps I'm missing something?
Can anyone see why?
$(document).ready(function() {
if ($('.ty-product-detail .product-left .stock-wrap span').hasClass('ty-qty-out-of-stock')) {
$(this).closest('.ty-product-block__option').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ty-product-block ty-product-detail">
<div class="ty-product-block__wrapper clearfix">
<div class="ty-product-block__img-wrapper">
<div class="ty-product-block__img cm-reload-487" id="product_images_487_update">
<div class="ty-product-img cm-preview-wrapper">
<a id="det_img_link_48756b03bbdd708a_2203" data-ca-image-id="preview[product_images_48756b03bbdd708a]" class="cm-image-previewer cm-previewer ty-previewer" data-ca-image-width="550" data-ca-image-height="330" href="http://beanbags.ambientlounge.com/images/thumbnails/550/550/detailed/2/sakura-pink-2_te4i-3d.jpg?t=1449211457"
title="">
<img class="ty-pict " id="det_img_48756b03bbdd708a_2203" src="http://beanbags.ambientlounge.com/images/thumbnails/280/280/detailed/2/sakura-pink-2_te4i-3d.jpg?t=1449387170" alt="" title="" data-cloudzoom="zoomImage: "http://beanbags.ambientlounge.com/images/thumbnails/550/550/detailed/2/sakura-pink-2_te4i-3d.jpg?t=1449211457""
style="-webkit-user-select: none;"><span class="ty-previewer__icon hidden-phone"></span>
</a>
<a id="det_img_link_48756b03bbdd708a_1806" data-ca-image-id="preview[product_images_48756b03bbdd708a]" class="cm-image-previewer hidden cm-previewer ty-previewer" data-ca-image-width="400" data-ca-image-height="271" href="http://beanbags.ambientlounge.com/images/thumbnails/400/400/detailed/1/dims-zen.jpg?t=1440742425"
title="">
<img class="ty-pict " id="det_img_48756b03bbdd708a_1806" src="http://beanbags.ambientlounge.com/images/thumbnails/280/280/detailed/1/dims-zen.jpg?t=1440919130" alt="" title="" data-cloudzoom="zoomImage: "http://beanbags.ambientlounge.com/images/thumbnails/400/400/detailed/1/dims-zen.jpg?t=1440742425""><span class="ty-previewer__icon hidden-phone"></span>
</a>
</div>
<div class="ty-product-thumbnails ty-center cm-image-gallery" id="images_preview_48756b03bbdd708a" style="width: 280px;">
<a data-ca-gallery-large-id="det_img_link_48756b03bbdd708a_2203" class="cm-thumbnails-mini active ty-product-thumbnails__item">
<img class="ty-pict " id="det_img_48756b03bbdd708a_2203_mini" src="http://beanbags.ambientlounge.com/images/thumbnails/35/35/detailed/2/sakura-pink-2_te4i-3d.jpg?t=1449387170" alt="" title="">
</a>
<a data-ca-gallery-large-id="det_img_link_48756b03bbdd708a_1806" class="cm-thumbnails-mini ty-product-thumbnails__item">
<img class="ty-pict " id="det_img_48756b03bbdd708a_1806_mini" src="http://beanbags.ambientlounge.com/images/thumbnails/35/35/detailed/1/dims-zen.jpg?t=1440919130" alt="" title="">
</a>
</div>
<!-- Inline script moved to the bottom of the page -->
<!-- Inline script moved to the bottom of the page -->
<!-- Inline script moved to the bottom of the page -->
<!-- Inline script moved to the bottom of the page -->
<!--product_images_487_update-->
</div>
</div>
<div class="ty-product-block__left">
<form action="http://beanbags.ambientlounge.com/" method="post" name="product_form_487" enctype="multipart/form-data" class="cm-disable-empty-files cm-ajax cm-ajax-full-render cm-ajax-status-middle cm-processed-form">
<input type="hidden" name="result_ids" value="cart_status*,wish_list*,checkout*,account_info*">
<input type="hidden" name="redirect_url" value="index.php?dispatch=products.view&product_id=487">
<input type="hidden" name="product_data[487][product_id]" value="487">
<h1 class="ty-product-block-title">Zen Lounger - Sakura Pink</h1>
<div class="ty-product-block__sku">
<div class="ty-control-group ty-sku-item cm-reload-487" id="sku_update_487">
<input type="hidden" name="appearance[show_sku]" value="1">
<label class="ty-control-group__label" id="sku_487">CODE:</label>
<span class="ty-control-group__item" id="product_code_487">5528</span>
<!--sku_update_487-->
</div>
</div>
<hr class="clear">
<div class="product-left">
<div class="prices-container price-wrap">
<div class="ty-product-prices">
<span class="cm-reload-487" id="old_price_update_487">
<!--old_price_update_487--></span>
<div class="ty-product-block__price-actual">
<span class="cm-reload-487 ty-price-update" id="price_update_487">
<input type="hidden" name="appearance[show_price_values]" value="1">
<input type="hidden" name="appearance[show_price]" value="1">
<span class="ty-price" id="line_discounted_price_487"><span class="ty-price-num">$</span><span id="sec_discounted_price_487" class="ty-price-num">149.00</span></span>
<!--price_update_487-->
</span>
</div>
<span class="cm-reload-487" id="line_discount_update_487">
<input type="hidden" name="appearance[show_price_values]" value="1">
<input type="hidden" name="appearance[show_list_discount]" value="1">
<!--line_discount_update_487--></span>
</div>
</div>
<div class="ty-product-block__option">
<div class="cm-reload-487" id="product_options_update_487">
<input type="hidden" name="appearance[show_product_options]" value="1">
<input type="hidden" name="appearance[details_page]" value="1">
<input type="hidden" name="additional_info[info_type]" value="D">
<input type="hidden" name="additional_info[get_icon]" value="1">
<input type="hidden" name="additional_info[get_detailed]" value="1">
<input type="hidden" name="additional_info[get_additional]" value="">
<input type="hidden" name="additional_info[get_options]" value="1">
<input type="hidden" name="additional_info[get_discounts]" value="1">
<input type="hidden" name="additional_info[get_features]" value="">
<input type="hidden" name="additional_info[get_extra]" value="">
<input type="hidden" name="additional_info[get_taxed_prices]" value="1">
<input type="hidden" name="additional_info[get_for_one_product]" value="1">
<input type="hidden" name="additional_info[detailed_params]" value="1">
<input type="hidden" name="additional_info[features_display_on]" value="C">
<div class="cm-picker-product-options ty-product-options" id="opt_487">
<div class="ty-control-group ty-product-options__item product-list-field clearfix" id="opt_487_365">
<label class="ty-control-group__label ty-product-options__item-label">Option:</label>
<ul id="option_487_365_group" class="ty-product-options__elem">
<li class="hidden">
<input type="hidden" name="product_data[487][product_options][365]" value="731" id="option_487_365">
</li>
<li>
<label id="option_description_487_365_731" class="ty-product-options__box option-items cover-only">
<input type="radio" class="radio" name="product_data[487][product_options][365]" value="731" checked="checked" onclick="fn_change_options('487', '487', '365');">Cover only
</label>
</li>
<li>
<label id="option_description_487_365_732" class="ty-product-options__box option-items with-filling">
<input type="radio" class="radio" name="product_data[487][product_options][365]" value="732" onclick="fn_change_options('487', '487', '365');">
</label>
</li>
</ul>
</div>
</div>
<!-- Inline script moved to the bottom of the page -->
<!--product_options_update_487-->
</div>
</div>
<div class="ty-product-block__advanced-option">
<div class="cm-reload-487" id="advanced_options_update_487">
<!--advanced_options_update_487-->
</div>
</div>
<div class="ty-product-block__field-group">
<div class="cm-reload-487 stock-wrap" id="product_amount_update_487">
<input type="hidden" name="appearance[show_product_amount]" value="1">
<div class="ty-control-group product-list-field">
<label class="ty-control-group__label">Availability:</label>
<span class="ty-qty-out-of-stock ty-control-group__item" id="out_of_stock_info_487">Out of stock</span>
</div>
<!--product_amount_update_487-->
</div>
<div class="cm-reload-487" id="qty_update_487">
<input type="hidden" name="appearance[show_qty]" value="">
<input type="hidden" name="appearance[capture_options_vs_qty]" value="">
<input type="hidden" name="product_data[487][amount]" value="1">
<!--qty_update_487-->
</div>
<div class="ty-product-block__button">
<div class="cm-reload-487 " id="add_to_cart_update_487">
<input type="hidden" name="appearance[show_add_to_cart]" value="1">
<input type="hidden" name="appearance[show_list_buttons]" value="1">
<input type="hidden" name="appearance[but_role]" value="big">
<input type="hidden" name="appearance[quick_view]" value="">
<div class="ty-control-group">
<label for="sw_product_notify_487" class="ty-strong">
<input id="sw_product_notify_487" type="checkbox" class="checkbox cm-switch-availability cm-switch-visibility" name="product_notify" onclick="if (!this.checked) {Tygh.$.ceAjax('request', 'http://beanbags.ambientlounge.com/index.php?dispatch=products.product_notifications&enable=' + 'N&product_id=487&email=' + $('#product_notify_email_487').get(0).value, {cache: false});}">Notify me when this product is back in stock</label>
</div>
<div class="ty-control-group ty-input-append ty-product-notify-email hidden" id="product_notify_487">
<input type="hidden" name="enable" value="Y">
<input type="hidden" name="product_id" value="487">
<label id="product_notify_email_label" for="product_notify_email_487" class="cm-required cm-email hidden">Email</label>
<input type="text" name="hint_email" id="product_notify_email_487" size="20" value="Enter e-mail address" class="ty-product-notify-email__input cm-hint" title="Enter e-mail address">
<button class="ty-btn-go cm-ajax" type="submit" name="dispatch[products.product_notifications]" title="Go"><i class="ty-btn-go__icon ty-icon-right-dir"></i>
</button>
</div>
<!--add_to_cart_update_487-->
</div>
</div>
</div>
<p class="clear filled-msg cover-only">* If you don't choose to add filling you will receive the cover only.</p>
<p class="clear filled-msg filled">* Comes pre-filled with microbeads</p>
</div>
<div class="product-right">
<div class="ty-product-block__note">
<p style="text-align: center;">
<img src="http://www.beanbags.com.au/images/ambient-lounge.jpg">
</p>
</div>
</div>
</form>
<div class="clear"></div>
<!-- Inline script moved to the bottom of the page -->
<div class="ty-tabs cm-j-tabs clearfix">
<ul class="ty-tabs__list">
<li id="description" class="ty-tabs__item cm-js active"><a class="ty-tabs__a">Description</a>
</li>
<li id="product_tab_11" class="ty-tabs__item cm-js"><a class="ty-tabs__a">Colour</a>
</li>
<li id="product_tab_10" class="ty-tabs__item cm-js"><a class="ty-tabs__a">Fabric</a>
</li>
<li id="features" class="ty-tabs__item cm-js"><a class="ty-tabs__a">Features</a>
</li>
</ul>
</div>
<div class="cm-tabs-content ty-tabs__content clearfix" id="tabs_content">
<div id="content_description" class="ty-wysiwyg-content content-description" style="display: block;">
<div>
<h2>Ambient Lounge Zen Lounger - Sakura Pink</h2>
<p>
Dive onto the big pink pad and it will hug your body with all the love and warmth of a big squishy teddy bear. You will fall in love with this super-soft square cushioned bean bag becasue of the difference in fabric and tactility. Quite simply, we use
premuim open weave fabrics that make you want to hug your Zen close to your skin on a cold winter's night. The design of the Zen is just so flexible and versatile - it doesnt take up lots of space in the house but yet you can sprawl out
full body to study or sit up straight to watch the TV. The natural colour scheme means it can go just about anywhere and look good. Use it as your reliable crashmat after a long day on your feet.
</p>
<p>1 bag of 300lt is enough <u>Bean Filling</u> for the luxurious Conversion Lounger (290lt needed).</p>
</div>
</div>
<div id="content_product_tab_11" class="ty-wysiwyg-content content-product_tab_11" style="display: none;">
<div class="ty-wysiwyg-content">
<p>
Make your living room or playroom pop with this precious pink plus-size luxury lounger. Children love this friendly fresh color while adults love that it also carries a deep sense of sophistication. Our world-class designers chose this decadent pink because
of its versatility and ability to sit well in many types of interior settings.
</p>
</div>
</div>
<div id="content_product_tab_10" class="ty-wysiwyg-content content-product_tab_10" style="display: none;">
<div class="ty-wysiwyg-content">
<p>
Extremely soft and tactile on the surface and backed with TC to give it extra strength and body for hard wear and form. Super thick sofa weave to give you a lush seating experience.
</p>
<p>
40％ viscose, 60% polyester, 560g/m.
</p>
</div>
</div>
<div id="content_product_tab_9" class="ty-wysiwyg-content content-product_tab_9">
</div>
<div id="content_features" class="ty-wysiwyg-content content-features" style="display: none;">
<div class="ty-product-feature">
<span class="ty-product-feature__label">Manufacture:</span>
<div class="ty-product-feature__value">Ambient Lounge</div>
</div>
<div class="ty-product-feature">
<span class="ty-product-feature__label">Style:</span>
<div class="ty-product-feature__value">Zen Lounger</div>
</div>
<div class="ty-product-feature">
<span class="ty-product-feature__label">Type:</span>
<div class="ty-product-feature__value">Interiors</div>
</div>
</div>
<div id="content_discussion" class="ty-wysiwyg-content content-discussion">
</div>
</div>
</div>
</div>
</div>
If you have more than one span elements for this, then you can use each loop through it like below:
$('.ty-product-detail .product-left .stock-wrap span').each(function() {
if ($(this).hasClass('ty-qty-out-of-stock')) {
$(this).closest('.ty-product-block__option').hide();
}
});
Managed to work out the solution with the help of "Parixit" Answer it got me in the right direction, i cleaned up the HTML so others can see the Answer better.
$(document).ready(function() {
$('.ty-product-detail .product-left .stock-wrap span').each(function() {
if ($(this).hasClass('ty-qty-out-of-stock')) {
$('.ty-product-detail').find('.ty-product-options').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ty-product-block ty-product-detail">
<div class="product-left">
<div class="cm-picker-product-options ty-product-options" id="opt_487">
<div class="ty-control-group ty-product-options__item product-list-field clearfix" id="opt_487_365">
<label class="ty-control-group__label ty-product-options__item-label">Option:</label>
<ul id="option_487_365_group" class="ty-product-options__elem">
<li>
<label id="option_description_487_365_731" class="ty-product-options__box option-items cover-only">
<input type="radio" class="radio" name="product_data[487][product_options][365]" value="731" checked="checked" onclick="fn_change_options('487', '487', '365');">Cover only
</label>
</li>
</ul>
</div>
</div>
<div class="ty-product-block__field-group">
<div class="cm-reload-487 stock-wrap" id="product_amount_update_487">
<input type="hidden" name="appearance[show_product_amount]" value="1">
<div class="ty-control-group product-list-field">
<label class="ty-control-group__label">Availability:</label>
<span class="ty-qty-out-of-stock ty-control-group__item" id="out_of_stock_info_487">Out of stock</span>
</div>
<!--product_amount_update_487-->
</div>
</div>
</div>
</div>
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
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();
});
I'm having some problems with a PHP form which should email values entered by a user to a specific email address. I've got a very similar form on my website which uses the same JS and PHP and works fine. I have copied the JS/PHP/HTML but just can't get it singing and dancing. I don't get any error messages, so I'm not even sure where the process is falling over.
I have used and abused Stackoverflow many times, but I just can't get my head around this one.
Form:
<h2 class="module-title">Application Form</h2>
<div class="content"><p>*Denotes required fields.</p></div>
<form action="/wp-content/themes/default/php/form.apply.php" method="post" name="application" id="application">
<div class="module-field-list">
<ul>
<li class="field-375">
<div class="field">
<label for="apply-surname" class="field-label">Surname</label>
<input name="apply-surname" type="text" placeholder="">
</div>
</li>
<li class="field-375">
<div class="field">
<label for="apply-firstname" class="field-label">First Name</label>
<input name="apply-firstname" type="text" placeholder="">
</div>
</li>
<li class="field-375">
<div class="field">
<label for="apply-previousnames" class="field-label">Previous Names</label>
<input name="apply-previousnames" type="text" placeholder="">
</div>
</li>
<li class="field-375">
<div class="field">
<label for="apply-agesept1st" class="field-label">Age at 1st September</label>
<input name="apply-agesept1st" type="text" placeholder="">
</div>
</li>
<li class="field-375">
<div class="field">
<label for="apply-dob" class="field-label">Date of Birth</label>
<input name="apply-dob" type="text" placeholder="">
</div>
</li>
<li class="field-375">
<div class="field">
<label for="apply-address" class="field-label">Address</label>
<input name="apply-address" type="text" placeholder="">
</div>
</li>
<li class="field-375">
<div class="field">
<label for="apply-postcode" class="field-label">Postcode</label>
<input name="apply-postcode" type="text" placeholder="">
</div>
</li>
<li class="field-375">
<div class="field">
<label for="apply-hometel" class="field-label">Home Telephone</label>
<input name="apply-hometel" type="text" placeholder="">
</div>
</li>
<li class="field-375">
<div class="field">
<label for="apply-mobile" class="field-label">Mobile Telephone</label>
<input name="apply-mobile" type="text" placeholder="">
</div>
</li>
<li class="field-375">
<div class="field">
<label for="apply-email" class="field-label">Email Address</label>
<input name="apply-email" type="text" placeholder="">
</div>
</li>
<li class="field-375">
<div class="field">
<label for="apply-gender" class="field-label">Gender</label>
<input name="apply-gender" type="text" placeholder="">
</div>
</li>
<li class="field-375">
<div class="field">
<label for="apply-nationality" class="field-label">Nationality</label>
<input name="apply-nationality" type="text" placeholder="">
</div>
</li>
<li class="field-375">
<div class="field">
<label for="apply-outsideeea" class="field-label">Have you ever lived outside the EEA?</label>
<input name="apply-outsideeea" type="text" placeholder="">
</div>
</li>
<li class="field-375">
<div class="field">
<label for="apply-outsideeeadates" class="field-label">Dates lived outside the EEA</label>
<input name="apply-outsideeeadates" type="text" placeholder="">
</div>
</li>
<li class="field-750">
<div class="field">
<label for="apply-medical" class="field-label">XYZ is committed to supporting all of our students. If you have a disability, medical condition or learning difficulty (such as dyslexia, Asperger's, etc) please state</label>
<input name="apply-medical" type="text" placeholder="">
</div>
</li>
<li class="field-375">
<div class="field">
<label for="apply-sen" class="field-label">Do you have a SEN statement or S139a?</label>
<input name="apply-sen" type="text" placeholder="">
</div>
</li>
<li class="field-375">
<div class="field">
<label for="apply-ethnic" class="field-label">What is your Ethnic background?</label>
<input name="apply-ethnic" type="text" placeholder="">
</div>
</li>
<li class="field-375">
<div class="field">
<label for="apply-predictedgrades" class="field-label">What are your predicted grades?</label>
<input name="apply-predictedgrades" type="text" placeholder="">
</div>
</li>
<li class="field-375">
<div class="field">
<label for="apply-coursechoice" class="field-label">At this stage, are you fairly sure which course you wish to take at XYZ?</label>
<input name="apply-coursechoice" type="text" placeholder="">
</div>
</li>
<li class="field-750">
<div class="field">
<label for="apply-asa2" class="field-label">AS/A2 levels</label>
<input name="apply-asa2" type="text" placeholder="In order of preference, please list a minimum of four subjects you are considering taking">
</div>
</li>
<li class="field-750">
<div class="field">
<label for="apply-voc" class="field-label">Vocational</label>
<input name="apply-voc" type="text" placeholder="Please state the exact title as it appears in the prospectus, for example Travel and Tourism BTEC Level 1 Diploma">
</div>
</li>
<li class="field-375">
<div class="field">
<label for="apply-nocourse" class="field-label">If you have answered no, please list the courses below you may be considering</label>
<input name="apply-nocourse" type="text" placeholder="">
</div>
</li>
<li class="field-750">
<div class="field">
<label for="apply-career" class="field-label">Do you have any career ideas? If so, what are they?</label>
<input name="apply-career" type="text" placeholder="">
</div>
</li>
<li class="field-750">
<div class="field">
<label for="apply-other" class="field-label">Other relevant information that you feel may assist us with helping you make the right course decision</label>
<input name="apply-other" type="text" placeholder="i.e work experience, part-time employment, voluntary work">
</div>
</li>
</ul>
</div>
<div class="loader"></div>
<div class="module-messages">
<ul id="contact-messages">
</ul>
</div>
<div class="module-button"><a id="apply-submit">Apply</a></div>
</form>
</div>
PHP:
<?php
// Receiving variables
#$surname = htmlspecialchars($_POST['apply-surname']);
#$firstname = htmlspecialchars($_POST['apply-firstname']);
#$previousnames = htmlspecialchars($_POST['apply-previousnames']);
#$agesept1st = htmlspecialchars($_POST['apply-agesept1st']);
#$dob = htmlspecialchars($_POST['apply-dob']);
#$homeaddress = htmlspecialchars($_POST['apply-address']);
#$postcode = htmlspecialchars($_POST['apply-postcode']);
#$hometel = htmlspecialchars($_POST['apply-hometel']);
#$mobile = htmlspecialchars($_POST['apply-mobile']);
#$email = htmlspecialchars($_POST['apply-email']);
#$gender = htmlspecialchars($_POST['apply-gender']);
#$uln = htmlspecialchars($_POST['apply-uln']);
#$nationality = htmlspecialchars($_POST['apply-nationality']);
#$oustideeea = htmlspecialchars($_POST['apply-outsideeea']);
#$outsideeeadates = htmlspecialchars($_POST['apply-outsideeeadates']);
#$secondaryschools = htmlspecialchars($_POST['apply-secondaryschools']);
#$medical = htmlspecialchars($_POST['apply-medical']);
#$sen = htmlspecialchars($_POST['apply-sen']);
#$ethnic = htmlspecialchars($_POST['apply-ethnic']);
#$predictedgrades = htmlspecialchars($_POST['apply-predictedgrades']);
#$coursechoice = htmlspecialchars($_POST['apply-coursechoice']);
#$asa2 = htmlspecialchars($_POST['apply-asa2']);
#$voc = htmlspecialchars($_POST['apply-voc']);
#$nocourse = htmlspecialchars($_POST['apply-nocourse']);
#$career = htmlspecialchars($_POST['apply-career']);
#$other = htmlspecialchars($_POST['apply-other']);
//Sending Email to form owner
# Email to Owner
$pfw_header = "From: $email";
$pfw_subject = "Application Form";
$pfw_email_to = "XXX#example.com";
$pfw_message = "Surname: $surname\n"
. "First Name: $firstname\n"
. "Previous Name: $previousnames\n"
. "Age at 1st Sept: $age1stsept\n"
. "Date of Birth: $dob\n"
. "Home Address: $address\n"
. "Postcode: $postcode\n"
. "Home Telephone: $hometel\n"
. "Mobile no: $mobile\n"
. "Email address: $email\n"
. "Gender: $gender\n"
. "ULN: $uln\n"
. "Nationality: $nationality\n"
. "Lived outside EEA: $outsideeea\n"
. "Dates lived outside EEA: $outsideeeadates\n"
. "Secondary school: $secondaryschools\n"
. "Medical issues: $medical\n"
. "SEN: $SEN\n"
. "Ethnic: $ethnic\n"
. "Predicted Grades: $predictedgrades\n"
. "Course choice: $coursechoice\n"
. "AS/A2 choice: $asa2\n"
. "Vocational choice: $voc\n"
. "No course choice: $postcode\n"
. "Career: $career\n"
. "Other info: $other\n"
;
#mail($pfw_email_to, $pfw_subject ,$pfw_message ,$pfw_header ) ;
echo('<li class="message-success">Your Application form has been received</li>');
?>
JavaScript:
// Application form submit
$("#apply-submit").click(function () {
$('form[name=application]').submit();
$("#application").find('.loader').fadeIn();
});
$('form[name=application]').submit(function () {
wcFormAction = $("#application").attr('action');
$.post(wcFormAction, $('form[name=application]').serialize(), function (data) {
$("#application").find('.loader').fadeOut();
});
return false;
});
Edit: I didn't create the original code, i'm just experimenting with this code as a template for a form. I've not had to look at submitting forms before, sorry if my question is off the mark slightly, if I can provide any more information please ask!
PHP code seems alright even with those unneccessary #'s.
And Javascript code you are using should work just fine, tried and worked on jsfiddle.
You must address what causing the problem, to do this, write down every step and tool you are using and check them, even the most basic ones. Like;
Are you sure,
you are including jQuery properly?
your ajax request is handled properly? (check if you are getting any responses)
and so on...