Get Text From Element and Put it in Text as Value - javascript

I am trying to achieve the following which includes:
Retrieve Data from an Element in JavaScript.
<p id='returnText'>Text</p>
Set a from's Input Value to the retrieved text in step 1.
This is what i currently have and im really stuck :(
function autoMagicallySubmit(){
var html = document.getElementById("returnText").innerHTML;
html.replace(/<[^>]*>/g, "");
document.getElementById("sendText").value = html.text;
}
<p id='returnText'>TEXT NEEDED TO BE TAKEN!</p>
<form name="myForm"action="Contact" method="post">
<input type="text" name="sendText" id="sendText" value="">
</form>
But I keep retrieving "Undefined" in the texbox. I have php echoing the element which is under step 1.

document.getElementById("returnText").innerHTML;
Returns text and not an object that has an attribute "text".
You should just have document.getElementById("sendText").value = html

innerHTML give you the text content (between <p id='returnText'> and (</p>) so is a string, not an object, and you need just the value
function autoMagicallySubmit(){
var txt = document.getElementById("returnText").innerHTML;
txt.replace(/<[^>]*>/g, "");
document.getElementById("sendText").value = txt;
}
autoMagicallySubmit()
<p id='returnText'>TEXT NEEDED TO BE TAKEN!</p>
<form name="myForm"action="Contact" method="post">
<input type="text" name="sendText" id="sendText" value="">
</form>

Related

How do I make the text a user inputs convert to uppercase through a function?

I am currently working on a project for a introductory javascript and html class, and I am trying to figure out how to make it so that the text a user enters into a text box converts to all uppercase letters after clicking a button. Here is what I have so far (i know it is ugly but it just needs to work) , I am just having trouble figuring out my problem. :
<html>
<body>
<p> Enter any text into the field below and click "Convert" and it will make
every letter Upper Case. </p>
<form>
<input type="text" id="text" value="">
<input type="button" value="Convert" onclick="thefunction()">
</form>
<p id="lowercase"></p>
<script>
function thefunction(){
var text = ("text");
var conv = text.toUpperCase();
document.getElementById("lowercase").innerHTML = conv;
}
</script>
</body>
</html>
Looks like you just need to replace var text = ("text"); with var text = document.getElementById('text').value;
The full working code:
<html>
<body>
<p> Enter any text into the field below and click "Convert" and it will make
every letter Upper Case. </p>
<form>
<input type="text" id="text" value="">
<input type="button" value="Convert" onclick="thefunction()">
</form>
<p id="lowercase"></p>
<script>
function thefunction(){
var text = document.getElementById('text').value;
var conv = text.toUpperCase();
document.getElementById("lowercase").innerHTML = conv;
}
</script>
</body>
</html>
I suspect what you were doing wrong was trying to use var text = document.getElementById('text') and then trying to change that to upper case.
If you attempt this, you're actually attempting to apply the function toUpperCase to a HTMLInputElement and you'll get a console error as a result.
You just need to apply the toUpperCase function to the string value held within the HTMLInputElement called text by accessing it's value with var text = document.getElementById('text').value;

Viewing [object HTMLInputElement] - JavaScript

I using javascript to extract the value from the SPAN element, then put it in a hidden form field, and then submit the data but why am I getting this result?
<form onsubmit="CDMFOCT()" id="CDMFOCTform">
<div class="CDMFOCT"></div>
<span class="CDMFOCT-span"></span>
<input type="hidden" name="CDMFOCTtimer" id="CDMFOCTtimer" value="not yet defined">
</form>
Javascript:
function CDMFOCT() {
CronSaati = $('.CDMFOCT-span').html();
$("#CDMFOCTtimer").val(CDMFOCTtimer);
$("#CDMFOCTform").submit();
};
Output:
Time: [object HTMLInputElement] will...
The are two problem in your code
$("#CDMFOCTtimer").val(CDMFOCTtimer); should be replaced with $("#CDMFOCTtimer").val(CronSaati); to give the hidden field value of your span.
you have set CronSaati as a variable. var CronSaati = $('.CDMFOCT-span').html();
So Try this
$("#CDMFOCTform").submit(function() {
var CronSaati = $('.CDMFOCT-span').html();
$("#CDMFOCTtimer").val(CronSaati);
// just for showing the html content of your span has been inserted into hidden input field
alert($("#CDMFOCTtimer").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="CDMFOCTform" method="post" action="">
<div class="CDMFOCT"></div>
<span class="CDMFOCT-span">Hello</span>
<input type="hidden" name="CDMFOCTtimer" id="CDMFOCTtimer" value="not yet defined">
<input type="submit" name="CDMFOCTsubmit">
</form>
Using JavaScript & jQuery to extract the value of span:
var node = $('.CDMFOCT-span')[0].childNodes[0].nodeValue;
Edit: Or just simply:
var node = $(.CDMFOCT-span).text();
Read more about how to get text node of an element in this link
and now putting it in the hidden form field:
$("input#CDMFOCTtimer").val(node);

jquery mutiple text field update in form

i need to create a html form where upon entering value on one input text field should automatically enter calculated value in another input text field using jquery.I found a source http://pastie.org/2607417,where i have input text value which output in a paragraph... Any help would be greatly appreciated
$("input[name='textbox1']").blur(function() {
//if u want to perform any calculation
var textbox2val=.....;
//if u want to just paste the textbox1 value
var textbox2val=$(this).val();
$("input[name='textbox2']").val(textbox2val);
});
Try
<input type="text" value="" id="text1" />
<p></p>
<div></div>
<script>
$("#text1").keyup(function () {
var value = $(this).val();
value2 = value*2;
value3 = value*3.7;
$("p").text(value2);
$("#text2").val(value3);
});
</script>
<input type="text" value="" id="text2" />

retrieving text field value using javascript

I want to retrieve textfield value using javascript. suppose i have a code like:
<input type='text' name='txt'>
And I want to retrieve it using javascript. I call a function when a button is clicked:
<input type='button' onclick='retrieve(txt)'>
What coding will the retrieve function consist of?
You can do this:
Markup:
<input type="text" name="txt" id="txt"/>
<input type="button" onclick="retrieve('txt');"/>
JavaScript:
function retrieve(id) {
var txtbox = document.getElementById(id);
var value = txtbox.value;
}
Let's say you have an input on your page with an id of input1, like this:
<input type="text" id="input1" />
You first need to get the element, and if you know the Id, you can use document.getElementById('input1'). Then, just call .value to get the value of the input box:
var value = document.getElementById('input1').value;
Update
Based on your markup, I would suggest specifying an id for your text box. Incase you don't have control over the markup, you can use document.getElementsByName, like so:
var value = document.getElementsByName('txt')[0].value;
One of the way is already explained by Andrew Hare.
You can also do it by entering the value in the textbox and getting a prompt box with entered message when a user click the button.
Let's say, you have a textbox and a input button
<input type="text" name="myText" size="20" />
<input type="button" value="Alert Text" onclick="retrieve()" />
The function for retrieve()
function retrieve()
{
var text = document.simpleForm.myText.value;
alert(text);
}

Build URL from form fields with JavaScript or jQuery

I'm trying to create a URL builder form with JavaScript or jQuery.
Basically, it will take the value of the two form fields, add them to a preset URL and show it on a third field on submit.
The resulting URL might be http://example.com/index.php?variable1=12&variable2=56
Now, this isn't the "action" of the form and the application can't read a URL (to grab the variables), so it has to be done on the page.
The resulting URL will be shown in the field named "url".
Here's a sample of the form:
<form id="form1" name="form1" method="post" action="">
<p>
<label>Variable 1
<input type="text" name="variable1" id="variable1" />
</label>
</p>
<p>
<label>Variable 2
<input type="text" name="variable2" id="variable2" />
</label>
</p>
<p>
<label>URL
<input type="text" name="url" id="url" />
</label>
</p>
<p>
<input type="submit" name="button" id="button" value="Submit" />
</p>
</form>
jQuery has serialize which builds the query string values.
So if you want to do the entire form:
alert($("#form1").serialize());
If you want to do only a few fields, then just make the selector select those fields.
alert($("#variable1, #variable2").serialize());
Use something like...
var inputs = $('#form1').find('input[type=text]').not('#url');
var str = "http://www.base.url/path/file.ext?"
inputs.each(function (i, item) {
str += encodeURIComponent(item.name) + "=" + encodeURIComponent(item.value) + "&";
});
$('#url').val(str);
This will select all <input>s on in form1 with type='text', and concatenate them into a query string. See encodeURIComponent().
Orrrr.....you could just use .serialize(). Thank you, prodigitalson.
Something like the following should work:
var partFields = '#variable1,#variable2';
$(partFields).change(function(){
var url = 'static/URL/to/file.php?';
$('#url').val(url + $(partFields).serialize());
});
However, unless you want people to be able to override the URL, you might want to use a hidden field and a regular element for display and submission of the URL value in which case you'd have something like the following:
var partFields = '#variable1,#variable2';
$(partFields).change(function(){
var url = 'static/URL/to/file.php?';
var urlValue = url + $(partFields).serialize();
$('#url-display').text(urlValue); // Set the displaying element
$('#url').val(urlValue); // Set the hidden input value
});

Categories