The elements & the code.
HTML
<input value="" name="data[Filter][address]" type="text" />
<input value="" name="data[Filter][client]" type="text" />
<input value="" name="data[Filter][tenant]" type="text" />
<input value="" name="data[Filter][contract_end_date]" type="text" />
Javascript
console.log($("[name*='data\\[Filter\\]'][value!='']").serialize());
The problem: even if they are all empty, they are serialized.
Why?
You're looking at the value attribute. You can filter off of the value property instead:
http://jsfiddle.net/Y2P6w/
var $filledElems = $("[name*='data\\[Filter\\]']").filter(function () {
return $.trim(this.value).length;
});
The point is when the input tag gets inserted to the page, no matter it is in the page load or in your dynamic JavaScript codes, if it has the value attribute your selector query would use it or if you change your input's value using setAttribute in JavaScript or .attr() in jQuery, their value attribute actually gets changed, but if you change it with .value in JavaScript or .val() in jQuery or simply change the value in the page as a textbox, the attribute won't change, so you better not use value attributes in your selectors, because they are not reliable, an instead use $("[name*='data\\[Filter\\]']") and filter it as #JasonP has pointed out.
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 have input :
<input type="text" id="nameProduct">
I want set value :
document.getElementById("nameProduct").value="hello";
How can I do it before page load input ?
You can't do it with JavaScript, the dom element object can only get after it loaded. The right way is to set value attribute for input.
<input type="text" id="nameProduct" value="hello">
A simple hack you can do is hide element initially and show it after value updated using JavaScript.
var ele=document.getElementById("nameProduct");
ele.value="hello";
ele.style.display='block';
<input type="text" id="nameProduct" style="display:none">
I guess this is pretty basic yet I don't know how to solve this puzzle. What I have is two inputs generated by a plugin in Wordpress. What I want to do is to change the placeholders in the fields.
The problem is that the fields ID (which I use to call the inputs via Javascript) is the same, resulting in that only the first inputs placeholder changes.
The auto-generated HTML:
<input type="password" placeholder="Lösenord" name="swpm-19" id="swpm-19" value="" class="swpm-text swpm-large required ">
<input type="password" placeholder="Retype password Here" name="swpm-19_re" id="swpm-19" value="" class="swpm-text swpm-large required ">
The Javascript:
<script type="text/javascript">
jQuery(document).ready(function($){
$('#swpm-19').attr("placeholder","Lösenord");
});
</script>
I have no idea how to call the second input since the ID's are the same. What I did notice is that the names of the inputs is different. The second inputs name is "swmp-19_re". Would it be possible to fetch the input in the Javascript via the name instead of the ID?
You cannot have duplicate id, this is invalid document.
You can use the attribute value selector to select the elements by using name attribute value.
$('input[name="swpm-19"], input[name="swpm-19_re"]').attr('placeholder', 'Lösenord');
You can also use starts with as
$('input[name^="swpm-19"]').attr('placeholder', 'Lösenord');
For more information on the type of CSS (attribute) selectors that jQuery supports check this page.
Playing around with making a small data binding javascript library but I'm a little newer to javascript. Is there a way to just find the element, and all enclosing elements that have the data-bind attribute defined?
<form data-bind="Customer">
<input type="text" id="name" data-bind="Name" data-bind-type="text" />
<input type="text" id="birthday" data-bind="Birthday" data-bind-type="text" />
<input type="text" id="address" data-bind="Address" data-bind-type="text" />
</form>
I want to define a function where I just pass in the "Customer" value and it will find the tag that has the data-bind = "Customer" (form in this case) and all tags within said containing tag that have the data-bind attribute defined. In this case it would return all 3 input tags so that I could examine them further.
Everything I've seen using jquery to do this is showing that I would need to know the "form" or the tag id to do this, but I'd prefer not to have to specify tag (like form) or id.
You can at all data-bind elements within a particular data-bind element in this way:
$('[data-bind="Customer"] [data-bind]');
If you want to wrap that in a function, for instance if you need to access other wrapper elements with a different data-bind attribute value, you could do:
function getBoundElms(name) {
return $('[data-bind="' + name + '"] [data-bind]');
}
$('[data-bind="Customer"]').children('[data-bind]')
look at this fiddle
http://jsfiddle.net/QBM5/M9eea/
I have a hidden input in the manner below:
<div id="message">
<input id="hiddeninput" type="hidden">
<span>Message with submit button <input type=button id="confirm" value="Submit"></span>
</div>
The hidden input is given a value after a jQuery POST. I need to retrieve the value that is set, and send it in another jQuery POST.
Interestingly, I get this:
<input id="hiddeninput" type="hidden">34345</input>
after fetching the value from the server in the first jQuery post.
Just $("#hiddeninput").val() does not retrieve the value which I want to send.
What is the correct way to do it in my example?
EDIT: In JQuery, This is how I set the value to the hidden field:
$.post("post.php", function(data){
if(data.length > 0){
var resultObj = eval(data)[0];
if(resultObj.SomeNumber >= 0)
{
$("#hidden").html(resultObj.SomeNumber);
}
});
You have to set the value of the hidden field like this, then it should work
<input id="hiddeninput" type="hidden" value="34345" />
The hidden element
<input id="hiddeninput" type="hidden">
does not have the value attribute. It should be like
<input id="hiddeninput" type="hidden" value="someValue">
$("#hiddeninput").html() would retrieve 34345 from the structure as you show although as stated above the value attribute should be used on a hidden field and then val() will work.
Since <input id="hiddeninput" type="hidden">34345</input> is not the "right" way to format the input tag,a s opposed to <input id="hiddeninput" type="hidden" value="34345"/> you need to use $("#hiddeninput").text()
try explicitly adding the value tag to the input elemeent before the post adds it i.e.
<input id="hiddeninput" type="hidden" value="">
If that doeesn't work have a look at this thread:
jquery selector can't read from hidden field