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>
Related
I am trying to get <span> tag value in to text.
Here is what I tried:
<span id="spanval">Hello</span>
<input type="text" name="username" id="name" value="">
jQuery:
var hi = jQuery("#spanval").text();
$("#name").val(hi);
How can I get value of span into text box?
Fiddle
In your Fiddle you forgot to include jQuery which is needed for your code to work. You can download jQuery from here or include a cdn hosted jQuery from e.g. here. Here is your code with included jQuery and it's working as expected.
var hi = jQuery("#spanval").text();
$("#name").val(hi);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="spanval">Hello</span>
<input type="text" name="username" id="name" value="">
You can choose one of the available JQuery version from dropdown options in Fiddle
You can use vanilla Javascript as jquery is not included
Html
<span id="spanval">Hello</span>
<input type="text" name="username" id="name" value="">
Javascript
var hi =
document.querySelector("#spanval").innerHTML;
document.querySelector("#name").value = hi;
<span>
<input name="" autocomplete="off" label="" class="form-control mandatory field-mandatory" placeholder="">
<span class="goog-combobox-button"/>
<input type="hidden" value="3" id="ctl00_cntMainBody_OBJECT_ONE__PMLookupField" name="ctl00_cntMainBody_OBJECT_ONE__PMLookupField">
</span>
I would like to find out if there is a way, using jQuery, to find if the input above the one with id=ctl00_cntMainBody_OBJECT_ONE__PMLookupField has a css class field-mandatory. There are many spans on the page with similar to this one. I am working within the existing structure of html with no option to change. Since the input has no id the only way to locate it is by using the input below it that has an id.
Find each hidden input and target the sibling you want :-
$("input[type='hidden']").each(function() {
var inputAbove = $(this).siblings('input.field-mandatory');
// DO SOMETHING
});
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 trying to hide a span but having some trouble doing so. I want to get all the spans based on their for tag value and simply hide them. My question is, is it possible to get span's where there for tag equals something?
For example:
<input type="text" id="Address1" />
<span for="Address1" class="field-error">Boo</span>
<input type="text" id="Address2" />
<span for="Address2" class="field-error">Hoo</span>
JSFIDDLE
JQUERY
$("#btn1").click(function() {
$("span.field-error").hide();
});
Thanks in advance, DS.
You may try this
$("span[for='Address1']").hide();
But it's not valid for span, instead you can use data- prefix for custom attributes, like
<span data-for="Address1">some text</span>
Then, js could be
$("span[data-for='Address1']").hide();
An example.
<input type="checkbox" name="AvatarfileSelected" value="image"
id="AvatarfileSelected" onclick="$('#extra').hide('slow')"/>
<span style="color:#538f05;">Change Image</span>
<div id="extra">
<input type="file" name="avatarfile" id="avatarfile"></input>
</div>
The above code doesn't work. Could someone show me the mistakes?
You probably didn't include jQuery...
Use vanilla javascript:
onclick="document.getElementById('extra').style.display = 'none'";
Instead of:
onclick="$('#extra').hide('slow')"
(Or include jQuery if you want to use it.)
BTW, <input> doesn't have a closing tag: </input>
Replace:
<input type="file" name="avatarfile" id="avatarfile"></input>
With:
<input type="file" name="avatarfile" id="avatarfile" />
Take out the onclick event from the HTML markup and do it in unobutrusive way. Make sure you bind your event functionalities in document ready event.
Use it like this
$(function(){
$("#AvatarfileSelected").click(function(){
$("#extra").hide();
});
});
Jsfiddle sample : http://jsfiddle.net/p9tdf/1/