Is it valid to replace elements with <element /> to <element></element>. In this case i want to have,
<input {attributes}></input>
just so i can append validation data within... Also could this be possible from a <br /> or <hr /> etc?
The <input> tag does not have a </input> and there is no need for one. Same for <br> and <hr>. You can put validation data as attributes on the input tag (or any tag) with custom attributes like this:
<input type="text" data-validate="num">
If what you mean by validation is separate HTML that you want to display near the input tag, then put it in it's own tags before or after the <input> tag:
<input type="text"><span class="validHint">This field accepts only numbers</span>
<input></input> is not valid in neither HTML4.01 nor HTML5.
According to W3C's validation service: (reason highlighted)
Validation Output: 1 Error
Line 9, Column 15: Stray end tag input.
<input></input>
So here you go, you can not replace <input> with <input></input>.
If you want to attach data to elements, why not use data-* attributes? (e.g. <input data-color="red" />) This is valid, and should be just as easy to implement.
In classic HTML up to and including HTML 4.01, <input></input> is invalid. In practice, browsers ignore the stray end tag. They do not ignore the content between the tags, so <input>foo</input> achieves nothing as compared with <input>foo. HTML5 does not propose to change this.
In XHTML, <input></input> is valid but should not be used on the Web, according to XHTML specs. If you put any content between the tags, it becomes invalid, because the input element has been declared with EMPTY content model.
So you should take a completely different approach. It really depends on what you are trying to achieve, and should be discussed under some other heading. Depending on the problem, the solution could be one of the new HTML5 attributes, or a data- attribute, or a hidden field, or an element hidden some way, or maybe just data in the document tree.
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 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 multiple form input elements. I would like to add a pattern attribute and a title attribute to each one, but rather than do so manually, I want to dynamically add the same pattern and title to each form input using JavaScript/jQuery.
This is what the form input fields look like now:
<input type="text" class="form-control" id="paycheck" />
<input type="text" class="form-control" id="investments" />
<input type="text" class="form-control" id="otherIncome" />
As an end result I would like each form input to look like the following:
<input pattern="\d*\.?\d*" title="blah blah blah" type="text" class="form-control" id="paycheck" />
etc...
As examples, I've tried the following for the pattern attribute, but none of them work:
$( "input" ).attr("pattern", '\d*\.?\d*');
$( "input" ).attr("pattern", \d*\.?\d* );
$( ".formClass input" ).attr("pattern", '\d*\.?\d*');
$( "input" ).prop("pattern", '\d*\.?\d*');
$( "input" ).prop("pattern", \d*\.?\d* );
$( ".formClass input" ).prop("pattern", '\d*\.?\d*');
...imagine something similar for the title attribute...
In the end, I found that the syntax was correct. There was an error somewhere else in the code preventing that statement from being run. Just goes to show that you should always make sure everything is good elsewhere in your code first.
However, I did learn a few things from this which I will note for others:
The jQuery .attr() function will dynamically add any attribute you specify, so you don't need to put pattern="" in your form elements first in order for the value to be added or changed.
Of important note, if you are going to dynamically add a regex using jQuery, YOU NEED TO ESCAPE certain characters.
The regex was originally \d*\.?\d* but in the DOM it was showing up as d*.?d* so when sending the regex through jQuery I escaped the backslashes like so: \\d*\\.?\\d*.
Finally, I did not have to make my fields required for the regex to work. The HMTL5 validation only threw an error for me if I included incorrect text in the field, and when it threw an error, the form was not submitted. If I left the fields empty or put correct text in the fields, then no error was thrown. I'm up for an explanation if I'm wrong.
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.