I'm using twitter bootstrap and can't find any date pickers that work with my needs or html.
I've got a form and within that some select tags. I want to know how you can insert a date picker for twitter bootstrap that will then send the relevant picked dates by the user once they have submitted the request. This is my html so far:
<div class="row">
<div class="span11">
<form id ="eventForm">
<select name="event" id="abc">
<option value="w" selected="selected">US</option>
<option value="e">uk</option>
<option value="r">prk</option>
<option value="t">chn</option>
</select>
<select name="period" id="time">
<option value="beginning" selected="selected">from start</option>
<option value="the last 24 hours">Last 24 hours</option>
<option value="the previous week">Previous week</option>
</select>
<input type="submit" id="open" onclick="heading()" value="Start" />
<input type="button" onclick="closeMap()" value="Stop Request"/>
</form>
</div>
<div class="span1">
<form name="moreAnalysis" id="moreAnalysis" action="/p" method="post">
<input type="submit" value="Further Analysis">
</form>
</div>
</div>
So ideally where I'm letting user choose periods I would want them to choose from a date menu.
I've tried several options and none seem to work and this has taken be all day as a html/ javascript novice.
Thanks
I would recommend this one by Stafan Petre
http://www.eyecon.ro/bootstrap-datepicker/
Related
I want Tampermonkey to be able to get the value of a drop down, additionally the value I'm after is part of the URL as an option.
Example url:
https://JimsPizza.com/NYC3/#/afe/rainbow?partition=PPPickToRebin3
HTML:
<div class="pull-right">
<small translate="afe_components_selector_process_path" class="ng-scope">Process Path:</small>
<select class="form-control input-sm ng-pristine ng-valid" ng-model="selectedChutePartitionName" ng-options="partitionName for partitionName in chutePartitionNames" ng-disabled="shouldDisablePartitionSelector()" ng-change="updateSelection({selection: chutePartitionMetadata[selectedChutePartitionName]})" style="">
<option value="0" selected="selected" label="PPAFE1">PPAFE1</option>
<option value="1" label="PPPickToRebin2">PPPickToRebin2</option>
<option value="2" selected="selected" label="PPPickToRebin3">PPPickToRebin3</option>
<option value="3" label="PPPickToRebin4">PPPickToRebin4</option>
</select>
</div>
Note: I am new to using Tampermonkey and JS in general, any answer is greatly appreciated. I have tried searching for examples but was unable to find anything
I am new to Angular JS. I want to show/hide div based on select option but without using controller or model.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<select class="">
<option class="add_btn_with_file">Add button with file</option>
<option class="add_btn_with_link">Add button with link</option>
<option class="add_btn_with_text">Add button with text </option>
</select>
<div class="">
<input type="file" id="browse" name="fileupload" class="file_display_none" />
</div>
<div class="">
<input type="text" placeholder="button with link" ></div>
what i want is .
when i select button with file then file div should be open and others should be closed and when i select button with link then textbox should open.
I can do using controller and model, but I want to do it without using them.
so is there any way so that I can do that?
Thank You.
As per your comments I find you don't want to use Controller or model to do your task. I wonder why use angular then!!
Anyways, you must understand that model and Controller are correlated. Go through this, it will clarify a lot of things for you.
However, if you don't want to write the logic in controller, you can go ahead with a combination of ng-model and ng-switch as follows,
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<select class="" ng-model="fileSelect">
<option class="add_btn_with_file" value="file">Add button with file</option>
<option class="add_btn_with_link" value="link">Add button with link</option>
<option class="add_btn_with_text" value="text">Add button with text </option>
</select>
<div ng-switch="fileSelect">
<div class="" ng-switch-when="file">
<input type="file" id="browse" name="fileupload" class="file_display_none" />
</div>
<div class="" ng-switch-when="text">
<input type="text" placeholder="button with link" ></div>
<div class="" ng-switch-default>
<input type="file" id="browse" name="fileupload" class="file_display_none" />
</div>
</div>
Yeah, sure, it's a trivial piece of jQuery. Demonstrated here
https://codepen.io/anon/pen/zojPKa, but the basis is just a change() and a switch.
$("select.foo").change(function(){
var selected = $("select.foo").val();
switch(selected){
case "Add button with file":
$("#fileInput").show();
$("#textInput").hide();
break;
case "Add button with text":
$("#fileInput").hide();
$("#textInput").show();
break;
default:
$("#fileInput, #textInput").hide();
break;
}
});
I am new to coding and I am currently working on an assignment. I basically need to build a very basic webpage in which I can ask questions to users and then suggest a vacation destination using their answers.
I used a select dropdown box with options for the user. I am now on the js part and I cannot figure out how to get their input.
this is my code for one of the boxes:
<div class="container">
<h1>Let's find your ideal vacation getaway!</h1>
<div id="userinput">
<form>
<div class="form-group">
<label for="question1">1.What is your favorite cuisine?</label>
<select class="form-control">
<option></option>
<option>Mexican</option>
<option>Italian</option>
<option>Indian</option>
<option>Caribbean</option>
</select>
My question is, what function do I utilize to get their answers, thus allowing me to use branching to generate results. I am sorry if this is confusing, like I said, I am very new to this.
Thanks in advance!
You have to make some changes in both HTML and JS part. In HTML add value attribute and assign a value to each of the options. Also add an onchange event handler which will be fired on change of options from drop-down.
Assign an id to the select element. Use selectedIndex to get index of selected item
HTML
<select class="form-control" onChange="getSelected()" id="selDesc">
<option value="0"> Select a destination</option>
<option value="1">Mexican</option>
<option value="2">Italian</option>
<option value="3">Indian</option>
<option value="4">Caribbean</option>
</select>
JS
function getSelected(){
var getValue =document.getElementById("selDesc").selectedIndex;
alert(getValue);
}
JSFIDDLE
Make changes in Html Code means give the id on select tag
<div class="container">
<h1>Let's find your ideal vacation getaway!</h1>
<div id="userinput">
<form>
<div class="form-group">
<label for="question1">1.What is your favorite cuisine?</label>
<select class="form-control" id="country">
<option value="0" selected> --Select--</option>
<option value="1">Mexican</option>
<option value="2">Italian</option>
<option value="3">Indian</option>
<option value="4">Caribbean</option>
</select>
</div>
</form>
</div>
</div>
JS use Jquery
$("#country").change(function (e) {
alert($(this).val());
})
I am struggling to create a button for my website uses paypal subscriptions to manage users on the site. There are several different subscription options and I want to include them in a dropdown box instead of having seperate buttons for each option. However so far I can't figure it out. Currently the site is working using basically a default paypal button that uses a little javascript to make sure people accept the terms and conditions here is the current working code:
<form action="https://www.paypal.com/cgi-bin/webscr" onsubmit="return confSubmit();" method="post">
<p><span style="font-size: 12pt;"><input name="cmd" value="_s-xclick" type="hidden" />
<input name="hosted_button_id" value="HBP3ZG2KGRHC" type="hidden" /></span>
</p>
<p style="text-align: center;"><span style="font-size: 12pt;"><input src="https://www.paypalobjects.com/en_US/i/btn/btn_subscribeCC_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!" border="0" type="image" />
<img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" border="0" height="1" width="1" /></span>
</p>
</form>
with the function confsubmit() being used to make user accept the terms and conditions:
function confSubmit() {
if (!document.getElementById("one").checked) {
alert("Please read and accept the terms and conditions in order to sign up.");
return false;
}}
Now I want to add to this a select statment along the lines of:
<select name="sub_types">
<option value="A1">1 Month </option>
<option value="A2">3 Months </option>
<option value="A3">6 Months </option>
<option value="A4">1 Year </option>
</select>
Now it is my understanding that the important part of the code is the button id value "HBP3ZG2KGRHC" from above which is used by paypal to select the proper subscription type. I can add this select statement into the form no problem but I can't figure out how to pass the selected option's value through the button to paypal so that it selects the proper subscription type. I hope that makes sense. Thanks for the help.
If I understand correctly, you want to vary the hosted_button_id value that is posted to PayPal. I haven't tried this, but it sounds like this might work:
Replace the
<input name="hosted_button_id" value="HBP3ZG2KGRHC" type="hidden" />
with
<select name="hosted_button_id">
<option value="HBP3ZG2KGRHC">1 Month</option>
<option value="[different button id for 3 months]">3 Months</option>
<option value="[different button id for 6 months]">6 Months</option>
<option value="[different button id for 1 year]">1 Year</option>
</select>
assuming you have several hosted_button_ids set up for the various subscription types.
I feel really silly for having to ask this head desk but I've got no idea why this code isn't working it really simple sigh
I'm getting the following JavaScript error when I select from either of the drop downs and the form doesn't submit.
Uncaught TypeError: Property 'submit' of object # is not a function
<form action="categories/view/52" method="post" accept-charset="utf-8" id="myform" name="myform">
<select name="sort" ID="sort_type" onchange='document.forms["myform"].submit();'>
<option value="label">Sort</option>
<option value="price-low-high">Price: Low - High</option>
<option value="price-high-low" selected="selected">Price: High - Low</option>
<option value="name-a-z">Name A - Z</option>
<option value="name-z-a">Name Z - A</option>
<option value="date-added-new">Date Added - New</option>
<option value="date-added-old">Date Added - Old</option>
</select>
<select name="limit" ID="sort_type" onchange='document.forms["myform"].submit();'>
<option value="items_3" selected="selected">3</option>
<option value="items_50">50</option>
<option value="items_100">100</option>
<option value="items_all">all</option>
</select>
<input type="submit" name="submit" value="submit" />
</form>
Since you have:
<input type="submit" name="submit" value="submit" />
The submit function has been clobbered with that HTMLElementNode.
The simple solution is to rename it, or remove the name.
<input type="submit" value="submit" />
If you can't rename it (because you have server side code that depends on that value being submitted and you can't change the server side code) then you can:
document.createElement('form').submit.call(document.forms["myform"]);
The reason for the error when trying to call form.submit() is that your submit button is called "submit". This means that the "submit" property of your Form object is now a reference to the submit button, overriding the "submit" method of the form's prototype.
Renaming the submit button would allow you to call the submit() method without error.
<input type="submit" name="submitEle" value="submit" />
Should work