I have a simple modal in bootstrap 3.0.2 and it has a 2 simple input type="text" I would like to clear it. I have seen example but they are for bootstrap 2 and don't work with my modal. Does any one know how to clear or reset this input text inside a modal when I click on the "reset" button.
-Thank you in advance.
Update: after using #davethecoder solution works like a charm, I still need help clearing 1 of the input text its under the date class:
<input id="#item" type="text" class="date-picker form-control" />
Any chance anyone knows how to clear this one?
-Thank you for helping me.
twitter bootstrap is a CSS framework for modelling response web layouts. If you are using jquery, the code to clear an element is $("#itemid").val('');
easiest would be to give each item a class, and set this value based on class, or as an alternative, you can loop through items of specific formid and reset to clear that way. Personally I would just do this class based, as this will essentially have the loop code per item, within the jquery framework.
I mentioned jquery here, because you had a jquery tag
Oh,just I found that the attribute id of your input element contains '#',it may lead to some unknown mistake. It is best to remove the '#' on your <input>.
If you are using jQuery, just use a function call like this to clear input:
$('#item').val('');
If you're not using jQuery, just use Javascript function like this:
document.getelementById('item').value = "";
Related
I am attempting to automate a button click on a website. The only problem is, the HTML for the button looks like this (please note that this is not the exact button I am trying to click, it is just a real example of what a lot of buttons look like):
<button type="submit" class="Ghost-btn">Continue</button>
Obviously, there is no ID for this button, so I don't know how to 'click' on it. Is there a way of using the class name, or is there a way to program javascript to edit the HTML and add an ID for the button?
Thanks for your help in advance.
Louis
PS the link for the above button is https://raffle.sneakersnstuff.com/adidas-yeezy-boost-700-salt-EG7487 , and it is the first button you will see, labelled 'continue'.
You can use document.querySelector to use any CSS selector to select an element in JS, for example:
document.querySelector(".Ghost-btn").click();
Read more about this at MDN.
This would also allow you to select the button in other ways, for instance:
document.querySelector("button[type=\"submit\"]").click();
is also valid.
You can use
document.getElementsByClassName("Ghost-btn");
document.getElementsByTagName("BUTTTON");
but be sure that there might be more than one components so have to select the right one.
ID is just a handy and simple way for identifying any DOM element.
You can use other attribute or a set of attributes unique to the document for this purpose.
For example "type" in your example, if this is the only input of type "submit"
Or if there are more than one "submit" buttons, you can use type="submit" and class="Ghost-btn" or even text of the button.
I was asked to do something particular, and after trying I eventually found this site https://codepen.io/elmahdim/pen/hlmri from which I'm using the JQuery. I however don't have any knowledge of it so I only understand in parts. What I'm trying to do is upon marking a checkbox an input type="text" appears below it, so if I check 3 results, input type="text"creates 3 fields, etc, and if I uncheck a checkbox, the camp gets deleted.
I've tried to do it by adding
$("div bb")
{
$('<input type="text" id="textbox" style="width:170px;"/><span> CHF <span>');
}
after $(".hida").hide();but as I have no knowledge of JQuery it obviously didn't work and I don't really know what now. Also before that input, is it possible to add some sort of variable that is "attached" to the input so I can specificy what that input is for? Like if I check "Mercedes" in the checkbox, the input type="text" is created and above it the name "Mercedes" then if I check "BMW" it makes another input type="text" with BMW written above it?
Also wruting the code like this $("div bb") { for some reason disabled the $. Not sure why.
One solution:
create an empty element in your html where the input fields
should appear (e.g. <div id="textfields"></div>)
find the "on-checkbox-click-event-handler", which happens to be this line in the jquery: $('.mutliSelect input[type="checkbox"]').on('click', function() {
add code to the handler at the correct location, to append/delete a text box (difficult if you don't know jquery at all). The correct location is where jquery looks for the "checked-state" of the checkbox. Use $().append() to create the text field and $().remove() to remove on unchecking the checkbox. Should be something like $("#textfields").append("<input type='text'/>"); you will need to add a class to the input field to later address it when removing.
Working pen:
https://codepen.io/anon/pen/gRdmXj
Happy coding!
I have this code setup in JS Fiddle so that everyone can see it. I have a piece of code that with the help of the JQuery UI library will make it into a JQuery Select.
$("select").selectbox();
but now my question is, how do i revert to the old select ?
the reason why i want to do this is people should be able to click on one of the radio buttons and it should filter the select by that gender (the class of each option has the gender) but this doesnt work when the select has already been converted
This shoud work:
$('select').selectbox('detach');
you could add a class to the the selected object instead of altering it completely, you can then always select it again quickly
With JavaScript is it possible to have a drop down menu display a form field with an input type of text, instead of a list option? Could I get a jsfiddle demo example?
I recommend using JQuery to do this? Basically hide and show a div with all your input fields on it. This way you can create the illusion that it's a native dropdown. A standard dropdown does not support custom markup. There are aloso third party alternatives for "custom dropdowns" I suspect they are all implemented using some variation on what I suggested above...
Of course it is possible, but I doubt it is possible using a common <select> element. You should probably create a <div> consisting of several inputs (i.e. <input type = "text">).
Then you'll have a button (with a down-pointing arrow image :) ) and to its onclick event, you'll bind a function that shows your <div>. To hide the <div>, you can bind the hiding function to a click on the background or another click on your button.
To add some elegancy and create a dropdown effect while showing the <div>, you can set its height to 0 and then continually increment it with a timer.
I want to use the YUI calendar widget to provide users with a way of selecting the date for an input form.
The question I need anwered is how to do I change the value of input elements using YUI?
<input type="hidden" name="date" id="dateEntry" value="I NEED TO KNOW HOW TO CHANGE THIS!" />
I've looked everywhere but can't find anything.
And if this isn't possible using YUI, is it possible using jQuery or another library? And if so is there a similar calendr module I can use alongside a library that can do this?
Hope that makes sense :/
To change the value try this:
YUI().use('node', function(Y) {
var input = Y.one('#dateEntry');
input.set('value', 'new value!');
});
HERE is the documentation.
HERE is a working example.