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 ");
});
Related
here i am trying to display a country flag when a currency is selected but my code is not working when i use data from the API
JS
function createDoll(userChoice) {
var output = document.getElementById("display_here");
output.innerHTML = "";
var links = [
"https://simplytest.co.za/fxpaymaster/wp-content/uploads/2019/09/usd-flat.jpg",
"https://simplytest.co.za/fxpaymaster/wp-content/uploads/2019/09/sa-flag.jpg"
];
var img1;
var e=document.getElementById("currency-from");
var strUservalue = e.options[e.selectedIndex].value;
var strUsertext = e.options[e.selectedIndex].text;
if(strUservalue=='USD')
{
img1 = '<img src="' + links[userChoice] + '">';
}
var choices = ["USD", "ZAR"];
var sentence = choices[userChoice]
var img1 = '<img src="' + links[userChoice] + '">';
output.innerHTML = sentence +img1 +strUservalue;
here is my HTML
<body>
<input type="text" name="" id="currency-from-text" class="form-control"
placeholder="Transferring how much?" value="1">
<select class="populate-currencies" id="currency-from" onchange="createDoll(this.value)">
<option value="USD" id="curr">USD</option>
</select>
</body>
i want if someone select USD the US flag displays,
if they select GBP the UK flag displays
links[USD] doesn't exist. Change your links array to an associative array:
var links = {
"USD": "https://simplytest.co.za/fxpaymaster/wp-content/uploads/2019/09/usd-flat.jpg",
"SA": "https://simplytest.co.za/fxpaymaster/wp-content/uploads/2019/09/sa-flag.jpg"
};
<select class="populate-currencies" id="currency-from" onchange="createDoll(this.value)">
<option value="USD">USD</option>
<option value="SA">SA</option>
</select>
Showing Uncaught TypeError: Cannot set property 'selected' of null
<select id="sorter" class="sorter-options">
<option value="name">Product Name </option>
<option value="price">Price</option>
<option value="sort_by">Scale</option>
</select>
<script type="text/javascript">
var val = '';
document.querySelector('#sorter [value="' + val + '"]').selected = true;
</script>
val is an empty string whereas no option in this snippet have an empty string as value. Either create an option with value as empty string or set a predefined value of option to val
var val = 'price';
document.querySelector('#sorter [value="' + val + '"]').selected = true;
<select id="sorter" class="sorter-options">
<option value="name">Product Name </option>
<option value="price">Price</option>
<option value="sort_by">Scale</option>
</select>
You don't have an option is val='' and hence the selector returns null which is expected.
You could add a default empty option if you wish
<select id="sorter" class="sorter-options">
<option value="">Select options</option>
<option value="name">Product Name </option>
<option value="price">Price</option>
<option value="sort_by">Scale</option>
</select>
<script type="text/javascript">
var val = '';
document.querySelector('#sorter [value="' + val + '"]').selected = true;
</script>
or else set the value to an available option
var val = 'price';
document.querySelector('#sorter [value="' + val + '"]').selected = true;
or else provide a check for existence before checking the selected value.
var val = '';
document.querySelector('#sorter [value="' + val + '"]') !== null? document.querySelector('#sorter [value="' + val + '"]').selected = true: null;
or if you just wish to set the default value use defaultValue on select
<select id="sorter" class="sorter-options" defaultValue="price">
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>
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 have a problem accessing the information of a (multi) .attr(...)
I found this and tried to adapt it - but it does not work. I am missing something obvious here (new to js). Hope to find help here!
var user_id = document.getElementById('myselect').options[select.selectedIndex].user_id;
var user_email = document.getElementById('myselect').options[select.selectedIndex].user_email;
document.getElementById('display').innerHTML = 'User with ID' + user_id + " has email address " + user_email;
<select id="myselect">
<option user_email="test#test.de" user_id=1>Test 0</option>
<option user_email="email#email.de" user_id=1>Test 1</option>
<option user_email="whyso#serious.de" user_id=1>Test 3</option>
</select>
<div id="display"></div>
Try this:
var index = document.getElementById('myselect').selectedIndex;
var user_id = document.getElementById('myselect').options[index].getAttribute('user_id');
var user_email = document.getElementById('myselect').options[index].getAttribute('user_email');
document.getElementById('display').innerHTML = 'User with ID' + user_id + " has email address " + user_email;
select.selectedIndex doesn't exist in your example. This should work:
var select = document.getElementById('myselect');
var user_id = select.options[select.selectedIndex].getAttribute('user_id');
var user_email = select.options[select.selectedIndex].getAttribute('user_email');
document.getElementById('display').innerHTML = 'User with ID' + user_id + " has email address " + user_email;