I have a global variable:
var x = document.getElementById("Node").value;
Where the value is determined by a text box with the ID of "Node".
I have two functions that don't same thing if creating preset notes based on values entered into text and drop downs. How do I call the above global variable into those functions and have it added to the created statement. Both functions look the same:
This works for one function but not when there is two. What I have is several text boxes and drop downs. One of those text boxes is a global value called Node. When node is filled out, I want to be able to pull that value into both functions. Here is what I have for both.
//Declare Node as a Global Variable
var x = document.getElementById("Node").value;
//Populates the Summary box
function mySummary() {
var a = document.getElementById("Field1").value;
var b = document.getElementById("Field2").value;
var c = document.getElementById("Field3").value;
var d = document.getElementById("Field4").value;
document.getElementById("Summary").innerHTML = a + " - " + b + " - " + c + " - " + x + " -" + d;
}
//Populates the Notes box
function myNotes() {
var a = document.getElementById("Field5").value;
var b = document.getElementById("Field6").value;
var c = document.getElementById("Field7").value;
var d = document.getElementById("Field8").value;
var e = document.getElementById("Field9").value;
document.getElementById("Notes").innerHTML = x + " - " + a + " / " + b + " - " + c + "% Offline - " + d + " - " + e + " - " + f;
}
The issue is that the value of X is not being pulled into both functions at the same time for the output. The output goes into a text area
If I create a local variable in each function and make the user enter the same information twice per text box it works fine, but I want them to only enter the information once and have it pulled into each text area
You can simply use:
window.x = document.getElementById("Node").value;
Try this
(function() {
var x = document.getElementById("Node").value;
document.getElementById("Node").onchange = function() {
myNode()
};
document.getElementById("mySelect1").onchange = function() {
myNotes()
};
document.getElementById("mySelect2").onclick = function() {
summary()
};
function myNode() {
x = document.getElementById("Node").value;
}
function summary() {
var a = document.getElementById("mySelect1").value;
var b = document.getElementById("mySelect2").value;
document.getElementById("5").value = a + " - " + b + " - " + x;
}
function myNotes() {
var a = document.getElementById("mySelect1").value;
var b = document.getElementById("mySelect2").value;
document.getElementById("4").value = a + " + " + b + " + " + x;
}
}
)();
Notes : <input type="text" id="4" /><br> Summary : <input type="text" id="5" /><br>
<select id="Node">
<option value="w">w
<option value="x">x
<option value="y">y
<option value="z">z
</select>
<select id="mySelect2">
<option value="a">a
<option value="b">b
<option value="c">c
<option value="d">d
</select>
<select id="mySelect1">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
</select>
Related
I have a form and I am trying to create a 'filter` and when a user selects the values etc it adds in to a textarea.
Below is the form. For example a user could create something that looks like this and it show in the output text area
`company` = 'RedLight' AND `name` = 'John' AND `dog` = 'yes'
Basically at the moment i've got it to add the first part company = redlight
But not sure how to then make the add button work, where the can add more into the current output.
HTML
// field
<select id = "fieldvalue" class = "form-control select3">
<option value ="company"> company </option>
<option value ="name"> name </option>
<option value ="name"> name </option>
</select>
// operator field
<select id = "operatorvalue" class = "form-control select3">
<option value = "="> Is equal to </option>
<option value = "!="> Is not equal to </option>
<option value = "3"> Contains</option>
<option value = "4"> Does not contain</option>
<option value = "<"> Less than</option>
<option value = ">"> Greater than</option>
<option value = "<="> Equals or less than</option>
<option value = ">="> Equals or greater than</option>
</select>
// value field
<input id = "valuetext" type = "text" class = "form-control">
<textarea id ="output"> </textarea>
<button type = "submit" id ="andcondition"> ADD </button>
<button type = "submit" id ="addfiltertext"> WHERE </button>
THE JS the addfiltertext button just changes output to NaN
$("#addfiltertext").click(function(){
var field = $("#fieldvalue").val();
var operator = $("#operatorvalue").val();
var valuetext = $("#valuetext").val();
$("#output").val("`" + field + "` " + operator + "'" + valuetext + "'");
});
$("#andcondition").click(function(){
var currentoutput = $("#output").val();
$("#output").val(+ currentoutput + " AND ");
});
Your are resolving the output value wrong, you don't need the + in the beginning.
Do like this instead:
$("#addfiltertext").click(function() {
var temp = ' ';
var field = $("#fieldvalue").val();
var operator = $("#operatorvalue").val();
var valuetext = $("#valuetext").val();
temp = $("#output").val();
$("#output").val(temp + "'" + field + "' " + operator + " '" + valuetext + "'");
});
$("#andcondition").click(function() {
var currentoutput = $("#output").val();
$("#output").val(currentoutput + " AND ");
});
I use my getHTML() function in a different function which parses through data, and I display the data as an HTML string. When the user is done filling the form, I want to send that information along with the username and examid. The username and examid are also coming from the backend at the position data[0].username and data[1].examid How can I make these two attributes into global variables, so that I can use them in my send function?
function getHTML(data){
var htmlString = "";
for(var i=0; i < data.length; i++){
htmlString += "<p>"
+ data[i].questionid + "." + "\n"
+ "Question: " + data[i].question
+ "\n" + "<input type='text' value1='"
+data[i].username+ " value2='" +data[i].examid+ "'>";
htmlString += '</p>';
}
response.insertAdjacentHTML('beforeend', htmlString);
}
function send(){
var inputText = document.querySelectorAll("input[type='text']");
var data = [];
for(var index = 0; index < inputText.length; index++){
input = inputText[index].value;
data.push({'text' : input});
}
data.push({'username' : username, 'examid' : examid});
}
Define your variable out of any function so they would be global
var username;
var examid;
function(){...}
function(){...}
window.username = data[i].username; and window.examid = data[i].examid.
Though you may be trying to store more than one in which case you want an array.
You are looking to use the window element if you want it in the global scope.
Try following code might help you
(function() {
var x = document.getElementById("Node").value;
document.getElementById("Node").onchange = function() {
myNode()
};
document.getElementById("mySelect1").onchange = function() {
myNotes()
};
document.getElementById("mySelect2").onclick = function() {
summary()
};
function myNode() {
x = document.getElementById("Node").value;
}
function summary() {
var a = document.getElementById("mySelect1").value;
var b = document.getElementById("mySelect2").value;
document.getElementById("5").value = a + " - " + b + " - " + x;
}
function myNotes() {
var a = document.getElementById("mySelect1").value;
var b = document.getElementById("mySelect2").value;
document.getElementById("4").value = a + " + " + b + " + " + x;
}
}
)();
Notes : <input type="text" id="4" /><br> Summary : <input type="text" id="5" /><br>
<select id="Node">
<option value="w">w
<option value="x">x
<option value="y">y
<option value="z">z
</select>
<select id="mySelect2">
<option value="a">a
<option value="b">b
<option value="c">c
<option value="d">d
</select>
<select id="mySelect1">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
</select>
I am trying to write a simple tool for some folks in my workplace. I am trying to run different functions depending on option values picked from a html select element. And I am stuck... please dont laugh.Just got back into coding 3 weeks ago.how i want this to work is the user clicks to lower dropdown menu... selects an option... then is asked for adding additional input, then that with some predefined text is added to a text area.then then the menu resets. Please make answers as simple as possible.
<!-- BEGIN ROUTING DROPDOWN MENU -->
<select id="routingdropdownmenu">
<option value="">MAKE A SELECTION</option>
<option value="1">ROUTE TO STORE</option>
<option value="2">ROUTE TO WAREHOUSE...</option>
<option value="2">CANCEL SHIPPING</option>
<script>
var mytextbox = document.getElementById('REMARKSTEXTAREA');
var mydropdown = document.getElementById('routingdropdownmenu');
mydropdown.onclick = function(){
var INVOICE = prompt("WHAT IS THE INVOICE NUMBER?");
if (INVOICE != null) {
if (mydropdown = 1) {
mytextbox.value = mytextbox.value + " ROUTING INVOICE " + INVOICE + " TO STORE ";}
else
if (mydropdown = 2) {
mytextbox.value = mytextbox.value + " ROUTING INVOICE " + INVOICE + " TO WAREHOUSE ";}
else
if (mydropdown = 3) {
mytextbox.value = mytextbox.value + "CANCELLING SHIPMENT";}
this.value = "";
</script>
</select>
<!-- END ROUTING DROPDOWN MENU -->
Did you lost your element whose id is REMARKSTEXTAREA
You need bind a onchange function not onclick
You need to use mydropdown.value to get selected values
You need to use == not = to do the switches .
Html
<input id="REMARKSTEXTAREA" />
<select id="routingdropdownmenu">
<option value="">MAKE A SELECTION</option>
<option value="1">ROUTE TO STORE</option>
<option value="2">ROUTE TO WAREHOUSE...</option>
<option value="3">CANCEL SHIPPING</option>
</select>
javascript
var mytextbox = document.getElementById('REMARKSTEXTAREA');
var mydropdown = document.getElementById('routingdropdownmenu');
mydropdown.onchange = function(){
var INVOICE = prompt("WHAT IS THE INVOICE NUMBER?");
if (INVOICE != null) {
if (mydropdown.value == 1) {
mytextbox.value = mytextbox.value + " ROUTING INVOICE " + INVOICE + " TO STORE ";
}
else if (mydropdown.value == 2) {
mytextbox.value = mytextbox.value + " ROUTING INVOICE " + INVOICE + " TO WAREHOUSE ";
}
else if (mydropdown.value == 3) {
mytextbox.value = mytextbox.value + "CANCELLING SHIPMENT";
}
}
}
How useful would this really be in a real work environment if you don't know enough to do this part?
Anyways, the change event will trigger the select's event handler. Event handler will only accept an input in the text input and will prompt for one until one is entered or cancel button is clicked in which case it quits all together.
Using a switch and the selectedIndex of the select determines what is printed in the output element.
SNIPPET
var text = document.getElementById('invNum');
var menu = document.getElementById('routeMenu');
menu.addEventListener('change', function(e) {
var INVOICE = text.value;
while (INVOICE == 'undefined' || INVOICE == '' || INVOICE == null) {
if (INVOICE == null) {
return false;
} else {
INVOICE = prompt("Enter Invoice Number First");
}
}
var out = document.getElementById('out');
var opt = menu.selectedIndex;
switch (opt) {
case 1:
out.textContent = " ROUTING INVOICE " + INVOICE + " TO STORE ";
break;
case 2:
out.textContent = " ROUTING INVOICE " + INVOICE + " TO WAREHOUSE ";
break;
case 3:
out.textContent = "CANCELLING SHIPMENT";
default:
return false;
}
}, false);
<fieldset>
<legend>Route Menu</legend>
<label>Invoice Number
<input id='invNum'>
</label>
<select id="routeMenu">
<option value="">Select Option</option>
<option value="1">Route to Store</option>
<option value="2">Route to Wharehouse</option>
<option value="3">Cancel Shipping</option>
</select>
<br/>
<br/>
<output id='out'></output>
</fieldset>
The following code removes dropdown list values based on text entered in a textbox.
FIDDLE DEMO
JQUERY
var ddl = ('#ddl'),
txt = ('#txt');
$(txt).change(function() {
var x = $(txt).val(),
li = $(ddl).html();
if (x.length != 0) {
$(ddl).html(li);
$(ddl + ' :not([value="' + x + '"])').remove();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="txt" type="text" placeholder="Enter a number...">
<select id="ddl">
<option value="0" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
QUESTION
How to restore dropdownlist values back to initial state when a new value is entered into the textbox?
I have been attempting to use:
$(ddl).selectmenu("refresh");
but this stops the script from working as expected.
Like so
...
$(ddl).html(li);
$(ddl + ' :not([value="' + x + '"])').hide();
} else {
$(ddl + ' :not([value="' + x + '"])').show();
}
...
Instead of removing the item completely, you simply hide. When you empty the input field, re-show all the items.
You could try something like this:
var ddl = ('#ddl'),
txt = ('#txt');
$(txt).change(function () {
var x = $(txt).val(),
li = $(ddl).html();
$(ddl + ' option').show();
if (x.length != 0) {
$(ddl).html(li);
$(ddl + ' option:not([value="' + x + '"])').hide();
$(ddl + ' option[value="' + x + '"]').prop('selected',true);
}
});
I'm trying to get a JQuery function to pick up specific changes to a form and then plug the information into equations so that each section of the form has answers created for it automatically. I got the first part of it to work (Quantity for Posts) but can't get the second part to work (Quantity for Rails). If anyone can point out or explain where I went wrong and how I could fix it it would be greatly appreciated! Thanks!
Here is a JSFiddle - http://jsfiddle.net/gv0029/ncn42/1/
HTML:
<fieldset id="fence">
<div name="inputFence" class="inputFence">
<legend><strong>Fence Description</strong>
</legend>
<label>Footage:
<input name="footage_1" class="footage" />
</label>
<select name="fenceHeight_1" class="fenceHeight">
<option value="select">Select Fence Height</option>
<option value="6" id="fH6">6 Ft.</option>
<option value="8" id="fH8">8 Ft.</option>
</select>
<legend><strong>Post Type</strong>
</legend>
<label>Post Quantity:
<input name="postQuantity_1" class="postQuantity" />
</label>
<legend><strong>Rail Type</strong>
</legend>
<select name="6foc_1" class="6foc">
<option value="select">6 Ft. on Center?</option>
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
<label>Quantity:
<input class="railQuantity" name="railQuantity_1" />
</label>
</fieldset>
<div>
<input type="button" id="btnAddFence" value="Add Another Fence" />
<input type="button" id="btnDelFence" value="Remove Fence" />
</div>
</form>
JS:
//Quantity for Posts
$(document.body).on('keypress keydown keyup change', '[class^="footage"] ', function () {
var footage = parseFloat($(this).val(), 10);
var total = '';
var parts = $(this).attr('name').split("_");
var fenceNumber = parts[1];
if (!isNaN(footage)) {
total = Math.ceil(footage / 7);
$(":input[name='postQuantity_" + fenceNumber + "'" + ']').val(total.toString());
} else {
$(":input[name='postQuantity_" + fenceNumber + "'" + ']').val("");
}
});
//Quantity for Rails
$(document.body).on('keypress keydown keyup change', '[class^="footage"] [class^="fenceHeight"] [class^="6foc"]', function () {
var parts = $(this).attr('name').split("_");
var fenceNumber = parts[1];
var footage = parseFloat($(":input[name='footage_" + fenceNumber + "'" + ']').val(), 10);
var fenceHeight = $(":input[name='fenceHeight_" + fenceNumber + "'" + ']').val();
var railQuantity = $(":input[name='railQuantity_" + fenceNumber + "'" + ']').val();
var total = '';
var sfoc = $(":input[name='6foc_" + fenceNumber + "'" + ']').val();
if (fenceHeight = !NaN) {
if (sfoc == "no") {
if (fenceHeight == '8') {
total = (Math.ceil(footage / 8) * 4);
}
if (fenceHeight == '6') {
total = (Math.ceil(footage / 8) * 3);
}
railQuantity.val(total);
}
if (sfoc == "yes") {
if (fenceHeight == '8') {
total = (Math.ceil(footage / 12) * 4);
railQuantity.val(total);
}
if (fenceHeight == '6') {
alert("Error: 6ft on Center cannot use 6ft posts");
railQuantity.val("ERROR");
}
}
} else {
railQuantity.val("");
}
});
//Dynamic Fence Input Fields
$('#btnAddFence').click(function () {
// create the new element via clone()
var newElem = $('.inputFence:last').clone();
// insert the new element after the last "duplicable" input field
$('.inputFence:last').after(newElem);
// enable the "remove" button
$('#btnDelFence').removeAttr('disabled');
//get the input name and split into array (assuming your clone is always last)
var parts = $('.fenceHeight:last').attr('name').split("_");
//change the second element of the array to be one higher
parts[1]++;
//join back into a string and apply to the new element
$('.fenceHeight:last').attr('name', parts.join("_"));
//do the same for other two inputs
parts = $('.postQuantity:last').attr('name').split("_");
parts[1]++;
$('.postQuantity:last').attr('name', parts.join("_"));
parts = $('.footage:last').attr('name').split("_");
parts[1]++;
$('.footage:last').attr('name', parts.join("_"));
parts = $('.6foc:last').attr('name').split("_");
parts[1]++;
$('.6foc:last').attr('name', parts.join("_"));
});
$('#btnDelFence').click(function () {
//remove the last inputFence
$('.inputFence:last').remove();
// if only one element remains, disable the "remove" button
if ($('.inputFence').length == 1) $('#btnDelFence').attr('disabled', 'disabled');
});
$('#btnDelFence').attr('disabled', 'disabled');
You had a few problems.
First was this line:
$(document.body).on('keypress keydown keyup change', '[class^="footage"] [class^="fenceHeight"] [class^="6foc"]',
You have to separate the different inputs with a comma as shown here:
$(document.body).on('keypress keydown keyup change', '[class^="footage"],[class^="fenceHeight"],[class^="6foc"]',
Second was this line:
var fenceHeight = $(":input[name='fenceHeight_" + fenceNumber + "'" + ']').val();
You're getting the value of the select, when really you want the value of the selected option:
var fenceHeight = $(":input[name='fenceHeight_" + fenceNumber + "'" + ']').find('option:selected').val();
Third was this line:
var railQuantity = $(":input[name='railQuantity_" + fenceNumber + "'" + ']').val();
You're getting the value of this line, when down in the code you're actually trying to set the value of the value. What you want is just the element. I've left the quantity in there in case you want that later, but repurposed railQuantity:
var railQuantity = $(":input[name='railQuantity_" + fenceNumber + "'" + ']');
var railQuantityval = $(":input[name='railQuantity_" + fenceNumber + "'" + ']').val();
Fourth is your if statement:
if (fenceHeight = !NaN) {
You can't really use it like that. Use this instead:
if (!isNaN(Number(fenceHeight))) {
Down in the if statement, you also could benefit from if/else statements instead of just if statements. I've changed those to reflect this.
You were also missing the railsQuantity element in your add function, which I added for you:
parts = $('.railQuantity:last').attr('name').split("_");
parts[1]++;
$('.railQuantity:last').attr('name', parts.join("_"));
Updated fiddle here.