I have this form:
<form name="customize">
Only show results within
<select name="distance" id="slct_distance">
<option>25</option>
<option>50</option>
<option>100</option>
<option value="10000" selected="selected">Any</option>
</select> miles of zip code
<input type="text" class="text" name="zip_code" id="txt_zip_code" />
<span id="customize_validation_msg"></span>
</form>
How can I select the input and select with one jQuery selector?
I tried this but it selected all of the selects and inputs on the page:
$("form[name='customize'] select,input")
The comma in the selector string separates completely separate expressions, just like in CSS, so the selector you've given gets the select elements within the form named "customize" and all inputs on the form (as you've described). It sounds like you want something like this:
$("form[name='customize'] select, form[name='customize'] input")
or if you're not into repitition, this:
$("form[name='customize']").children("select, input")
A shorter syntax $(selector,parentselector) is also possible.
Example on this page :
// all spans
$("span").css("background-color","#ff0");
// spans below a post-text class
$("span", ".post-text").css("background-color","#f00");
Edit -- I forgot the particular case of several kind of children !
// spans and p's below a post-text class
$("span,p", ".post-text").css("background-color","#f00");
For me your suggestion worked. You could also use
form[name='customize'] select, form[name='customize'] input
Both selectors work as I see it. Maybe the the problem lies somewhere else?
I tried
$("form[name='customize'] select, input").css( 'font-size', '80px' );
on your example HTML. The font size for select and input changed.
--- edit ---
My suggestion above is the right one. It selects just the elements in the customize-form.
Related
I have a search input tag that is being added by a jQuery plug-in:
<input type="search" />
Note that this does not have an ID, CLASS, or NAME. I need the search input tag to look like this:
<input type="search" name="myname" />
A simple solution is for me to update the jQuery plug-in. However, I do not want to do this as it will cause challenges when I upgrade this plug-in in the future.
This JavaScript works properly and adds the name attribute:
$(document).ready(function() {
document.getElementsByTagName("input")[0].setAttribute("name", "myname");
});
The problem is that the "[0]" in this function relies on the search input being the first input field in the form. I do not think this solution is sustainable.
There are other inputs in the form. This is the only one with the type attribute equal to "search." Is there a way to identify it by this attribute? Or, is there another solution you propose?
Thank you for your time!
You can use the document.querySelector:
document.querySelector("input[type='search']")
Below is an example (you can inspect the output to see name attribute):
document.querySelector("input[type=search]").setAttribute("name", "myname");
<input type="search" value="foo" />
<input type="bar" value="bar" />
You can target a selection by anything. So, the selector input[type="search"]' will work.
If you want to apply this to all input's of type search, this is good enough, and you get all of them in here:
$('input[type="search"]')
This works without jQuery too:
document.querySelectorAll('input[type="search"]')
A more targeted approach would be
document.querySelectorAll('div.filter input[type="search"]')
I am new to styling html elements (e.g. input & select in this case), and I am looking to implement a visually combined input / select element. In essence the input and select would still be completely separate as form elements, but based on class and css I would like to inset the contents of the select menu into the right hand side of the input field. Sorry I am no photoshoper, so here is a representation of what it might look like:
------------------------------------------------
| Select text [v] |
------------------------------------------------
As you can see the left hand portion of the input is where you would type the string for the input element, and the select drop down is inset into the border of the input element (the [v] is supposed to be a down arrow button to drop the list). Any links to how to get stared styling something like this or suggestions are welcome.
The following example is very simple. It shows the main thing you would want to do: Since form elements are able to be styled with CSS just as everything else, it is pretty straightforward. This example still has some styling issues with non-firefox browsers, I will improve it a little.
<html>
<head>
<style>
select#selectoption {
border-left:none;
padding:none;
}
input#datahere {
position:relative;
border-right:none;
padding:none;
}
</style>
</head>
<body>
The form below is a simple example.
<form name ="explanation"action="test" method="post">
<input type="text" id="datahere" />
<select id="selectoption" /><option>test</option><option>test2</option></select>
</form>
</body>
</html>
EDIT: An online example of what you want can be seen here: http://jsfiddle.net/xFQMf/3/
The datalist element might help
(Safari doesn't support this, yet).
<input type="text" name="city" list="cityname">
<datalist id="cityname">
<option value="Blida">
<option value="OuledSlama">
</datalist>
use ng-select
with the [addTag] set to true.
Hope it helps someone :)
Is it possible to change the value of an <input type="text"> that has been hidden with a style of display:none? I have some JS that seems to work when the input is <input type="hidden"> but not when it's hidden with display:none. And AFAIK, you can't change an input's type with JS either.
Basically, I want to replace an <input> with a <select>, so I'm trying to hide it and append the <select> element.
Take a look at http://jsfiddle.net/5ZHbn/
Inspect the <select> element with firebug. Look at the hidden input beside it. Change the select's value. The hidden input doesn't change. Is Firebug lying to me?
If you uncomment the other lines of code, then it works.
Actually... I'm pretty sure it is a bug in Firebug now. Most other things correctly update, but firebug doesn't show the updated value when I inspect it.
I think it's a Firebug bug.
That's because if i query (via the console) the value of the input-text field it is in fact updated, it's simply that Firebug doesn't reflect the updated value in the html-tab.
In fact, using the dom-tab the new value is there, even if the actual node's value in the html-tab was not updated.
This seems to happen if you use a "normally visible" element (like an input type="text") or similar. If you, instead, use an "normally hidden" element (like an input type="hidden"), Firebug update its value normally.
I think it's a bug in Firebug, that seems to not update an element's value if it is normally visible but now hidden with css: i'm saying specifically this, because an input with type="hidden" and display:none is updated nonetheless, so it's not simply a problem of elements hidden via display:none .
Hope this helps, i'm about to issue this bug to the Firebug guys.
UPDATE: i'm using Firebug 1.8.4 on Firefox 8 on Win Srv 2K3.
Changing a field's value should work as expected, regardless of any CSS styling. The issue is likely elsewhere.
You can change it as usual:
document.getElementById( 'myinput' ).value = 'Hello';
I got this problem when customizing a magento custom option field, I made some rules from some custom select inputs and needed to save the final value to a hidden custom option text field. For some reason, it didn't work if the field was 'display:none' (maybe due some magento's js?), but it worked when I changed to "visibility: hidden;"
I know my answer is to especific, I tried to make a comment but don't have enough reputation. Hope it helps someone.
One option you have is putting the input box inside a div and then using javascript to change the contents of the div. For example:
<html>
<head>
<title>Input Text To Dropdown Box</title>
<script type="text/javascript">
function swap() {
document.getElementById("contentswap").innerHTML = "<select><option value='cats'>Cats</option><option value='dogs'>Dogs</option></select>";
}
</script>
<style>
#contentswap {
display:inline;
}
</style>
</head>
<body
<div id="contentswap">
<input type="text" name="original">
</div>
<br />
<input type="button" value="Input To Select" onClick="swap()">
</body>
</html>
To make changes visible, you can set the value by SetAttribute
var inputs = document.querySelectorAll('input');
var select = document.querySelector('select');
select.onchange = function () {
inputs[0].value = select.value;
inputs[1].setAttribute('value', select.value);
console.log('changed by input.value: ', inputs[0]);
console.log('changed by input.setAttribute: ', inputs[1]);
};
<input type="text" style="display: none;" value="">
<input type="text" style="display: none;" value="">
<select>
<option>Select value</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
I have a form that I want to be used to add entries. Once an entry is added, the original form should be reset to prepare it for the next entry, and the saved form should be duplicated prior to resetting and appended onto a div for 'storedEntries.' This much is working (for the most part), but Im having trouble accessing the newly created form... I need to change the value attribute of the submit button from 'add' to 'edit' so properly communicate what clicking that button should do. heres my form:
<div class="newTruck">
<form id="addNewTruck" class='updateschedule' action="javascript:sub(sTime.value, eTime.value, lat.value, lng.value, street.value);">
<b style="color:green;">Opening at: </b>
<input id="sTime" name="sTime" title="Opening time" value="Click to set opening time" class="datetimepicker"/>
<b style="color:red;">Closing at: </b>
<input id="eTime" name= "eTime" title="Closing time" value="Click to set closing time" class="datetimepicker"/>
<label for='street'>Address</label>
<input type='text' name='street' id='street' class='text' autocomplete='off'/>
<input id='submit' class='submit' style="cursor: pointer; cursor: hand;" type="submit" value='Add new stop'/>
<div id='suggests' class='auto_complete' style='display:none'></div>
<input type='hidden' name='lat' id='lat'/>
<input type='hidden' name='lng' id='lng'/>
</form>
</div>
ive tried using a hundred different selectors with jquery to no avail... heres my script as it stands:
function cloneAndClear(){
var id = name+now;
$j("#addNewTruck").clone(true).attr("id",id).appendTo(".scheduledTrucks");
$j('#'+id).filter('#submit').attr('value', 'Edit');
$j("#addNewTruck")[0].reset();
createPickers();
}
the element is properly cloned and inserted into the div, but i cant find a way to access this element... the third line in the script never works.
Another problem i am having is that the 'values' in the cloned form revert back to the value in the source of the html rather than what the user inputs.
advice on how to solve either of these issues is greatly appreciated!
I think you want to use find not filter
$j('#'+id).find('#submit')
That should work in practice, though you've got problems there because there are multiple elements with the same id. I'd change your HTML to use classes, or in this specific case, you don't need either:
$j('#' + id).find(":submit")
have you tried using .val()? and instead of .filter(), use .find()
$j('#'+id).find(':submit').val('Edit');
nickf solution works. (just wrote a piece of code to check that). Do check the definition of filter in jquery documentation.
Reduce the set of matched elements to those that match the selector or pass the function's test.
You have use find in this case. Also as nick mentioned having multiple elements with same id is troublesome, especially when you are doing dom manipulation. Better go with appropriate classes.
I have this structure on form,
<input type="test" value="" id="username" />
<span class="input-value">John Smith</span>
Fill Input
when user click on the Fill Input ,
the data from span which has class input-value will be added to value, after clicking a tag the code should be look like this,
<input type="test" value="john Smith" id="username" />
<span class="input-value">John Smith</span>
Fill Input
there are many forms element/input on the single page.
You can do it like this:
$('a.fill-input').click(function() {
$(this).prevAll("input:first").val($(this).prev(".input-value").text());
});
Instead of looking only for the classes, this looks for the span and input just before the button you clicked...this means it works no matter how many of these you have on the page.
Unlike your example though, the value will be John Smith, with the same casing as it has in the span, if you actually want lower case, change .text() to .text().toLowerCase().
$('a.fill-input').click(function() {
$('#username').val($('.input-value.').text());
});
This should suffice for all inputs that you have so structured. It doesn't depend on the names of the elements. Note that prevAll returns the elements in reverse order so you need to look for the first input, not the last in the preceding inputs.
$('.fill-input').click( function() {
var $input = $(this).prevAll('input[type=test]:first');
var $value = $(this).prev('span.input-value');
$input.val($value.text());
});
try:
$('a.fill-input').click(function(e){
$('#username').val($('span.input-value').text());
e.preventDefault();
return false;
});