First time poster, long time forager. I have a system I am developing, cleaning up the process I would like to use pikaday.js to help users select the date insted of typing it in by hand.
The process:
From a dropdown (HTML) element, call to handleSelection(choice). handleSelection then looks at the option selected and either creates an input or a second select element with options. For two of the options I would like to create an input and add an onclick to kick pikadate...All I am getting is a input field with no call to the function on click, I can type in the date in the correct format and get a result so the post portion is working.
See code as follows:
JavaScript protion:
<script src='moment.js></script> <----used for date format only
<script src='pikaday.js></script>
<script>
function handleSelection(choice)
{
if(choice=='ordnum' || choice=='po' || choice=='serial' || choice=='asset') <----Works as intended
{
var a=document.getElementById('input');
var input=document.createElement('input');
input.type='text';
input.name='value';
a.appendChild(input);
}
if(choice=='varified')<----Works as intended
{
var a=document.getElementById('valid');
var valid=document.createElement('select');
valid.name='value';
valid.innerHTML="<option value='y'>Validated</option><option value='n'>Not Validated</option>";
a.appendChild(valid);
}
if(choice=='loc')<----Works as intended
{
var a=document.getElementById('valid');
var valid=document.createElement('select');
valid.name='value';
valid.innerHTML="<option value='loc0'>loc0</option><option value='loc1'>loc1</option><option value='loc2'>loc2</options><option value='loc3'>loc3</option><option value='loc4'>loc4</option><option value=';loc5'>loc5</option>";
a.appendChild(valid);
}
if(choice=='drcv' || choice=='disrv') <---Isn't working as intended!
{
var a=document.getElementById('input');
var input=document.createElement('input');
input.type='text';
input.name='value';
input.id='pkr';
input.onclick='getDate()'; <----Tried with quotes and with out, will not call out to getDate()
a.appendChild(input);
}
}
<script>
function getDate()
{
var picker = new Pikaday({field:docuemnt.getElementById('pkr'),format:'YYYYMMDD'});
</script>
}
}
</script>
HTML portion:
<body>
<form class='container' name='report' action='somepage' method='post'>
<select id='select' onChange='handleSelection(value)' name='opt'>
<option value="ordnum">Order Number</option>
<option value="po">Po Number</option>
<option value="drecv">Date Received</option>
<option value="disrv">Date In Service</option>
<option value='serial'>Serial Number</option>
<option value='asset'>Asset Tag</option>
<option value='loc'>Location</option>
<option value='varified'>Verified</option>
<option value='*' selected>All Systems</option>
</select>
<input type="submit" name="submit" value="Fetch..">
</p>
<p id='input'>
</p>
<p id='valid'>
</p>
</form>
</body>
</div>
</html>
Replace
input.onclick='getDate()';
with
input.addEventListener('click', getDate, false);
you could also use input.onclick = getDate;, but addEventListener is the preferred way of adding event listeners.
And make sure the getDate function is in scope, that means that it's either inside the same script tag as the event listener, or a script tag above the one containing the event listener.
Hoisting doesn't help across script tags.
So playing around a bit, seems style was the issue. I had a div style set in my original CSS and it seems that the div in the pikaday.css was going off of that position causing the stretched effect. I adjusted the percentage of the div in pickaday.css to 55% and now have the full effect that was wanted.
Related
I am trying to figure out a way to display a text after a button is being pressed.
Favourably it should work with a dropdown button with multiple options and a different text for each option selected. Multiple texts would be nice but right now i just want to get it to work with only one text, so that when i select option 1 it displays text 1 and if option 2 is selected it should display text 2.
Now i want to get this to work with xslt but i first want to have it working in either html or svg.
Code:
<!DOCTYPE html>
<html>
<body>
<label for="Fehler">Wählen sie die zutreffende Fehlermeldung aus:</label>
<select name="Fehler" id="Fehler">
<option value="Falscher_Bauteil">Falscher Bauteil</option>
<option value="Falsch_dimensioniert">Falsch Dimensioniert</option>
<option value="Falsch_angeschlossen">Falsch angeschlossen</option>
<option value="Falsch">Falsch</option>
</select>
<br><br>
<p v-if="value == 'Falscher_Bauteil'">Falscher Bauteil verwendet!</p>
<p v-if="value == 'Falsch_dimensioniert'">Der Bauteil ist falsch dimensioniert!</p>
<p v-if="value == 'Falsch_angeschlossen'">Der Bauteil ist falsch angeschlossen!</p>
</body>
</html>
I am using Visual Studio Code and this was the code where i thought it would work.
My idea why it is not working would be because i need to declare a new variable for each different option but as far as i know to declare a variable you need the script tag and then it all needs to be inside of the script tag but then the dropdown button wont work.
Another thought of mine is that the is not the right one for this purpose. But i dont really know any other way to display text other than the but i want it to be a static text.
As you probably have guessed by now i am relatiely new to this so i would appreciate any help.
How to Display .innerHTML text after changing a "dropdown" select element?
<!DOCTYPE html>
<html>
<script>
function HideText(){
var Info = document.getElementById("Info");
Info.style.visibility="hidden";
}
function ShowText(select){
if (select.value=="Visible"){ Info.style.visibility="visible"; }
else { Info.style.visibility="hidden"; }
}
</script>
<body onload="HideText()">
<select onchange="ShowText( this );">
<option>Hidden</option>
<option>Visible</option>
</select>
<div id="Info">
More Information regarding JavaScript
</div>
</body>
</html>
Here you go, if you need to select multiple text then you will need checkboxes not select inputs.
Also if you need user selection to be shown on load, then remove first option which I added and call handleSelect on load by passing the current selected value.
const selectTextDom = document.querySelector('.select-text');
const textSingleDom = id => document.querySelector(`*[data-text-id="${id}"]`);
const textAllDom = document.querySelectorAll('.text-js');
const hideAllText = () => {
textAllDom.forEach(item => item.classList.remove('text--show'));
}
const showSingleText = textId => textSingleDom(textId).classList.add("text--show");
const handleSelect = (e) => {
const textId = e.target.value;
hideAllText();
showSingleText(textId);
}
selectTextDom.addEventListener('change', handleSelect)
.text {
display: none;
}
.text--show {
display: block;
}
<select class="select-text">
<option selected disabled>select text</option>
<option value="text-one">text one</option>
<option value="text-two">text two</option>
<option value="text-three">text three</option>
</select>
<p data-text-id="text-one" class="text text-js">text one text one text one text one text one text one text one</p>
<p data-text-id="text-two" class="text text-js">text two text two text two text two text two text two text two</p>
<p data-text-id="text-three" class="text text-js">text three text three text three text three text three text three</p>
I have a web form where i disable a dropdown on page load in C#.
The drop down is to be disabled at all times, only when users make a certain selection is when I would like to change the value in my drop down. Either Yes or No.
This is my Javascript code:
var drpModeNeed = document.getElementById("drpAssessID"); //This dropdown is
//where I'm looking to change the value (it is disabled)
var drp4Val = (document.getElementById('<%=drp4ID.ClientID %>').value);
var drp14Val = (document.getElementById('<%=drp14ID.ClientID %>').value);
var drp15Val = (document.getElementById('<%=drp15ID.ClientID %>').value);
if (drp4Val == 1 || (drp14Val == 1 && drp15Val == 1))
{
//trying to change the value here of dropdown
}
This is what I've tried in the if statement
drpModeNeed.options[drpModeNeed.selectedIndex].value == 1;
but nothing happens. I know for sure that it definitely recognizes the statements, becase I've placed an alert inside the IF statement and each time it would show that the values were definitely selected.
I guess I'm wondering if I'm able to change the value of a disabled dropdown? if I am, then why isn't the code working?
To update the effective value of a <select> element, you don't set the .value of an <option>, you set the .selected property to true (or any truthy value):
drpModeNeed.options[1].selected = true;
Keep in mind that if the <select> element has the .disabled property set, posting the enclosing <form> will not send that value to the server. The browser assumes that disabled elements are supposed to be ignored.
it works for me:
function changeValue(newValue){
var drpModeNeed = document.getElementById("drpAssessID");
drpModeNeed.value=newValue;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<select id="drpAssessID" disabled="disabled" class="aspNetDisabled">
<option value="1">one</option>
<option selected="selected" value="2">two</option>
</select>
<br /><br />
<button type="button" onclick="changeValue(1);">Set 1</button>
<br /><br />
<button type="button" onclick="changeValue(2);">Set 2</button>
</body>
</html>
I have been spending a lot of time researching how to change a button href dynamically in my website using JS. I have a functioning Wordpress website, but would like to add some small additional functionality using JS to change a button's link based on a few user options.
I have researched this and found answers, but I absolutely cannot get the solutions to work on my site.
One of the simplest solutions that should work was found here:
How to make option selection change button link?
I can't understand what is different between what I am trying to accomplish and what the accepted answer proposed. I added window.onload() to prevent the JS from running before elements were loaded.
I am trying to do something similar with the following HTML & JS code:
HTML Code:
<input type="hidden" id="input-book-type" value="GlassCrystal">
<br><br>
<select id="select-page-size">
<option value="6x6">6" x 6"</option>
<option value="10x10">10" x 10"</option>
</select>
<br><br>
<input id="input-project-title" value="Optional Project Title">
<br><br>
<a class="button" id="design-button" href="http://">Design Now</a>
JS Code:
window.onload = function() {
document.getElementById("design-button").onclick = function() {
var booktype = document.getElementById("input-book-type");
var pagesize = document.getElementById("select-page-size");
var projtitle = document.getElementById("input-project-title");
this.href = "http://test/?sessionid=guest&ref="+booktype.value+pagesize.value+"&projectName="+projtitle.value+"/";
};
}
JS Fiddle:
https://jsfiddle.net/w65c9x2d/
I think your code to change the href is correct. However, the onload function is not immediately invoked for the code to work.
window.onload = function(e) {
var booktype = document.getElementById("input-book-type");
var pagesize = document.getElementById("select-page-size");
var pagenum = document.getElementById("select-page-num");
var projtitle = document.getElementById("input-project-title");
document.getElementById("design-button").onclick = function() {
this.href = "http://design.framesmile.com/?sessionid=guest&ref=" + booktype.value + pagesize.value + "*projectName=" + projtitle.value + " / ";
console.log(this.href);
};
}();// invoke the function
<input type="hidden" id="input-book-type" type="" value="GlassCrystal">
<br>
<br>
<select id="select-page-size">
<option value="6x6">6" x 6"</option>
<option value="10x10">10" x 10"</option>
</select>
<br>
<br>
<select id="select-page-num">
<option value="20">20</option>
<option value="22">22</option>
</select>
<br>
<br>
<input id="input-project-title" type="" value="Optional Project Title">
<br>
<br>
<a class="button" id="design-button" href="http://test/">Design Now</a>
Here is example code:
jhg
jhhghj
<script type="text/javascript">
document.getElementById("myLink").onclick = function() {
document.getElementById("abc").href="xyz.php";
return false;
};
</script>
I took this from here
Change your button to this:
<button class="button" id="design-button" onclick="redirect()">Design Now</button>
Now instead of using a link, simply do a function that will take the inputs and change the window.location.href (or whatever method you prefer) to change the page.
redirect(obj) {
window.location.href = "http://test/?sessionid=guest&ref="+booktype.value+pagesize.value+"&projectName="+projtitle.value+"/"
}
Obviously change it to your liking :)
I recommend using jQuery.
$("#submit").on('click', function(event) {
event.preventDefault();
data = $("#link").val();
$("#frame").attr({
src: "http://"+data});
});
When the submit button is clicked, it changed the iframe url which changed the content of the iframe automatically.
I don't really understand what you are trying to ask, but try to modfiy the code above :)
I've got the follwoing HTML structure (I do not have the IDs of the following elements because they are dynamically created):
<fieldset>
<div class="classA">
<select onchange="updateInputBox()">
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</selects>
</div>
<div class="classB">
<input data-myAttribute="case1">
</div>
<div class="classC">
<a type="button">
<i class="fa fa-remove">x</i>
</a>
</div>
</fieldset>
The filedset and it's children is dynamically created. I want to change the attribute in the inputBox depending on what the user selected in the selectBox.
Here is an example how I would have done if the element fieldset would not have been dynamic (the following contains elements have IDs, but only because I want to demonstrate what I want; in reality I don't have IDs because they are dynamically created by clicking a button, that I do not show here):
https://jsfiddle.net/thadeuszlay/6bsgazvv/4/
But unfortunately I don't have the id of the fieldset, because it is dynamically created. Is there a way how you can get the position of the current element?
I tried to pass itself in the updateInputBox-function:
<select id="selectBox" onchange="updateInputBox('+ this +')">
I also tried with jQuery:
$(this).parent().parent()
but in both cases the console would say
"Unexpected identifier"
Update:
Inside the function doing something like this (currentElement is the selectBox/DropDownBox):
currentElement.parent().parent().setAttribute("data-myAttribute", "hello");
Uncaught TypeError: selectBox.parent is not a function
You can use jquery 'closest' for this as below.
HTML
<select id="selectBox" onchange="updateInputBox(this)">
JS
function updateInputBox(selectElm) {
var inputElm = $(selectElm).closest('fieldset').find('input');
inputElm.attr('data-myAttribute', $(selectElm).val());
}
// instead of inline onchange event and the above code, you can use the below to trigger the event
$(document).on('change', 'fieldset select', function () {
var inputElm = $(this).closest('fieldset').find('input');
inputElm.attr('data-myAttribute', $(this).val());
});
In updateInputBox, simply look at the selectedIndex of #selectBox
<select id="selectBox" onchange="updateInputBox(this)">
function
function updateInputBox(dropdowntBox) {
var inputBoxField = document.getElementById("inputBox").setAttribute("data-myAttribute", dropdowntBox.value);
}
Here is jquery version:solution
You need to trigger change() event for select with ID selectBox
$(document).on('change','select',function(){
var value=$(this).val();
$(this).parents('fieldset').find('input').attr('data-myAttribute',value);
});
I am having two issues with my table, One of them is that I want it to only show when I click a button but when i do it shows and then hides and the other is how do I send a parameter based on the select option to this createtable function
This is part of my code
<form class="form-inline" role="form">
<select multiple class="form-control" style = "width:250px"id = "theselect">
<option selected disabled> Chose a number </option>
<option> all </option>
<option> 1 </option>
<option> 2 </option>
</select>
<button type="submit" id = "load" class="btn btn-default">Load</button>
</form>
<div id ="test">
</div>
<script type = "text/javascript">
$(document).ready(function(){
$("#example").hide();
$("#load").click(function(e){
$("#example").show();
});
});
function createTable(param){
var contents = "<table id='example' class='display' cellspacing='0' width='100%' border>";
....
....
$('#test').append(contents); append it to div
}
$(document).ready(createTable(1));
</script>
Thank you
The reason that the table is getting hidden again is because you've set type="submit" on your button. This means that after the click event handler is done processing, it will submit the form, which causes the page to reload. When it reloads, the table is hidden again. If you change it to type="button" that will prevent that.
You can get the currently selected value of the select, using jquery, with this:
$('#theselect').val();
You can then pass this in to your createTable function (or just get the value using that code, from within the function itself).
Also, it's a really bad idea to create markup from within your JavaScript. It's going to make future maintenance a nightmare, and if it gets complex enough, it could start causing performance issues. It's much better to keep your markup separate, and then show/hide it as needed via JS.
Take a look at this example. It gets the selected values, and inserts them into a table, and table into the dom... HTH.
$(document).ready(function(){
$("#load").click(function(e){
var bits = $('#theselect').val();
$("#example").hide();
$('#test').html('');
createTable(bits)
$("#example").show();
});
});
function createTable(param){
var contents = "<table id='example' class='display' cellspacing='0' width='100%' border><tbody><tr><td>"+param+"</td></tr></tbody></table>";
$('#test').append(contents)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select multiple class="form-control" style = "width:250px"id = "theselect">
<option selected disabled> Chose a number </option>
<option> all </option>
<option> 1 </option>
<option> 2 </option>
</select>
<button id = "load" class="btn btn-default">Load</button>
<div id ="test"></div>
Try this:
$(document).ready(function(){
$("#load").click(function(e){
createTable($("#theselect").val());
$("#example").show(); // In case of class 'display' gives it 'display:none'
});
});
function createTable(param){
var contents = "<table id='example' class='display' cellspacing='0' width='100%' border>";
$('#test').append(contents);
}
#example doesn't exists at the beginning so I removed $("#example").hide().