I am currently trying to work out an experiment of mine with using this site:
http://store.nike.com/us/en_us/pd/lunarglide-5-running-shoe/pid-726047/pgid-726952
What I am trying to accomplish is that, a default shoe size will be entered by user on the chrome extension end and once they hit this page, it will auto click the right size and click add to cart.
I have accomplished all this except it wont submit, it tells me to add a shoe size.
The Gif:
$(document).ready(function(){
checkForData();
$('.add-to-cart').trigger('click');
});
function checkForData()
{
$('ul.footwear li').removeClass("selectBox-selected");
chrome.storage.local.get('value', function (results) {
$('ul.footwear').find('a').filter(function(idx, el){
return $.trim($(this).text()) == $.trim(results.value);
}).closest('li').addClass('selectBox-selected');
$("a.footwear span.selectBox-label").text("("+$.trim(results.value)+")");
});
}
if you look at ..}).closest('li').addClass('selectBox-selected'); I have tried using a trigger event as if it was clicked but nothing happens so I just gave it the class that it would have if someone clicked it.
David
There's a select input in there as well..
<select name="skuAndSize" class="size-dropdown mediumSelect footwear selectBox" style="display: none;">
<option value=""></option>
<option class="size-not-in-stock" name="skuId" value="3096786:6">6</option>
<option class="size-not-in-stock" name="skuId" value="3096787:6.5">6.5</option>
<option name="skuId" value="3096788:7"> 7</option>
<option name="skuId" value="3096789:7.5" selected="true"> 7.5</option>
..........
..........
</select>
My guess is you need to be selecting an option here before you try to submit. After all it's the variable here that will get posted in the form. What you appear to be doing is just changing the DOM UI.
Adding this might work:
$("select[name='skuAndSize']").val("3096789:7.5");
Related
Say I have the code below and would like to fill a dropdown dynamically like in this with description (the first example calls "Pulls from text files") NOT JSON or MySQL. When I choose for example "beverages" I want to wait to say 2 sec. and see the loading div container. I write, that I want to see this loading div for 2 sec. because I the practice small text files are loading very quickly, so the client doesn't see the loading div, just a flash that takes 1/3 sec. The loading container can be shown longer, for example when the connection is bad, like Wi-Fi on a restaurant. So I have the code below, but I don't know why it doesn't work and how can I declare the rule with the 2 sec.
HTML
<body>
<h1>Pulls from text files</h1>
<select id="text-one">
<option selected value="base">Please Select</option>
<option value="beverages">Beverages</option>
<option value="snacks">Snacks</option>
</select>
<br />
<select id="text-two">
<option>Please choose from above</option>
</select>
</body>
JQuery
$(document).ready(function() {
$("#text-one").change(function() {
$("#text-two").load("textdata/" + $(this).val() + ".txt");
});
ajax
$(document).ready(function() {
$('<div id="loading">Loading...</div>')
.insertBefore('#text-two')
.ajaxStart(function() {
$(this).show();
}).ajaxStop(function() {
$(this).hide();
});
});
CSS
#loading {display:none;}
So when I Select from the select option "beverages" I want to see the loading div container for 2 sec. or longer, when the connection is bad or when the connection is interrupting (bad Wi-Fi). How can I improve my code above and why it didn't work. Please give me an answer, thanks.
Below is my code for a dropdown form that when the user clicks on a selection it should redirect to another local in folder document.
vvv this function is in my script and I have 3 other functions in my script that work properly except this one.
function loadInfo(myForm) {
var menuSelect=myForm.Menu.SelectedIndex
var menuURL=myForm.Menu.options[menuSelect].value+".html"
window.location=menuURL
}
vvv This form is in my body and it shows the drop down but there is no redirecting to the local document when a selection is made.
<form id="menu">
<p style="font-weight:bolder">
If your pencil was a Super Hero who would they be?
<select name="Menu" onchange="loadInfo(this.form)">
<option>Select an item</option>
<option value="batman">Batman</option>
<option value="superman">Superman</option>
<option value="hulk">Hulk</option>
<option value="wonder">Wonder Woman</option>
</select>
</p></form>
I am doing a mock website for school that requires this form function and there is only one decent example in my book but even that will not output the desired task I want to accomplish(also this code was taken from that example in the book. I have tried to put in some of my code with no results)
try
.selectedIndex
instead of
.SelectedIndex
First of all, thanks for reading the topic.
Now, I'm making a website using HTML5 and I need to load a text file according to the user choice in a combobox. I mean, the user selects an option from the combobox and the text from it should shown on a specific cell of a table. The number of times that the user wants without refreshing the site.
The problem is that the code is not working. The code:
The HTML for the combo box:
<select id = "comboSelect">
<option value="text1.txt">text1</option>
<option value="text2.txt">text2</option>
<option value="text3.txt">text3</option>
<option value="text4.txt">text4</option>
<option value="text5.txt">text5</option>
</select>
The HTML for the table cell:
<td colspan="5" class="text" id = "cuadroTexto"></td>
The JavaScript that does the rest of the work:
$(document).ready(function(){
document.getElementById("comboSelect").addEventListener('change',function () {
$(document.getElementById("cuadroTexto")).load(value);
alert("Cargado");
},false);
});
Edit 1:
I think that the JavaScript is not recognizing the change event from the combobox.
I'm yet not working with a server.
Check this is working
CODE
$(document).ready(function(){
$("#comboSelect").change(function () {
$("#cuadroTexto").load(this.value);
alert($(this).val())
});
});
Fiddle http://jsfiddle.net/krunalp1993/Qr6GK/
I am creating a way-finding app using HTML5, jQuery and Javascript. There are 3 total html pages and each page has a different legend. In this app I have buttons that call a jQuery click function to display stars on the map above the location you have selected. Each button has an id and the buttons work how I want them to work. The problem is that I want to add a drop down list that will provide the same functionality as the buttons on the legend. So basically what I want to be able to do is select a section from the drop down list and then jump to the page that has that section and have the stars already displayed for the selected section. IE: If I select Restrooms, I want to be able to jump the ground floor and have stars displayed over the restrooms. Is this possible to do? I tried using a Javascript function to make the URL navigate to the value of the select list option I wanted but that didn't make the stars show up. I am fairly new to Javascript and jQuery so please help. Thanks! Here is my code:
HTML:
<form method="get" name="form1" action="">
<select name="locations" onchange="gotoSection(this.form)">
<option selected>Please pick a Section</option>
<option disabled>---Ground Floor---</option>
<option value="grdFloor.html#mc" >Mayor's Commision on Literacy</option>
<option value="grdFloor.html#ch">Children's</option>
<option value="grdFloor.html#sr">Story Book Room</option>
<option value="grdFloor.html#eo">Extensions Office</option>
<option value="grdFloor.html#ma">Montgomery Auditorium</option>
<option value="grdFloor.html#restRm">Restrooms</option>
</select>
</form>
<div id="restRm" class="legend">
<a href="#restRm" ><img src="floorMaps/restBTN.png"/></a>
</div>
jQuery:
$(document).ready(function(){
$('.legend, .arrows').show('slow');
$('.stars').hide();
$('#restRm').click(function(){
$('.stars:not(#restStar1, #restStar2)').fadeOut('slow');
$('#restStar1, #restStar2').toggle('pulsate');
}); //end restroom
Javascript:
function gotoSection(form) {
var newIndex = form.locations.selectedIndex;
if ( newIndex == 0 ) {
alert( "Please select a Section!" );
} else {
cururl = form.locations.options[ newIndex ].value;
window.location.assign( 'http://libwww3.freelibrary.org/maps/central/' + cururl );
}
}
Try this:
<select name="locations" onchange="gotoSection(this.value)">
function gotoSection(cururl) {
window.location.assign( 'http://libwww3.freelibrary.org/maps/central/' + cururl );
}
EDIT:
Maybe i should read the entire question before i answer, i thought the problem was that your navigation didn't work, i apologize.
But as to the question about the stars, if i understand your question and example code correctly, you're navigating within the same page, just with diferent #hash tags. And if thats the case, your document.ready won't run.
Instead you can make a function that triggers the stars and call that from your gotoSection method, after you've assigned the new url.
I have 2 tables "iu" and "si" and I put a dropdown list for users to select which one they want to see. Once the option is selected, the corresponding table will appear.
Another one is supposed to be hidden but when the page is loaded, default table "si" is shown.
Here is my JavaScript code:
<script>
$(document).ready(function()
{
$('#iu_table').hide();
});
$('#iu').onchange=function()
{
$('#si_table').hide();
$('#iu_table').toggle();
}
</script>
And HTML code:
<select>
<option id="si" selected>SI</option>
<option id="iu">IU</option>
</select>
The table ID is "si_table" and "ui_table" respectively.
I used the code above but it doesn't work. No matter which one I select, only the "si" table is shown.
I hope that someone could help.
You should probably work with the Tutorials of jQuery and familarize yourself with the workings of the libraries.
There are multiple errors in your code:
There is no field onchange. What you want is the change function of jQuery, which is described here: http://api.jquery.com/change/
The code for the change function belongs into the $(document).ready function, so jquery executes it, when the document is loaded. The code has to be executed there, so that the function is called when the select is changed.
You want to work with the change of the select not with the change of the option.
In the body of your change function you hide the one table and toggle other: toggle both, so the first can be shown too, when the option is selected. Also this construct only works for exactly 2 options. If you want more options, you have to work something out like in the answer of Paritosh.
Here is a working sample:
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
$(document).ready(function()
{
$('#iu_table').hide();
$('#selector').change(function()
{
$('#si_table').toggle();
$('#iu_table').toggle();
});
});
</script>
</head>
<body>
<div id="si_table">si</div>
<div id="iu_table">iu</div>
<select id="selector">
<option id="si" selected="selected">SI</option>
<option id="iu">IU</option>
</select>
</body>
There are many ways of achieving this. One is below - I have added id attribute to dropdown control
<select id="myselection">
<option id="si" selected>SI</option>
<option id="iu">IU</option>
</select>
<script>
$('#myselection').bind('change', function(){
if($('#myselection option:selected').attr('id') == "si"){
$('#si_table').show();
$('#iu_table').hide();
}
else if($('#myselection option:selected').attr('id') == "iu"){
$('#si_table').hide();
$('#iu_table').show();
}
});
</script>
There is a method in jQuery which does hide/show matched elements called toggle()
As you need to hide the IU table at first, you may need some css trick for that. So put display:none; for the IU table and do toggle on changing the dropdown values. Working fiddle is here