Passing Values for Noobs - javascript

Ok I am a complete noob to html and programming. I am working on a project that will allow users to select different items on a screen. Once these are selected I have an "add to cart" button. When this is clicked I want all of the data passed to a seperate page so the use can see their selection and confirm before it is submitted. Here is the code I have so far and have done much research and can not figure out if html can pass this to another page using html code or javascript. Any help will be greatly appreciated. Thank you.
<input type="submit" value="Add to Cart" /></a></p>
<form action="demo_form.asp">
<p>
<input name="chaism" type="checkbox" value="3.50" /><strong>Small Chai Latte $3.50<br />
<input name="chaimed" type="checkbox" value="4.0" />Regular Chai Latte $4.00<br />
<input name="chailrg" type="checkbox" value="4.50" />Large Chai Latte $4.50</strong></p>
<p>
<select name="Favorite_Color" size="1"> <option selected="selected">Iced </option><option>Cold </option><option>Hot </option></select></p>
<p>
<input name="chai" type="checkbox" value="3.50" /><strong>Whipped Cream<br />
<input name="chai" type="checkbox" value="4.0" />Cinnamon<br />
<input name="chai" type="checkbox" value="4.50" />Soy Milk </strong> <strong>Quantity</strong>: <input max="100" min="1" name="quantity" size="7" style="width: 67px; height: 27px;" type="number" /></p>

You need to learn about server side programming, according to your form it looks like you are using asp.net. Here are a few places to start learning asp.net
http://www.w3schools.com/asp/
http://www.asp.net/mvc/tutorials
Good luck!

The method I would recommend is to have all your checkboxes have the same name, and have their value represent something unique about the product.
<input type="checkbox" name="product" value="1"> Chai tea<br />
<input type="checkbox" name="product" value="2"> Lemon tea<br />
If you select both products, product=1,2 will be passed in the POST data. It's then up to you to loop through the selected products, and output each one. (That process depends wholly on your server-side code).

Generally you need some sort of server that handles the parameters you pass, in your case chai or chaism. It seems you're working with ASP. I would start looking there on how to capture GET parameters and print them out onto a page.
If you want a pure Javascipt/JQuery of handing these parameters, here is a related question I found which lets you get the parameters by name, which then you can fill in values later.

This may be a little intense if you're just starting out, but Smashing Mag has a good article about creating a shopping cart using session storage. http://coding.smashingmagazine.com/2014/02/13/create-client-side-shopping-cart/
You could make use of HTML5 local storage here, it's really simple. And the page explains it really well: http://diveintohtml5.info/storage.html
Basically you can create variables on one page, and then get them on any other page using:
localStorage.setItem('bar',foo);
and
localStorage.getItem('bar'); // returns foo
Hope this helps.

Related

How to Replace All __prefix__ Placeholder Strings within Django Formsets empty_form Elements Using Only Javascript?

Django formsets have an empty_form attribute.
empty_form
BaseFormSet provides an additional attribute empty_form
which returns a form instance with a prefix of __prefix__ for easier
use in dynamic forms with JavaScript.
The Django documentation doesn't actually say how to replace the __prefix__ with Javascript. Several online examples show how to do it with jQuery, but I specifically want to do it with Javascript - no jQuery.
Here is the resulting HTML from my {{ formset.empty_form }}:
<div id="prerequisiteEmptyForm">
<input type="text" name="prerequisites-__prefix__-text" maxlength="100" id="id-prerequisites-__prefix__-text">
<label for="id-prerequisites-__prefix__-DELETE">Delete:</label>
<input type="checkbox" name="prerequisites-__prefix__-DELETE" id="id-prerequisites-__prefix__-DELETE">
<input type="hidden" name="prerequisites-__prefix__-id" id="id-prerequisites-__prefix__-id">
<input type="hidden" name="prerequisites-__prefix__-content" value="21" id="id-prerequisites-__prefix__-content">
</div>
Everywhere it shows __prefix__, I want to replace it with a number... let's say 321.
Correct solution:
<div id="prerequisiteEmptyForm">
<input type="text" name="prerequisites-321-text" maxlength="100" id="id-prerequisites-321-text">
<label for="id-prerequisites-321-DELETE">Delete:</label>
<input type="checkbox" name="prerequisites-321-DELETE" id="id-prerequisites-321-DELETE">
<input type="hidden" name="prerequisites-321-id" id="id-prerequisites-321-id">
<input type="hidden" name="prerequisites-321-content" value="21" id="id-prerequisites-321-content">
</div>
So my question becomes
Using Javascript only, how do I replace a constant value ("__prefix__") with something else ("321") across several elements (inputs and labels) within multiple attributes (name, id)? Specifically, I want to do it cleanly for repeatability. I don't want a highly custom solution to this specific problem. It needs to be a general approach... since this is replacing a constant, surely Javascript has a clean way to do this? I'm still learning Javascript and trying to not be so dependent on jQuery.
I used this concept:
const emptyForm = document.querySelector('#prerequisiteEmptyForm');
clone = emptyForm.cloneNode(deep=true);
clone.innerHTML = clone.innerHTML.replace(/__prefix__/g, '321');

AngularJS 1. Trying to implement a checkbox beside field-names being written in

The code you see below works 100% but the problem is I am trying to implement a checkbox list into the single-page application. I am new to angular
<select size="10" class="form-control" name="brandSelector"
multiple="multiple" ng-model="brandGroup.brand_ids" ng-options="b._id as ''
+ b.name+' - '+b.division_name for b in brands">.
I tried finding a solution on the internet and found this block of code but that is just writing in the name, the other piece of code above pulls data in from somewhere. How do I implement a checkbox without hassle? Thank you
<div>
<input type="checkbox" name="brandSelector" value="">
<label> Ted Baker Kids - Hudson</label></div>

Auto-select Radio Button with Text Field?

Did lots of searching on here and found plenty of people with similar questions, but every 'solution' I have found fails to work in my case. I could be missing something simple, or it may have to do with our HTML. Basically, I want our text field to check it's corresponding radio button should someone enter a value there.
Here is a JSFiddle with what I want working, but when I put host it on a server for testing I don't get the same result.
JSFiddle
http://jsfiddle.net/p8kvQ/39/
HTML
<div>
<input type="radio" name="UnitPrice1" id="UnitPrice1" value="47" checked="checked" />
<label for="UnitPrice1">$47</label>
</div>
<div>
<input type="radio" name="UnitPrice1" id="UnitPrice2" value="Other" />
<label for="UnitPrice2">Other</label>
<input class="-input-width-auto" name="Other1" type="number" id="Other1" />
</div>
JS
$('#Other1').click(function(){
$('#UnitPrice2').trigger('click');
});
I DO have "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" defined in our HTML header and I've tried adding the code by defining its source file, but still no luck.
Any help would be great.
Your JS needs to be inside a document.ready. When the code is run, the dom element is not available, there for your click listener can not be attached it it.
$( document ).ready(function() {
$('#Other1').click(function(){
$('#UnitPrice2').trigger('click');
});
});
(JSFiddle does this for you because you have the following setting: http://screencast.com/t/5WUC33diHpTb)

Using a Form to Dynamically Change the URL in the Address Bar Part 2

Okay, so I asked a variant of this question before, but I think the thread has died at this point, and I have a followup question:
Using a Form to Dynamically Change the URL in the Address Bar
So, I was looking to find a way to use a form to quickly add a product to a Volusion cart by entering it's product code. Turns out, if you're on the cart page, the solution is this snippet:
<form action="ShoppingCart.asp" name="form" method="get">
<input type="text" value="" name="ProductCode">
<input type="submit" value="Add To Cart">
</form>
Well, this doesn't work at all on other pages...knowing very little about how GET forms work, I'd love to better understand why this is, and what I can do to make this work on, say, the homepage.
The site (currently) is: http://ezndb.cwjea.servertrust.com/
As you can see, I have the red area sporting the code that I used on the check out page, but it doesn't work...any suggestions? I know other threads have suggested javascript/jquery or php methods of getting this to happen...
any form with the method ="get" will append data to the url in name value pairs ( the name being the input name
<form action="#" name="form" method="get">
<input name="q" />
<input name="q2" />
<input type="submit" value ="click and look at the address bar, Probably won't work on stack though" />
</form>
It doesn't work because your store is a members only site so the customers cannot add items to the cart until they are confirmed members.

Input value not passing to URL

I have a total of two input values. Only one value passes to the url of the next page, but both should. What's causing this?
JSFiddle: http://jsfiddle.net/p8dCC/
HTML:
<!--form action="device" onSubmit=" get_search(); return false;" id="search-form-4" method="get" target="_top"-->
<div class="fix">Brand</div>
<input class="inputs" type="text" id="search_id" name="q3" placeholder="Send this" required="required" />
<br/><br/>
<div class="fix">Model</div>
<input class="inputs" type="text" id="search_id" name="q4" placeholder="And send this one too" required="required" />
<br/><br/>
<input id="search-button" class="" type="submit" value="continue" data-target="http://www.google.com/?item-description" />
<!--/form-->
You have two elements with the same id in html. So when you do this $('#search_id').val() only one of them will get evaluated and not both. Ids are supposed to be unique
After testing your code in a test page, I found that both inputs were in fact being passed through the URL.
You have commented out the form tags which I'm not sure if you did just for purposes on here.
kjs is correct as well, though using the same id would only effect the HTML. Using get as the method would bypass this issue as it would be passed the unique "name" attribute.
A form tag is required if you expect the html submission mechanism to work correctly on its own.
In the Javascript you posted though, you are treating document.location as an html element, wrapping it with jquery, then trying to use jquery's attr method on it. This won't work. Just access "location.href" directly without using jquery.
Additionally, as pointed out by another answer, your ids should all be unique.

Categories

Resources