Removing Form elements .hide() Removing Values? - javascript

I use this script to show an additional language menu additional, which works great however if the user selects a value then decided they don't want to add an additional language an clicks "Remove" the form field is hidden however the value is still there and is submitted with the form.
Is there away to change the field value to when the user clicks the "remove" button or remove the field completely?
$(document).ready(function(){
//Hide div w/id extra
$(".smalla").hide();
$("#langadtional").hide();
$("#langadd").click(function(){
$("#langadtional").show();
});
$("#langrem").click(function(){
$("#langadtional").hide();
});

If you want to remove the element, use remove:
$("#langadtional").remove();
If you want to disable a form element:
$("#langadtional").attr("disabled", "disabled");
To enable:
$("#langadtional").removeAttr("disabled");

You can clear the element's value with val() when hiding it:
$("#langadtional").hide().val("");
Removing the element is also possible, as Linus G Thiel demonstrates in his answer, but that would mean you'd have to completely recreate the element if your Add button is clicked further down the line.

Related

onClick button add Focus in an input field but that input is invisible

this is my demo:
https://jsfiddle.net/larico/7d3851uf/1/
When click to search icon, the search Field was opened, so then should be focus on input, for writing in the field without clicking in the search field.
I was trying with this code:
$('.search').click(function(){
$('#gosearch').focus();
});
but seems doesn't work.
how could I solve it,
Since you have a transition you would need to use transitionend:
$('.search').click(function(){
$(this).toggleClass('opened');
$('.big-search').toggleClass('displayed').one('transitionend', function(){
$('#gosearch').click().focus()
});
});
You can see it here

jquery enable/disable fields based on variable

I have a variable that i am using to disable input fields across all field sets in a page.
$("[eventDisabled='true'] input").attr('disabled', 'disabled');
However i need to enable certain input fields that are in some specific div, i have placed those input fields in some other div
When i use below code to enabled them, it is not working
$("[eventDisabled='true'] #someotherdiv input").attr('enabled', 'enabled');
Any help
One way to suppress inputs within a specific container by using the css psudo-class :not(selector) in your jQuery selector as follows:
$('div:not(#someotherdiv) input[eventDisabled=true]')
This will select all inputs that has an attribute of eventDisabled with a value of true and that is not a child of a div with an id of someotherdiv

How do I return a selected value from a complicated dropdownlist in MVC?

My dropdownlist works like a treeview. Since, I cant seem to figure out if Html.DropDownListFor does this, I am having to do it the old fashioned way. Here is my code.
View:
Controller:
How do I get the selected value (LocationId) back to my controller? id="locSelection" in the view, brought in as object selection in the controller. Thank you:)
First of all it's not a old fashioned way it's the bootstrap way of replicating dropdown
Second of all it's not a drop down element...
Since this contains only ul and li tags and those are not of input type you cannot post back the values...
Also another problem in the code is you are setting the ID locSelection on multiple elements and that too in a loop .. So you will have a whole lot of elements with the same ID which is a Big NO. The Id's must be unique else it's a nightmare when we start using Jquery on these elements...
Solution -- Use Jquery
Remove the Id's
Add a class to all the anchor tags eg: locSelection
Maintain a hidden input field inside your form. We will use this hidden input field to post back the data on form submit.
<input type='hidden' name='locSelection' id='locSelection' />
Now bind a click event to the anchor tag inside the li and inside this event put that Clicked anchor tag text value into the hidden input.
$('.locSelection').on('click',function(){
$('#locSelection').val($(this).text());
});

Dropdown Check List Radio Unselect

I use this very nice plugin in my project called jQuery Dropdown Check List (https://code.google.com/p/dropdown-check-list/) specifically one of example which is named: 'Single select with radio buttons instead of checkboxes'.
One big problem with this example is that I am not able to (I was trying to do this by jQuery) set radio button unchecked. I was using for example:
$("input:radio").attr("checked", false);
Or
$("input:radio").removeAttr("checked");
And unfortunately nothing. Can anyone give some advice how fix this thing?
Try this:
- For check:
$("input:checkbox").attr("checked", "checked");
or
$("input:checkbox").prop('checked', true);
-For uncheck:
$("input:checkbox").removeAttr("checked");
or
$("input:checkbox").prop('checked', false);
I tried both methods in the demo page(http://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html) for the "Single select with radio buttons instead of checkboxes", and turns out to be fine: the selected radio button has removed. However, the value stays in the span because remove selected radio cannot remove selected value.
My suggestion is that after you uncheck the radio, also set a html space to the span, it removes the selected value and also keep the height of its container.
This plugin uses checkbox not radio inputs so you must use $('input:checkbox') or $('input[type="checkbox"]') as your selector!
Click here to see a demo!

Adding inputs with AJAX?

Is there a way in AJAX or JS to add further inputs upon a button click?
In short, yes you can add more inputs on a button click.
For example, in jQuery, you could have something like this where the buttonID is the id attribute for the button and the formID is the id attribute for your form:
$("buttonID").click(function() {
//add new inputs here, something like:
$("formID").append('<input type="text" id="newInput" name="newInput" />');
});
You can also have the additional inputs hidden to start off with and then 'un-hide' them on a click if you want.
Further inputs? Run any JavaScript you want when a user clicks a button by adding an event listener to the button that listens for a click.
Once a user clicks on the button, if you have an event listener, you can change what they had entered, you can do anything anything you want.
I am not certain what you mean by 'further inputs' though. If you are sending data then you can append whatever you want, I frequently append a timestamp to help prevent caching issues, for example.

Categories

Resources