I have a function where if the user changes an IP to be unallocated in the select box, an alert will pop-up that asks if they are sure, on cancelling this alert I want the select2 box to change back to the original status (i.e allocated etc.).
I have been able to change the value of the select2 box by storing the original value in a variable and then assigning it to the value of the select on cancelling the alert
else
$('#ip_status').val(original_status)
However although this DOES change the value of the select2 box meaning the functionality is working, the text in the select2 box stays 'unallocated' giving the end user a misleading value. Keep in mind that .text(" example ") does not work.
Thank you.
Full Code -
original_status = document.getElementById('ip_status').value
$('#ip_status').change ->
# If the user changes ip status to unallocated, clear and hide system name and description fields.
if parseInt($('#ip_status').val()) == 0
r = confirm("You are about to unallocate this IP! Are you sure you want to do this?")
if r == true
$('#ip_description').val("").parent().hide()
$('#ip_system_name').val("").parent().hide()
else
$('#ip_status').val(original_status)
else
# if the select changes to allocated or reserved, re-show the fields that were hidden
$('#ip_description').parent().show()
$('#ip_system_name').parent().show()
You have to use something like:
$( function() {
$("#your_option").attr("selected", "selected");
});
I was able to fix this by changing
$('#ip_status').val(original_status)
to
$("#ip_status").select2("val", original_status)
Related
In my web app, when a user selects an item in a dropdown box, the next dropdown box is updated with conditional options. I have created a script to allow for templates of the fields, but the second dropdown box does not update to allow me to assign a value to it.
Example: www.mywebsite.com?template=newcust
In the header I have:
if (isset($_GET['template'])) {
$templ = $_GET['template'];
if ($templ == "newcust") {
$autoname = "New Customer";
$c1f = "city"; //"join_date"
$c1w = 1; //1=is equal to, 2=is not equal to, 3=is great than, 4=is less than
}
So in this example, 1 would load with "city", while 2 would need to display just the valid fields (is equal to, is not equal 2) and select "is equal to" by default. But if "join date" is put into $c1f, then all 4 options would need to be available.
When doing this manually it works fine, I'm trying to get this to auto-update the fields when the user selects to start off with a template.
I hope this gives enough background info. Let me know if I need to share anything else.
Thanks
see following snip of code
$(document).on('input','#id1, #id2, #id3', function(){
$id1 = $('#retail').val();
$id2 = $('#tax').val();
$id3 = $('#discount_per_unit').val();
$total = Number($id1) + Number($id2) - Number($id3);
$('#total').val($total);
});
now, user gets to input field for #id1, #id2. but I have a Ajax fill in #id3 for the user depending on conditions. the .on(input or .on(change event only detect user input but not the Ajax input. So is there a way to get jquery to detect Ajax input as well.
basically I have a drop down menu user can pick, and Ajax will take the drop down value to get an additioanl data and auto fill into id3 input field. look something like this.
$('#id3').val($somevalue);
but my .on("change" does not detect when user picked a different drop down option so the #id3 is updated but my calcuation that uses id1 though id3 did not update unless I change something on id1 or id2.
You update $('#id3').val($somevalue); didn't trigget any event, they are based on user's actions.
If you want to manually trigger one you can do
$('#id3').val($somevalue).trigger('change') // or 'input'
I'm having trouble figuring out how to disable a select tag but keeping the selected value visible. The only solution I've found was to remove the items that should not be displayed. The use is that when a user created a new item and selects an option, the people viewing the created item should not be able to change it. Greying out text boxes has proved to be pretty simple but I don't know how to proceed with select tags.
This is how I do it right now but not exactly since this code follows a progression and gives editors different options depending on the stage they're in. However, other choice fields won't change through the process, they just need to remain what they were on creation.
//On item edit, set status to In Progress if in New
if($("option[value='New']").attr("selected") == "selected"){
//Disable New/Completed/Cancelled
$("option[value='New']").remove();
$("option[value='Completed']").remove();
$("option[value='Cancelled']").remove();
//Enable In Progress
$("option[value='In Progress']").attr("selected","selected");
//Call Claim WO Function
claimOrder();
}else if($("option[value='In Progress']").attr("selected") == "selected"){
//Remove New option
$("option[value='New']").remove();
$("option[value='In Progress']").remove();
$("option[value='Completed']").attr("selected","selected");
}else if($("option[value='Completed']").attr("selected") == "selected"){
//Remove New/In Progress option when Completed/Cancelled
$("option[value='New']").remove();
$("option[value='In Progress']").remove();
$("option[value='Cancelled']").remove();
}else if($("option[value='Cancelled']").is(':selected')){
//Remove New/In Progress option when Completed/Cancelled
$("option[value='New']").remove();
$("option[value='In Progress']").remove();
$("option[value='Completed']").remove();
}
what about disabling like this
box.attr('disabled', 'disabled')
Here's the function that checks if the form is complete.
So, what I'm trying to do:
If radio is not selected, throw a message.
If radio is "yes", but text is not entered, throw error.
If radio is "no" but text is entered, make the text empty.
If all is good, add stuff into `allResponses
The form was displayed 5 times, and input was as follows:
Yes a1
No
Yes a3
No
Yes
Now, this input should display an error since in 5th case, "yes" is selected but nothing is entered in the textbox.
However, I get this:
http://i.imgur.com/ya2CUp0.png
Also, the text is not being updated as in 1st and 3rd cases.
I don't know a lot about JS, so please provide me with as explained responses as you can.
EDIT: Complete code: http://pastebin.com/scNSNM2H
Thanks
You have this in a loop:
var exaggerationPart = document.getElementById('exaggeration').value
And then you check to make sure it has a value for each item. But you will get the same value each time.
You are creating multiple inputs with the same id, "exaggeration". This is invalid HTML. Id's must be unique. To correct this, you can increment the id the same as you are doing with other elements (such as, input[name='response"+thisJokeIndex+"']).
var exaggerationPart = document.getElementById('exaggeration' + thisJokeIndex).value
tipTD2.append("<input type='text' name='exaggeration' id='exaggeration" + tipIndex + "' size='70'>")
Working demo: jsfiddle.net/svvge/2
Edit: To clear the value of the text box, you must change the value property of the text box element. Right now you are just changing the value of a variable.
var exaggerationInput = document.getElementById('exaggeration' + thisJokeIndex).value;
var exaggerationPart = exaggerationInput.value;
exaggerationInput.value = '';
I have a text box that is already showing, but I also have a select box where the user can select a building, and it will show another select box with more options depending on which building the user chose. The second select box always has the option new
My problem is that if the user selects a certain building from the select box, the program has to check if the building has more options besides from the newoption, and if it has, then the text box should disappear, but if the building only has the new option, then the textbox must stay there, and the second select box needs to disappear.
I tried using something like:
if (secondbox.length==1){
secondbox.style.display='none'}
but it works after I changed to another building instead of working instantly.
Javascript:
if (comm.length == 1){
comm.style.display='none';
comm.disabled=true;
comm.value='';
comm.style.visibility='hidden';
textNumber.style.visibility='visible';
textNumber.disabled=false;
textNumber.focus();
textic.style.visibility='hidden';
textic.disabled=true;
textic.value='';
document.getElementById('btnComm').value='Add';}
else {
comm.style.display='';
comm.disabled=false;
comm.style.visibility='visible';
textNumber.style.visibility='hidden';
textNumber.disabled=true;
textNumber.value='';
textic.style.visibility='hidden';
textic.disabled=true;
textic.value='';
document.getElementById('btnComm').value='Update';}
}
Simply do:
if(document.getElementById("selectBoxId").childNodes.length >= 2) {
//The select box has 2 or more options...
}