How to pass class value from jquery into input box - javascript

index.php
<span class="final_build_price" data-from="0" data-to="" data-speed="500" data-refresh-interval="10">0</span>
<form method="post" action="">
<input type="text" id="finalvalue" value="">
<input type="submit" class="getquote" value="submit" name="send">
</form>
js
<script>
$(".dim_price").countTo();
$(".final_build_price").countTo();
var finalpice=$(".final_build_price").countTo()
$('.getquote').click(function(){
// var fp = JSON.stringfy(finalpice);
var fp =parseInt(finalpice);
alert(fp);
// document.getElementById("final_price").innerHTML=fp;
});
</script>
<script>
$(".dim_price").countTo();
var finalpice=$(".final_build_price").countTo()
$('.getquote').click(function(){
// var fp = JSON.stringfy(finalpice);
var fp =parseInt(finalpice);
alert(fp);
document.getElementById("final_price").innerHTML=fp;
});
</script>
In span class(final_build_price) i am getting a value from below mention jquery but I want to pass that value into input box on click on submit button and the javascript code i used is mentioned below. but I am not getting any data into input box

This issue is due to write id in place to class and name of your element.
replace
document.getElementById("final_price").innerHTML=fp;
by
$(".final_build_price").html(fp);

Related

How do I remove the input typed in by user in an input tag after form submission through vanilla javascript?

<input type="number" class="setter" id="day-set" name="day-set" value="day"max="30" min="0" placeholder="00"onkeyup="if(parseInt(this.value)>30){ this.value =30; return false;}">
How do I make it so that the input typed in by the user in the input field is cleared when a submit button is pressed (the one which does not refreshes the page)
you can add this to the onclick function of your button and replace the myForm with the id of your form element
document.getElementById("myForm").reset();
<html>
<body>
<p>Clear the input field when you click on the button:</p>
<button onclick="document.getElementById('myInput').value = ''">Clear input
field</button>
<input type="text" value="Blabla" id="myInput">
</body>
</html>
You can also write the javaScript in-between the script tag in a Function or any other way that you want.
You can create a function and add it into the onSubmit event of your form (assuming that you have a form) and then inside of that function you only need to clear the value using something like this:
document.getElementById('day-set').value = ''
Example:
<form onsubmit="myFunction()">
<input type="number" class="setter" id="day-set" name="day-set" value="day"max="30" min="0" placeholder="00"onkeyup="if(parseInt(this.value)>30){ this.value =30; return false;}">
<input type="submit">
</form>
<script>
function myFunction(){
document.getElementById('day-set').value = ''
}
</script>

Why does my attempt to add a new row to my table (made w/o a table element) keep showing up and disappearing?

I'm trying to make a table in Javascript that does not use a table element, and I'm using pure vanilla nodeJS. I can get a new row to show up very briefly, but it disappears when I hit the button that made it show up in the first place. My code is:
<!DOCTYPE html>
<html>
<body>
<h1> Title Tests </h1>
<div id="Experiments">
<form id="Exp">
<input type="text" name="url box" placeholder="publisher URL"><br>
<div class="Title">
<input type="text" name="title box" placeholder="Test Title"><br>
</div>
<button id="addButton" onclick="newRow()">+</button><br>
<input type=submit value="Submit">
</form>
</div>
<script>
function newRow(){
var number = 2;
var newTitleRow = document.createElement('div');
newTitleRow.setAttribute('id',`Title${number}`);
var newBT = document.createElement('input');
newBT.setAttribute('type','text');
newBT.setAttribute('name',`title box ${number}`);
newBT.setAttribute('placeholder','Test Title');
newTitleRow.appendChild(newBT)
var button = document.querySelector("#addButton");
button.before(newTitleRow);
number++;
}
</script>
</body>
</html>
The problem is that you're using a html <button> inside a <form> element. This means it will automatically act as a submit button unless you declare it to be something different. So as soon as you push the + button it will try to submit the form to an undefined URL.
To work around you need to define that + button to be of type "button" like:
<button type="button" id="addButton" onclick="newRow()">+</button><br>

How to use information from created function to get added in new <p> tag

I'm currently trying to make a form where people can input information, and the info will then show up in a new div afterwards within a paragraph tag.
<form id="form" onsubmit="return false;">
<input type="text" id="userInput">
<input type="submit" onclick="addParagraphs()"> <!-- button -->
</form>
The way I'm currently trying to make it work is by having a function that looks at what information gets filled out, this is done by;
function othername() {
var input = document.getElementById("userInput").value;
}.
This way I am able to "save" the info, but my issue comes when I have to make it appear I a paragraph later on. I cannot for the life of me, figure out how to recall this stored information. The way I have tried is the following:
function addParagraphs()
{
var para = document.createElement("p");
var node = document.createTextNode(othername());
para.appendChild(node);
var element = document.getElementById("sizeValgt");
element.appendChild(para);
}
The "sizeValgt" is the id for the new div where the paragraph tag, is gonna be created when filling out the information.
This might be a little confusing, but I hope some people are able to understand what I'm trying to do here.
There are some mistakes in your code
First: : you are not returning value from your othername function
Second: you are not adding this value in p tag
function othername() {
var input = document.getElementById("userInput").value;
return input;
}
function addParagraphs(){
var para=document.getElementById("test");
if(para==null){
para = document.createElement("p");
para.id="test";
}
para.innerText=othername();
var element = document.getElementById("sizeValgt");
element.appendChild(para);
}
<form id="form" onsubmit="return false;">
<input type="text" id="userInput">
<input type="submit" onclick="addParagraphs()"> <!-- button -->
</form>
<div id="sizeValgt"></div>
You can do it simply in jquery. Example:
HTML
<input type="text" id="uinput"/>
<input type="submit" id="usubmit"/>
<p id="dis"></p>
Jquery
$(document).ready(function(){
$('#usubmit').click(function(){
var utext= $('#uinput').val();
$('#dis').html(utext);
});
});

How to get value from HTML textbox in Javascript

I simply want to have a textbox on my webpage, using the HTML form, and input tags, and be able to have the inputted value be used by the Javascript on the page. My HTML looks like this:
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice">
</form>
</div>
and the Javascript I'm trying to use looks like this:
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice);
}
However, all I see on the webpage, underneath the textbox, is "[object HTMLInputElement]". What do I do to get this to work right?
Thanks
here's an example with change event listener for firing a function when there's a change in form
var div = document.querySelector('div');
var topMenuChoice = document.getElementById("firstinput");
topMenuChoice.addEventListener('change',function(e){
div.innerHTML = e.target.value/***e.target.value is your input***/
var divInner = div.innerHTML;
setTimeout(function(){
document.write(divInner);
},2000)
})
<form id="firstbox">Choice:
<input id="firstinput" type="text" name="choice" value=66>
</form>
<div>look here!!</div>
Check this !
document.write(document.forms['firstbox'].firstinput.value);
OR
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice.value);
}
See http://www.w3schools.com/jsref/prop_text_value.asp
var htmlInputElementObjet = document.getElementById("firstinput");
document.write(htmlInputElementObjet.value);
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice" value="initial value">
</form>
</div>
If you want to get the text typed in your input you need to use the value property of the element. You can also use another HTML tag to show the results (avoid using document.write):
HTML
<div id="firstq">
<form id="firstbox">
Choice: <input id="firstinput" type="text" name="choice">
</form>
<div id="result"></div>
</div>
JS
var topMenuChoice = document.getElementById("firstinput");
document.getElementById("result").innerHTML = topMenuChoice.value;
You have to consider the usage of an event (click, keypress) to control the exactly moment to retrieve the input value.
JS
document.getElementById('firstinput').addEventListener('keypress', function(e) {
if(e.which == 13) { //detect enter key pressed
e.preventDefault();
document.getElementById('result').innerHTML = this.value;
}
});
use the value property
var topMenuChoice = document.getElementById("firstinput");
document.write(topMenuChoice).value;
}

Open a new window using data from input form

In a input form in a HTML file, the user is supposed to put an URL (let's call it thislink). Then I want, when the user clicks on the submit button, to open a new window whose URL integrates thislink, that is its URL should be: '/selection/yes/?value='+thislink'.
Here are 2 tentatives of code:
1st tentative:
<form id="urlarticle">
<input type='text' name='thislink'>
<input type='submit' value='Select' onclick = function() {window.open('/selection/yes/?value='+thislink)};>
</form>
2nd tentative:
<form id="urlarticle">
<input type='text' name='thislink'>
<input type='submit' value='Select'>
</form>
<script type='application/javascript'>
$("#urlarticle").submit(function() {
window.open('/selection/yes/?value='+thislink);
});
</script>
But both tentatives are not working, any help to get the right way to write it appreciated!
Since you tagged jQuery, you could do it like this:
http://jsfiddle.net/729uh/
Javascript:
$("#urlarticle").submit(function() {
var linkValue = $('input[name="thislink"]').val();
window.open('/selection/yes/?value='+linkValue);
});
Html:
<form id="urlarticle">
<input type='text' name='thislink'/>
<input type='submit' value='Select'/>
</form>
What this does is:
use jQuery to select the input that has a name attribute with value thislink
take the value that was written in it
append that value to your link

Categories

Resources