jQuery: accessing (multi) .attr() - javascript

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;

Related

adding field values to textarea and joining

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 ");
});

making Javascript variables into global variables

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>

How to run multiple functions from a select element using javascript

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>

If form multiple selects value are euals zero

I have multiple forms with one, two, three html select. I just want simple code if form select selected value equals to zero then console.log "please select order". Following is the script which I am working on.
$('form').submit(function(event){
event.preventDefault();
var dataitem = $(this).attr('data-item');
if (dataitem == 1) {
console.log(dataitem);
var $myform = $(this),
flavour1 = $myform.find( "select[name='flavour1']" ).val(),
drink = $myform.find( "select[name='drink']" ).val();
console.log("Flavour :" + flavour1 + ", Drink :" + drink);
} else if (dataitem == 2) {
console.log(dataitem);
var $myform = $(this),
flavour1 = $myform.find( "select[name='flavour1']" ).val(),
flavour2 = $myform.find( "select[name='flavour2']" ).val(),
drink = $myform.find( "select[name='drink']" ).val();
console.log("Flavour1 :" + flavour1 + ", Flavour2 :" + flavour2 + ", Drink :" + drink);
} else {
console.log(dataitem);
var $myform = $(this),
flavour1 = $myform.find( "select[name='flavour1']" ).val(),
flavour2 = $myform.find( "select[name='flavour2']" ).val(),
flavour3 = $myform.find( "select[name='flavour3']" ).val(),
drink = $myform.find( "select[name='drink']" ).val();
console.log("Flavour1 :" + flavour1 + ", Flavour2 :" + flavour2 + ", Flavour3 :" + flavour3 + ", Drink :" + drink);
}
});
please advice as i am stuck at this point of selection. If each select value == 0.
Thanks
Usualy if you have multiple components similar you can use:
$myform.find("select")
This will give you all "select" elements in your form. And then you can find the value one by one using:
$myform.find("select").each(function(index, value){
var valSelec = $(this).val();
///Make your if
})
I create a function: validateSelect() that search on all selects of form and verify if the option selected was empty, if true they return false.
Example:
$("form").submit(function(e) {
e.preventDefault();
if (validateSelect()) {
console.log('All are filled valid');
} else {
console.log('Invalid');
}
});
function validateSelect() {
var fleg = true;
$.each($('select option:selected'), function(key, val) {
if (val.value.length < 1) {
fleg = false;
}
});
return fleg;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form>
<select name="number">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="letter">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<input type="submit">
</form>

jQuery select option value

How do you set the "city" value to the same thing as country value when there is no option for a city?
For example, Benin doesn't have an option to select a city inside of it. At this link http://jsfiddle.net/yPb6N/1/, if you select "Benin", underneath the dropdown it displays Benin undefined. How do you make it display Benin Benin?
<select id="country-select">
<option value="us">US</option>
<option value="germany">Germany</option>
<option>Ireland</option>
<option>Benin</option>
<option>Italy</option>
</select>
<select id="us-select" class="sub-menu hide">
<option value="austin">Austin</option>
</select>
<select id="germany-select" class="sub-menu hide">
<option value="berlin">Berlin</option>
</select>
<p></p>
<font size="5"><font color="red"><div class="countryvalue" >Value</div></font></font> <br/>
​
function countrySelectChanged() {
$('.sub-menu').hide();
var selectedCountry = $('#country-select').val();
if (selectedCountry) {
$('#' + selectedCountry + '-select').show();
}
}
$(document).ready(function() {
$('#country-select').change(countrySelectChanged );
countrySelectChanged();
$("#country-select").change(function () {
var str = $('#country-select').val() + " " + $("#" + $("#country-select option:selected").val() + "-select option:selected").val();
$("#country-select option:selected").each(function () {
});
$(".countryvalue").text(str);
})
.change();
});
​
.hide {
display: none;
}​
My code is not working
if (($('#country-select').val() != "us") || ($('#country-select').val() != "germany")) {
$("#" + $("#country-select option:selected").val() + "-select option:selected").val() == $('#country-select').val();
}
thanks :-)
This line:
var str = $('#country-select').val() + " " + $("#" + $("#country-select option:selected").val() + "-select option:selected").val();
Needs to be somthing like:
var country = $('#country-select option:selected').val();
var city = $("#" + country + "-select option:selected").val() || country;
$(".countryvalue").text(country + " " +city);
This way, if the name of the city doesn't exist, it will use the name of the country. Also, it doesn't perform multiple selectors for the same element, which is wasteful.
Here is the updated fiddle.
I guess that you want to print only the country name if there is no city associated with this country. If so, I have created this fiddle : http://jsfiddle.net/scaillerie/tSgVL/1/ .
In fact, you have to test if the list associated with your country exists or not :
hasCity = $("#" + $("#country-select option:selected").val() + "-select").length !== 0
and then print or not the country.
Edit
It seems that you want to duplicate the country, so depending of the previous test, you will have :
str = $country.val() + " " + (hasCity ? $("#" + country_val + "-select option:selected").val() : $country.val());
basically what #Aesthete said, i just refactored the whole function (took some minutes), maybe you like it (i updated the fiddle: http://jsfiddle.net/yPb6N/4/):
$(document).ready(function() {
var country
, city
, $selected
, $cs = $('#country-select')
, $cv = $(".countryvalue");
$cs.on('change', function() {
country = $cs.val() || $cs.text();
$selected = $cs.find(':selected');
city = $selected.val() || $selected.text();
$('.sub-menu').addClass('hide');
if($selected.val()) {
$('#' + $selected.val() + '-select').removeClass('hide');
city = $('#' + $selected.val() + '-select').val() || country;
}
$cv.text(country + ' ' + city);
});
$cs.trigger('change');
});​

Categories