jQuery get current element (x)html - javascript

I have the next input element:
<input type="text" name="username" id="username" value="user name"
helper="formText" defvalue="user name" class="filling" />
How can I get this html by id "username" with help of jQuery?
I try to make it with get(), html(). But I want to get html of current element.
Thank you in advance.
Sorry for my english.

You can't get the exact HTML (as different browsers handle this differently), but closest you can get is appending a cloned version to a temporary element and taking the .innerHTML of that, like this:
var html = $("<div/>").append($("#username").clone()).html();

Related

Dynamically adding contents to existed div element

I have created div element for text field, i need to add contents dynamically to that div element. As a novel I'm a little bit confused, I have tried using id for the input tag, can I do it by using javascript?.
<div>
<input type="text" name="fullname" id="name">
</div>
please see above code, please instruct.
To change the value of an input element you have to set the value property of the element like the following way:
document.getElementById('name').value = 'New value';
<div>
<input type="text" name="fullname" id="name">
</div>

How can I use setAttribute on an input without an ID or class attribute?

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"]')

How to find id of input field when getElementById does not work?

I'm trying to write a userscript javascript code in Firefox that will fill out a form. The form can be found here. The first input to fill appears to have id = "txtFirstName" yet when I try to find the element using getElementById, my console log returns null.
This is the code I'm using.
console.log(document.getElementById("txtFirstName"));
I eventually want to use a bunch of statements like:
document.getElementById("txtFirstName").value="SeanM";
How can I find the id of the input field so that I can assign a value to it?
Nested very deep in their code is this:
<input name="txtFirstName" id="txtFirstName" maxlength="20" value="" required="required" autofocus="autofocus" type="text">
I didn't wait for my DOM to fully load. Thank you all for the help.

Submit entire dom (values included)

Is it possible to submit an entire dom object, values included?
Assuming I have something like that:
<input type="text" name="name" id="name"
value=""/>
Once the user enters it's name (for example, "my name", I'd like to receive the entire DOM object. so on the server I'll get
<input type="text" name="name" id="name"
value="**My Name**"/>
I'm aware I can send the entire innerHTML but that doesn't provide me the values the user entered.
It's weird as hell, but you could grab the whole body (or a portion via #id) using jQuery:
​$(function(){
$('form').on('submit',function(e){
e.preventDefault();
var content = $('body').html();
alert(content);
});
});​

document.getElementById doesnt work with "input id", how can I do it? [+Greasemonkey]

I have this line on a website
<input type="text" autocomplete="off" value="" maxlength="20" class="shipBox" name="firstName" id="firstName">
and I want my greasemonkey to automatically fill this...
I'm trying this but had no success
document.getElementById("firstName").setAttribute("autocomplete", "on");
document.getElementById("firstName").value = "Bruno"
What you're doing is basically the correct way.
The usual reaqson for this not working is a second element with the same ID somewhere in the document.
By the way, setAttribute is not the recommended way of setting an attribute in HTML, as I've been reminded today. A simple ...getElementById("firstName").autocomplete = 'on' will do.

Categories