I've got a simple HTML form and for some reason jQuery cannot find the element I'm looking for.
HTML:
<form id="form">
<fieldset>
<table>
<tr class="row">
<td class="label">Street</td>
<td class="field"><input type="text" size="50" value="" id="s.street"></td>
</tr>
</table>
</fieldset>
<fieldset>
<tr class="row">
<td class="label">Street</td>
<td class="field"><input type="text" size="50" value="" id="b.street"></td>
</tr>
</table>
</fieldset>
</form>
jQuery :
$(document).ready(
function() {
$("input[id='s.street']").keyup(function() {
$('#b.street').val($(this).val());
});
});
I get no errors in the console log.
If the element HAS to have that exact id, use:
$('#b\\.street')
ID's should be unique, so you shouldn't have to filter with the input tag. Additionally, you need to add an escape sequence before the . in your ID name. $('#s\\.street') is the correct selector. I would actually suggest not using the ....
your id names conflict with the jquery selector syntax.
When defining an id for an element do not use the # . or any spaces within your ID
YOu have a problem in your naming convention. replace the . in the name to a hyphen.
So:
<input type="text" size="50" value="" id="s.street">
Becomes
<input type="text" size="50" value="" id="s-street">
and you select in with jquery like so:
$("#s-street");
Sizzle (the javascript selector library that jQuery implements) will see the s.street as an element s or b with a class of street. as opposed to an element with id of s.street.
from here: What are valid values for the id attribute in HTML? it looks like jquery has trouble with ids that have periods and colons. so try removing those and see if it works.
Related
I am getting the following warnings when we use with the same id names in two different form tags.
[DOM] Found 2 elements with non-unique id
Here is my HTML snippet:
<div class="modal-dialog">
<form action="" method="post" id="myid-1" name="myid-1">
<input type="text" class="form-control" id="Job_Name" name="Job_Name" required="">
<label for="Job_Name">Job Name<span class="text-danger">*</span></label>
<button type="submit">Submit</button>
</form>
</div>
<div class="modal-dialog">
<form action="" method="post" id="myid-2" name="myid-2">
<input type="text" class="form-control" id="Job_Name" name="Job_Name" required="">
<label for="Job_Name">Job Name<span class="text-danger">*</span></label>
<button type="submit">Submit</button>
</form>
</div>
How do I resolve "Found 2 elements with non-unique id" warnings?
you need to change id="Job_Name" to be unique e.g. id="Job_Name1" id="Job_Name2" etc. as ID must be unique in the DOM.
It will create conflict when you want to select elements using document.getElementById('Job_Name') or using jQuery $('#Job_Name') as you wont be able to get the second or other elements with same id. you will need to use index and querySelectorAll which will then defeat the purpose of using Id at first place.
<input type="text" class="form-control" id="Job_Name" name="Job_Name" required="" >
Duplicate input tag in two different forms
You have to use different id for different elements
<input type="text" class="form-control" id="Job_Name" name="Job_Name" required="">
You need to change de id for each input
Becouse You mentioned the two input element with same id ('Job_Name') in same page
You cannot give the same id in same page to two different element
id is an identifier that defines the identity of the element. It is designed to act like a key to the element and hence it needs to be unique.
Check this answer..
https://stackoverflow.com/a/2187788/8230086
Change the IDs on your inputs as they are what is causing your problem.
As a general rule you don't want to have the same id's on any of your elements.
id suggest using something along the lines of job_name1/job_name2
Just use new { id = "" } for one of the two fields:
#Html.HiddenFor(m => m.Name, new { id = "" })
if you are using react native web or expo pwa use nativeID in place of id
<input nativeID="someId"/>
excuse my ignorance but i would really appreciate your help.
I am new to HTML and i am just trying to add a variable inside an HTML link (ex. http://www.google.com/variable/).
The variable will be text type and i want to replace the text when i type something in a search bar.
(ex. search for "cars" and have www.google.com/cars)
Any thoughts how i can start this?
Much appreciated.
Write following javascript function:
function set(me)
{
var link = 'http://www.google.com/';
document.getElementById('result').value = link + me.value;
}
I have written following HTML lines to illustrate:
<div>
<input type="text" id="test" onkeyup="set(this);" />
<input type="text" id="result" />
</div>
You can call this function on onkeyup or onchange events as required.
Include in your Html.
<form method="get" action="http://www.google.com/search">
<div style="border:1px solid black;padding:4px;width:20em;">
<table border="0" cellpadding="0">
<tr>
<td>
<input type="text" name="q" size="25" maxlength="255" value="" />
<input type="submit" value="Search in Google" />
</td>
</tr>
<tr>
<td align="center" style="font-size:75%">
<input type="checkbox" name="sitesearch" value="rotinadigital.net"/>Only my site<br />
</td>
</tr>
</table>
</div>
</form>
If you want variables in strings then take a look at template literals. You can use them like so:
var variable = document.getElementsByTagName('input')[0].value;
var url = `https://www.google.com/${variable}/`;
// same as 'https://www.google.com/' + variable + '/'
It sounds like you're trying to achieve an effect similar to Google Instant though. Afaik that's just done through standard anchor links and using javascript to (rather radically) manipulate the contents of the page. Actually navigating to a different page would cause a rather noticeable delay.
when i'll click input field div will create dynamic,only using input field.it is possible to create div without using append(attr) in jquery.i don't know please help me
<input type="text" id="date_id" class="date" />
i'm expecting:
<input type="text" id="date_id" class="date" />
<div id="div_id"></div>
try this
$("#date_id").after('<div id="div_id"></div>')
there is several method are available in Jquery to create dynamic element except .append(), like
$("#elementId").after('<div id="div_id"></div>')// insert after the element
$("#elementId").before('<div id="div_id"></div>') // insert before the element
('<div id="div_id"></div>').appendTo($("#elementId")); // insert into the element
Try using .one() to prevent duplicate #div_id elements in document , .insertAdjacentHTML
$("#date_id").one("click", function() {
this.insertAdjacentHTML("afterEnd", "<div id=div_id>div_id</div>")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<label>
<input type="text" id="date_id" class="date" value="" />
</label>
I have some HTML in my page within a DIV.. There are multiple instances of it throughout the page, and its setting textbox (or other items)..
Id like to do a JQuery search and replace all occurrences of the HTML within a DIV (apexir_rollover_content) to change the item to a simple display.. There are multiple instances of the DIV..
Here is an html snippet..
<div id="apexir_rollover_content" style="height: 210px;">
<a href="javascript:void(false);">
<input type="text" value="" maxlength="2000" size="6" name="f05"></input>
</a>
<a href="javascript:void(false);">
<input type="text" value="23162" maxlength="2000" size="6" name="f05"></input>
</a>
I want to change the line below so that it just has the value as standard text..
<input type="text" value="23162" maxlength="2000" size="6" name="f05"></input>
I can't do a global replace, as there will be other textbox items that I need to keep...
If someone could help, Id be grateful...
Thx
Normally you would want to have a class or id to find the correct element. Since you do not have this, you can
1: use a jQuery selector to find the input element that needs to be replaced
jQuery("input[type='text']")
2: move one element above
.parent()
3: and replace the input field
.html('<input type="text" value="23162" maxlength="2000" size="6" name="f05"></input>')
I have created a jsFiddle with the code: http://jsfiddle.net/sdhxybj1/
This is the JS jQuery code that you can use:
jQuery("input[type='text']").parent().html('<input type="text" value="23162" maxlength="2000" size="6" name="f05"></input>')
Moreover, if You intend only replace as in the previous solution only some inputs the jquery statement can be filtered as in the following:
$("input[type='text']").filter('[name="f05"]').parent().html('<input type="text" value="23162" maxlength="2000" size="6" name="f05"></input>');
But if You intend to replace each anchor with the inner input so You could use:
$('#apexir_rollover_content a').each(function() {
var innerEle = $(this).children();
$(this).replaceWith(innerEle);
});
I am a true beginner in html/js/jquery.
I am trying to save user input into an array, then later I want to write all that information from that array into an xml file.
My Problem is that my form consists of multiple Jobs which will all have the same input fields.
This is a short example of the first job:
<form>
<table class="wrapper">
<tr>
<td style="text-align: left">First Digit:
<div> <input id="fDigit" type="text" name="Job1[]" /></td>
<td style="text-align: left">System:
<div> <input id="system" type="text" name="Job1[]" /></td>
<td style="text-align: left">SAP Modul:
<div> <input id="sapModul" type="text" name="Job1[]" /></td>
</tr>
<tr>
<td style="text-align: left">Country:
<div> <input id="country" type="text" name="Job1[]" /></td>
<td style="text-align: left">Duration:
<div> <input id="duration" type="text" name="Job1[]" /></td>
<td style="text-align: left">Step Number:
<div> <input id="stepNumber" type="text" name="Job1[]" /></td>
</tr>
<tr>
<td style="text-align: left">Optional Text:
<div>
<textarea align ="left" id ="optionalText" name="Job1[]" cols="20" rows="2"> </textarea>
</div>
</td>
</tr>
</table>
</form>
I have many more of those in my Script.
What I want to do now is saving the Information of every Job into an Array, meaning Job1[]: with the user input of every field which is shown above , Job2[]: different user input but similar input field with the same name.
There might be an easier solution to do this but I just can't figure one out.
Sorry if this is a too stupid issue but i tried to find solutions for ages and could not find one which helped me out.
Thanks in advance!
For a beginner, the easiest solution might be to use a component that does form serialization for you. Your form should have a name (attribute), and an id is probably going to be useful too.
I've found form2js to be very practical, and it can manage collecting similarly named fields into an array.
I also made a small fiddle that shows one way to collect the info yourself, for example like this.
var job1 = [];
$('[name="Job1[]"]').each(function(index, inputField) {
job1.push($(inputField).val());
});
console.log(job1);
you don't need to use multiple array names because the javascript is client side
just use Job1[]
I suggest you organize your data as a JSON object, for example
[{"Country": a, jobs:[your array]},{"Country":b, jobs:[your array]}]
and to insert a value to array, you can use: your_array.push(value)
Hope this help.
You can use a two dimensional array in your inputs name with the first index being the row index and the second the column name, something like Jobs[0][Country]. Then in the end you will have all your data in one array.
Also, if you're repeating the markup you posted for every job, avoid using id attributes on your inputs as this would produce invalid markup. Id attributes must be unique in a HTML page, use classes instead.