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.
Related
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>
I have a one word <p>, and I'm looking to change the content of that paragraph to the value of a input box. It's really simple but I'm new to JavaScript and jQuery.
This is the paragraph to change
<p class="editor-example" id="screen-name">Name</p>
and this is the form and the button I'm using to get and apply the change
<form id="info">
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>
Making the paragraph automatically change when the input box changes instead of a button would be handy if you want to take your time.
Thanks!!
Put the button inside the form and add an event listener to it. Then grab the value from the input and use innerHTML to replace the content inside p tag
document.getElementById('apply').addEventListener('click', function() {
document.getElementById('screen-name').innerHTML = document.getElementById('nameID').value.trim()
})
<p class="editor-example" id="screen-name">Name</p>
<form id="info">
<input id="nameID" name="name" type="text" size="20">
<button id="apply" type="button">Apply</button>
</form>
You need to write keypress event for the text box
$("#text").keypress(function() {
$("#p").html($("#text").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p">p</p>
Please change the value of imput to change p: <input id="text"></input>
You can do like this:
$(document).ready(function(){
$("#nameID").keyup(function(){
var name = $("#nameID").val();
$("#screen-name").text(name);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="editor-example" id="screen-name">Name</p>
<form id="info">
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>
As you said:
Making the paragraph automatically change when the input box changes instead of a button would be handy if you want to take your time. Thanks!!
In Jquery:
$(document).ready(function(){
$('#nameID').keyup(function(){
$('#screen-name').text($(this).val());
});
});
In html:
<p class="editor-example" id="screen-name">Name</p>
<form id="info">
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>
$("#apply").click(function() {
$("#paragraph").text($("#nameID").val());
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<p id="paragraph">This Text changes from the form below</p>
<form>
<input id="nameID" type="text" >
<button id="apply" type="button">Apply</button>
</form>
I am currently trying to figure out how to keep reference to individual dynamically added input fields. I have a modal popup as follows:
<div ng-controller="SamplesQueryController">
<button ng-click="toggleModal()" class="btn-splash-small">Add Sample</button>
<modal title="Create New Sample" visible="showModal">
<form role="form">
Sample Name:<br>
<input type="text" ng-model="newSampleName.sampleName">
<br> Attribute 1 Name:<br>
<input type="text" ng-model="newAtt1Name.att1Name">
<br> Attribute 1 Value: <br>
<input type="text" ng-model="newAtt1Value.att1Value"> <br>
<button id="submitSample" ng-click="createSample();toggleModal()">Submit
Sample</button>
<button id="addAttribute">Add Attribute</button>
<button ng-click="toggleModal()">Close</button>
</form>
</modal>
</div>
which currently has an input field for att1Name and att1Value, I have an addAttribute button which should add 2 new input fields (for att2Name and att2Value). I can dynamically create the inputs using a method such as:
<input type="text" ng-repeat="myinput in myinputs" ng-model="myinput">
</input>
but how can I keep reference to each of the typed in values in the input fields and how can I create 2 fields for each element in myinputs
Preferably, I would be storing these values in some sort of structure like attributes.att1.name, attributes.att1.value, attributes.att8.name, etc
You'll want to have your model as an Array that contains Objects, which has the property 'name' and 'value' initiated.
Then it's pretty easy to create a ng-repeat div, that contains 2 text input fields:
<div ng-repeat="input in inputs">
<input type="text" ng-model="input.l">
<input type="text" ng-model="input.v">
</div>
Then you can subsequently add the fields by pushing newly initiated object to the $scope.inputs.
function add() {
var obj = {attr1Name: '', attr1Value: ''};
$scope.inputs.push(obj);
}
Working fiddle here: https://jsfiddle.net/ccvLhmps/
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h2>Cost Calculator</h2>
<p></p>
<p></p>
<p></p>
<div ng-app>
<input name="amount" ng-model="a" placeholder="Amount" />
<input name="adjustment" ng-model="b" placeholder="Adjustment" />
<input name="advance" ng-model="c" placeholder="Total" value='{{ a-b}}' />
<input name="balance" placeholder="Total" readonly required value='{{ a-b-c}}' />
</div>
</body>
</html>
I have a homemade modal (not bootstrap) that I have inserted a form into that I need to use JS to retrieve the values of:
<div id="openModal" class="modalDialog">
<div>X
<h2>Please contact me with any questions or to request a Free Home Market Analysis</h2>
<!--<form id="contact_form">-->
<p id="fname" class="form_items">
<input type="text" name="fname" id="fname" placeholder="First Name" required />
</p>
<p id="lname" class="form_items">
<input type="text" name="lname" id="lname" placeholder="Last Name" required />
</p>
<p id="email" class="form_items">
<input type="email" name="email" id="email" placeholder="Email" required />
</p>
<p id="phone" class="form_items">
<input type="tel" name="phone" id="phone" placeholder="Telephone" />
</p>
<p id="comments" class="form_items">
<textarea rows="4" cols="50" name="message" placeholder="Comments" id="message"></textarea>
</p>
<p>
<button class="submit" type="submit" onclick="submitForm();">Submit</button>
</p>
<span id="status"></span>
<!--</form>-->
</div>
</div>
<input type="text" id="test"/>
<button onclick="submitForm()">Hi</button>
The test input and button is an example of what does work, when outside of the modal. Here is the JS:
function submitForm(){
var xmlhttp = new XMLHttpRequest();
var fn = document.getElementById('fname').value;
var ln = document.getElementById('lname').value;
var e = document.getElementById('email').value;
var p = document.getElementById('phone').value;
var m = document.getElementById('message').value;
alert(fn);
var test = document.getElementById('test').value;
alert(test);
}
The first alert(fn) alerts "undefined" while the second alert(test) alerts the value I enter into the test input box.
Why is this and what is the workaround? I tried making a jsfiddle: https://jsfiddle.net/k1g9dq7w/ but the Fiddle doesn't work, maybe someone knows more about JsFiddle and why this is.
Remove id from <p>. id is unique in the document.
id of <p> tag and <input> tag should be different.
In your case, getElementById('fname') method accessed the <p> tag because it is the first tag whose id is equal to 'fname'.
It is true that you need to remove the unique id attribute from the <p> element.
However if you test it with only that change it will still not work on the given jsFiddle sample. you need to change the jsFiddle javascript settings by clicking on the javascript button over the paragraph, and changing load type from 'onload' to 'No wrap ~In head' so it will treat the javascript as if it is in the <head> area of the html, Rather than their default which is executing the script onLoad.
How to update with jquery the label of preview div when im typing inside of the parent input of edit div?
Thank you.
<html>
<body>
<div id="preview">
<label id="companyName" class="workExperience">
This is my company
</label>
</div>
<div id="edit">
<label>Company Name: </label>
<input type="text" id="companyName" />
</div>
</body>
</html>
You'd have to have something along these lines in your code:
<script>
$("#companyName").keyup(function () {
var value = $(this).val();
$(".workExperience").text(value);
}).keyup();
</script>
However, I would NOT give them the same id value, as it might lead to some errors.
Good luck!
you can not have the same ID in the tag "label" and the tag "input".
<div id="preview">
<label id="companyName" class="workExperience">
This is my company
</label>
</div>
<div id="edit">
<label>Company Name: </label>
<input type="text" id="companyNameInput" />
</div>
$(document).ready(function(e){
$('#companyNameInput').bind('change', function(ev) {
$(this).closest('#edit').prev().find('#companyName').html($(this).val());
});
});
test