Can I have some inputs on this ?
Issue
When a form or a parent element of a form is modified, the text that was typed inside the inputs of the form get cleared. As this snipper show :
function modifyParent() {
document.getElementById("parent").innerHTML += "<br>a line get added";
}
<div id="parent">
<form>
<input type="text" id="child">
</form>
<button type="button" onclick="modifyParent()">click</button>
</div>
Hello everyone,
Solution 1
I found a first esay way to prevent it if I know where the parent is modified. As this snipper show
function modifyParent() {
var child = document.getElementById("child");
child.setAttribute("value", child.value)
document.getElementById("parent").innerHTML += "<br>a line get added";
}
<div id="parent">
<form>
<input type="text" id="child" value="">
</form>
<button type="button" onclick="modifyParent()">click</button>
</div>
This solution look great, but only if i know where ans when the parent is modified. Also if i have a multiple inputs i need to loop on document.getElementsByTagName("input").
Solution 2
Since i dont know how many buttons i have and how many inputs, this is my best solution so far :
function modifyParent() {
setInputValues();
document.getElementById("parent").innerHTML += "<br>a line get added";
}
function setInputValues() {
for (var c of document.getElementsByTagName("input"))
c.setAttribute("value", c.value);
}
<div id="parent">
<form>
<input type="text" value="">
<input type="text" value="">
<input type="text" value="">
<input type="text" value="">
</form>
<button type="button" onclick="modifyParent()">click</button>
</div>
It work well for multiple inputs but i have to call the setInputValues() function before i modify any parent everytime. I started to consider to add setInterval on this function but I stop here because i'm starting to go a bit far and it's very likely that their is a better way.
Any help will be apreciated
A cleaner solution is to use a new element for the messages. This way you can set the messages inside a container without messing with the inputs.
const messageBox = document.querySelector(".messages");
function modifyParent() {
messageBox.innerHTML += "<br>a line get added";
}
<div id="parent">
<form>
<input type="text" value="">
<input type="text" value="">
<input type="text" value="">
<input type="text" value="">
</form>
<button type="button" onclick="modifyParent()">click</button>
<div class="messages"></div>
</div>
Another quick notice, innerHTML is vulnerable for XSS attacks Try using createElement and appendChild if possible.
const parent = document.getElementById("parent");
function modifyParent() {
const br = document.createElement("br");
const text = document.createTextNode("a line get added");
parent.appendChild(br);
parent.appendChild(text);
}
<div id="parent">
<form>
<input type="text" value="">
<input type="text" value="">
<input type="text" value="">
<input type="text" value="">
</form>
<button type="button" onclick="modifyParent()">click</button>
<div class="messages"></div>
</div>
Related
I'll start this off by saying I use JS very infrequently, so this is likely a simple mistake. I came across the need to generate a form on the spot when a button is pressed. After some searching, I decided on using the append function from jQuery. Here is the code I wrote:
function replyToComment(commentId) {
var element = document.getElementById("reply-form");
if (element != null) {
element.remove()
}
const html = `
<div id="reply-form">
<label for="comment-form">Comment:</label>
<form method="post" id="comment-form" style="padding-bottom: 10px;">
<input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}"
<div class="form-group">
<div>
<textarea type="text" name="body" maxlength="1500" class="textarea form-control" cols="40" rows="10"></textarea>
</div>
</div>
<input type="text" name="comment-send" style="display:none;" readonly>
<input type="text" name="comment_id" value=${commentId} style="display:none;" readonly>
<button type="submit" class="btn btn-success">Send</button>
</form>
</div>`
$(`#${commentId}`).append(html)
}
When inspecting the final result, the argument passed into the append function is out of order:
I am not sure if the image will load in properly, but if it doesnt, its mostly irrelevant. Am I misusing the append function? Is there another way to do this that will handle the data I want to pass in properly?
It appears that you're neglecting to close one of your input tags.
You have:
<input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}"
This should be:
<input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}" />
I have set of input boxes to add names and designaions.and iwant to print those in a <p> tag when user click print button. how to proceed.
<div class="form-group">
<label for="inputRegNo" >Name & Designation<span style="color:#c0392b;padding-left:5px;">*</span></label>
<div class="form-group">
<input required type="text" name="fname[]" class="fname" onkeyUp="document.getElementById('refa5').innerHTML = this.value" placeholder="Name" />
<input required type="text" name="lname[]" placeholder="Designation" />
</div>
</div>
<div class="form-group">
<label for="inputRegNo" ></label>
<div class="form-group">
<input type="text" name="fname[]" placeholder="Name" class="fname" onkeyUp="document.getElementById('refa5').innerHTML = this.value" />
<input type="text" name="lname[]" placeholder="Designation" />
</div>
</div>
print
<div>
<label>Name & Designation</label>
<p id="refa5"> - </p>
</div>
its looks you are new in javascript.. it's simple give the name to all the input field like
<input type="text/checkbox" name="txtName">
and in javascript you can access this field value by
<script type="text/javascript">
var name = document.getElementsByName("txtName");
</script>
if you wish to print the element on button click simply specify their click event on javascript like
function onClick() {
alert("helo from click function");
}
and then on button ..
<input type="button" onclick="onClick()">
w3schools is a great resource for this. Here is some example code on how to do this :
<button onclick="myFunction()">Click me</button>
<input id="inputID"></input>
<p id="demo"></p>
<script>
function myFunction() {
var inputID = document.getElementById("inputID").value;
document.getElementById("demo").innerHTML = inputID;
}
</script>
What the code above does is it takes the value of an input, then it sets the innerHTML of a <p> element to it. You can obviously do this with other things like <h1> elements as well.
I have tried to use document.getElementById("ques").value; to get the input from the user to append to a new div that will be displayed in , This method has not worked however and I am not sure where to proceed from here.
What can I do to append the question to the div and then display the div?
</section>
<div id="questiondiv">
<form action= "javascript:myFunction()" >
<input type="text" name="question" id="ques" value="" placeholder="Ask a Question"> <br> <br>
<input type="text" name="elaboration" id="elab" value="" placeholder="Elaborate"> <br> <br>
<input type="submit" value="Submit">
</form>
</div>
<script>
function myFunction()
{
var div = document.createElement("div");
var node = document.getElementById("ques").value;
div.appendChild(node);
var element = document.getElementById ("placeholder")
element.appendChild(para);
}
</script>
Javascript code
<script>
function disableBtn() {
document.getElementsByTagName("INPUT")[1].removeAttribute("disabled");
}
</script>
html code
<form>
<p>
<label for="uname">* User Name :</label>
<br>
<input type="text" name="txtuname" id="uname" onclick="disableBtn()" value="">
</p>
<div style="text-align:center">
<p>
<input name="username" type="submit" id="submit" value="Change Username" disabled="disable">
</p>
</div>
<p>
<label for="fullname">* Full Name :</label>
<br>
<input type="text" name="txtfullname" id="fullname" value="">
</p>
<div style="text-align:center">
<p>
<input name="fullname" type="submit" id="submit" value="Change Fullname" disabled="disable">
</p>
</div>
<p>
<label for="address">* Address :</label>
<br>
<input type="text" name="txtaddress" id="address" value="">
</p>
<div style="text-align:center">
<p>
<input name="address" type="submit" id="submit" value="Change Address" disabled="disable">
</p>
</div>
</form>
I want to add an onclick event in each input tag which executes the function disableBtn, but I want this code to work on any input I click. I do not want to have to give a number like this :
document.getElementsByTagName("INPUT")[1].removeAttribute("disabled");
for every input element.
I think I should use this but I don't know where to put it.
You want to loop over every input element and add an event? document.getElementsByTagName("input") returns an array, so you can use a loop to go over it.
JavaScript:
// This is a function which disables an input element
// Notice I used "this" instead of document.getElementsByTagName("input")[some number]
// "this" refers to the input element that was clicked
function disableBtn() {
this.parentNode.nextElementSibling.querySelector('input[type="button"]').disabled = false;
}
// Get every single input element
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; ++i) {
// Loop through the input elements, and add a "click" event
var input = inputs[i];
input.addEventListener("click", disableBtn, false);
}
Code:
Change your function to this:
function disableBtn(el) {
el.parentNode.nextElementSibling.querySelector("input").disabled = false;
}
And the handler to this:
onclick="disableBtn(this)"
DEMO: http://jsfiddle.net/dcg8gzqt/
Explanation:
So now the handler passes the current element that was clicked to the disableBtn function.
That function then...
takes the clicked element and traverses up to its .parentNode
moves ahead to the .nextElementSibling, which is the next div,
then searches inside that div using .querySelector() for the first input it finds.
sets the .disabled property of the input to false
I checked for duplicates but didn't find an exactly same problem so here we go. I have two radio-buttons and I need to return their values upon form submission. The problem is that when I click the submit button I always get the same radio-button value. Here is some code:
<div id="automatic">
<p>Title1
<input type="radio" id ="mode" name="mod" value="auto" >
</p>
</div>
<div id="selection">
<p>Title2
<input type="radio" id ="mode" name="mod" value="nonauto" >
</p>
</div>
<form id="search" action="test.jsp" method="GET" onsubmit="if (document.getElementById('search_text').value.length < 1) return false;">
<input id="search_text" type="text" name="q">
<input id="searchButton" type="submit" onclick="displayRadio()" value="Search" autocomplete="off" size="115">
</form>
And here is the Javascript code:
function displayRadio() {
alert(document.getElementById("mode").value)
}
Use different ids and use your function to lookup which of them is checked and return the value of that.
function displayRadio() {
var modeauto = document.getElementById('modeauto');
var modenoauto = document.getElementById('modenoauto');
var value = modeauto.checked ? modeauto.value : modenoauto.value;
alert(value);
}
I would recommend using jQuery for simplicity though.