Viewing [object HTMLInputElement] - JavaScript - 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);

Related

Why can't select label with document.forms?

Is it possible to get label or div with document.forms ?
If yes. how ?
If not. Why ?
When I try it gives "undefined";
Example Code:
<form name="form1">
<div id="div1">
<label id="label1" for="uname">Username: </label>
<input type="text" id="uname" name="username" >
<button id="button1" onclick="func1()" >Okay!</button>
</div>
</form>
<script>
var form=document.forms['form1'];
function func1() {
event.preventDefault(); // -
console.log(form["uname"]); // gives input element
console.log(form["button1"]); // gives buttonn element
console.log(form["label1"]); // undefined
console.log(form["div1"]); // undefined
// I can get them like :
console.log(form["uname"].previousElementSibling); // gives label element
console.log(form["uname"].parentElement); // gives div element
// ...etc
// but, the questions is why I can't with document.forms
}
</script>
You can't select div because div are not part of form element. Source
var form=document.forms['form1'];
function func1() {
event.preventDefault(); // -
console.log(form["uname"]); // gives input element
console.log(form["button1"]); // gives buttonn element
console.log( form["uname"].labels[0] )
console.log(form["div1"]); // cant select div, because div are not form element
// I can get them like :
console.log(form["uname"].previousElementSibling); // gives label element
console.log(form["uname"].parentElement); // gives div element
// ...etc
// but, the questions is why I can't with document.forms
}
<form name="form1">
<div id="div1">
<label id="label1" for="uname">Username: </label>
<input type="text" id="uname" name="username" >
<button id="button1" onclick="func1()" >Okay!</button>
</div>
</form>
Content elements contained within a form have no relevance to the form being processed for being valid or submitted so there is no reason those content elements would need to be part of the form object.
You can however use form.querySelector() to target them
const form = document.forms.form1,
label = form.querySelector('#label1');
console.log('Label text = ', label.textContent)
<form name="form1">
<div id="div1">
<label id="label1" for="uname">Username: </label>
<input type="text" id="uname" name="username" >
<button id="button1" onclick="func1()" >Okay!</button>
</div>
</form>
It looks like form[elementId] returns the input element with that id. But that doesn't work as it only works for input elements. What you could do instead is form.elements, this is a HTMLColection which you could use with ids to get elements. form.elements[elementId].
Although that works, I would recomend you use document.getElementById. This way you don't need to understand old html/js jank. You would use it like this:
console.log(document.getElementById("uname")); // gives input element
console.log(document.getElementById("button1")); // gives button1 element
console.log(document.getElementById("label1")); // gives label element
console.log(document.getElementById("div1")); // gives div element

Why isn't a single form element is not returning value in the controller?

In my Form 3 fields including a hidden.and the rest of the values are perfectly returns in controller ,But the value in the hidden field is not getting .
the value in the hidden field is passing from an anchor tag using java script.
The value for the hidden field is passing from here
<a href="#" onclick="func(#c.vid)" data-toggle="modal" data-target="#myModal3" class="modalLink">
Javascript code to pass the value is
function func(vd){
document.getElementsByClassName("hiddenid").value = vd;
}
Form is look like
<form action="/Home/AddToCart" method="post">
<input type="hidden" id="vid" name="vid" class="hiddenid" />
<div class="styled-input agile-styled-input-top">
<input type="text" placeholder="Name" name="name" id="name"required>
</div>
<div class="styled-input">
<input type="text" placeholder="Star Name" onclick="showsss()" name="star" id="star" required>
</div>
<input type="submit" value="Add To Cart">
</form>
Controller
[HttpPost]
public ActionResult AddToCart(cart data)
{
userService.AddToCart(data);
ViewBag.p = userService;
return RedirectToAction("Temple");
}
The value is passing to the hidden field perfectly.i checked using an alert box.am attaching a screen shot of what am getting in the controller.
getElementsByClassName return an array.
function func(vd){
document.getElementsByClassName("hiddenid")[0].value = vd;
}
getElementsByClassName returns an array. Access single element using array index.
document.getElementsByClassName("hiddenid")[0].value = vd;
Instead of className you can use id as it is present on your hidden field i:e vid.
document.getElementsById("vid").value = vd;
or you can use document.querySelector which will retrieve first match element.
document.querySelector('.hiddenid').value = vd;
or
document.querySelector('#vid').value = vd;
Since you are using byclass its return an array. try this
document.getElementsByClassName("hiddenid")[0].value = vd;
But if you have a multiple products then do you have a add to cart button better to used id like vid-unique_number

Get Text From Element and Put it in Text as Value

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>

Change the value of xforms element via javascript?

I was wondering if it's possible to change the value of an xforms element via javascript and then submit the form with that value?
what i have tried is change the text of an xforms:input when an <input type="file"> is triggered and it works, the thing is that when i submit the form, the xforms:input doesn't seem to apply the value
<div id="ubi" class="controls">
<xf:input ref="ubicacion"/>
<input class="input-file" id="fileadjunto" type="file" onchange="uploadfile()"/>
</div>
<script>
function uploadfile()
{{
var inp = document.getElementById('fileadjunto');
var name = inp.files.item(0).name;
var span1 = document.getElementById('ubi').getElementsByTagName('span')[0].getElementsByTagName('span')[0].getElementsByTagName('input')[0];
span1.value = name;
}};
</script>
why am i getting the spans and inputs? if you check the xforms:input element in the console you'll see that it's converted to
<span .....>
<span.....>
<input..../>
</span>
</span>

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);
}

Categories