Change the value of xforms element via javascript? - 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>

Related

I want a button click to add html tags to my form

I'm trying to insert a new label and input to my form when a button is clicked. Still quite new to JavaScript. I'm not really getting the hang of it.
I have the following form in my HTML file:
<form id="form" action="">
<label for="round">Runda:</label>
<input type="number" id="formRound">
<label for="">Datum:</label>
<input type="date" id= "formDate">
<label for="">Markör:</label>
<input type="text" id="formMarker">
<button id="addNewHole">Lägg till hål</button>
</form>
When I click my button with the ID "addNewHole" I was to create a new label and input.
This is my javascript code thus far.
let newInput = "<label>Hål:</label><br><input type=\"Text\" id=\"hole\"></input>"
document.querySelector("#addNewHole").addEventListener("click", function(newInput){
document.querySelector("#form").innerHTML = newInput;
})
I though this code would do what I wanted but when I click my button all I see is:
[object MouseEvent]
You are expecting that newInput will be passed into your event handler through the argument newInput, but event callbacks are automatically passed the Event object that triggered them and that is what your argument is representing. Since you've already declared newInput, you should just remove the argument declaration from the callback and access your variable.
let newInput = "<label>Hål:</label><br><input type=\"Text\" id=\"hole\"></input>"
document.querySelector("#addNewHole").addEventListener("click", function(){
document.querySelector("#form").innerHTML = newInput;
});
<form id="form" action="">
<label for="round">Runda:</label>
<input type="number" id="formRound">
<label for="">Datum:</label>
<input type="date" id= "formDate">
<label for="">Markör:</label>
<input type="text" id="formMarker">
<button id="addNewHole">Lägg till hål</button>
</form>
Beyond that:
An input element does not have a closing input tag.
A button element within a form will be a submit button by default. If you just want a button that doesn't submit, you need to add type="button".
You shouldn't search the document for the same DOM element over and over again as you are doing in your event callback. Get the DOM reference just once, outside of the function, and refer to that as often as you need to. Also, when accessing an element with an id, use .getElementById() as opposed to .querySelector() because .getElementById() is usually optimized to be faster.
You should avoid .innerHTML when you can as it has security and performance implications and (as you've seen) forces you to have to deal with quotes and concatenation. Instead, create new DOM objects, configure them and then append them into the document. This is more code, but the code is much easier to maintain.
So, here's your code reworked:
// Get your DOM references just once and use `.getElementById()` when
// searching for elements that have ID's
let myForm = document.getElementById("form");
// Create new DOM Object instead of building HTML strings
let newCode = document.createElement("div");
let newLabel = document.createElement("label");
newLabel.textContent = "Hål:";
let br = document.createElement("br");
let newInput = document.createElement("input");
newInput.type = "text";
newInput.id = "hole";
// Append the elements
newCode.appendChild(newLabel);
newCode.appendChild(br);
newCode.appendChild(newInput);
document.getElementById("addNewHole").addEventListener("click", function(){
// Append to the document
form.appendChild(newCode);
});
<form id="form" action="">
<label for="round">Runda:</label>
<input type="number" id="formRound">
<label for="">Datum:</label>
<input type="date" id= "formDate">
<label for="">Markör:</label>
<input type="text" id="formMarker">
<button id="addNewHole" type="button">Lägg till hål</button>
</form>

Simple Javascript front-end message board design

I am working on a personal blog website project, and I wanted to implement a simple message board on my index page. Due to the projected site traffic (relatively low) I decided on only using a front-end implementation without linking to a database with the following js and html code:
<section class="message-board">
<div class="title">
<h2>
Leave a message
</h2>
</div>
<textarea class="message" type="text"></textarea><br/>
<input value="submit" type="button" class="submit-btn">
<div class="display-area">
Existing comment:
</div>
</section>
and then the js,
<script>
window.onload=function() {
var displayArea = document.getElementsByClassName("display-area");
var btn = document.getElementsByClassName("submit-btn");
btn.onclick = function() {
var comment = document.getElementsByClassName("message").value;
displayArea.appendChild(comment);
};
}
</script>
My intention was to make my display-area contain whatever was put in textarea via .appendChild when submit is clicked. Sadly, it isn't working as intended-nothing actually happens. I am thinking about potential errors in my js code, but just couldn't figure out anything that would resolve the problem.
Any assistance will be greatly appreciated!!!
getElementsByClassName() returns a collection of elements (note the s in Elements). If you have only one element that matches the class name, you have this element in the first index of the array-like collection.
var displayArea = document.getElementsByClassName("display-area")[0];
var btn = document.getElementsByClassName("submit-btn")[0];
You can also use querySelector(), that uses CSS selectors (like jQuery) and returns a single element:
var displayArea = document.querySelector(".display-area");
In order to append a text node (your variable comment stores a string), use append() instead of appendChild():
displayArea.append(comment);
Two ways this can be done are by calling the JavaScript function on click, or by calling it on form submission.
1) call function onclick:
Wrap your form within a form tag, and call your JavaScript function based on the element Ids.
Note the showInput function is being called onclick when the button is clicked.
function showInput() {
console.log('showInput called...')
var userInput = document.getElementById("userInput").value;
var display = document.getElementById("display");
display.innerHTML = userInput;
}
<section class="message-board">
<div class="title">
<h2>
Leave a message
</h2>
</div>
<form>
<textarea class="message" type="text" id="userInput"></textarea><br/>
</form>
<input type="submit" onclick="showInput();">
<div class="display-area">
Existing comment:
</div>
<p><span id="display"></span></p>
</section>
Here's a jsfiddle, with the same code as above: http://jsfiddle.net/ethanryan/94kvj0sc/
Note the JavaScript in the jsfiddle is being called at the bottom of the Head section of the HTML.
2) call function on form submit:
You can also do this by calling the JavaScript function on the submission of the form, instead of on the click of the button. However, since this form uses a textarea, hitting return will add a line break to the text, and not submit the form, so the button still needs to be clicked for the function to be called.
function showInput() {
console.log('showInput called...')
event.preventDefault()
var userInput = document.getElementById("userInput").value;
var display = document.getElementById("display");
display.innerHTML = userInput;
}
<section class="message-board">
<div class="title">
<h2>
Leave a message
</h2>
</div>
<form onsubmit="showInput()">
<textarea class="message" type="text" id="userInput"></textarea><br/>
<input type="submit" value="Submit">
</form>
<div class="display-area">
Existing comment:
</div>
<p><span id="display"></span></p>
</section>
Note the event.preventDefault() in the form, since the default behavior of forms is to submit data to a backend database.
jsfiddle: http://jsfiddle.net/ethanryan/qpufd469/
3. appending instead of replacing text
Finally, my examples above used innerHTML to replace the userInput text. If you want to append instead of replace the text, you can use insertAdjacentHTML to add the text to the end, and then append a linebreak to it. Finally, you can reset the form.
function showInput() {
console.log('showInput called...')
event.preventDefault()
var userInput = document.getElementById("userInput").value;
var display = document.getElementById("display");
var theForm = document.getElementById("theForm");
var linebreak = document.createElement("br");
display.insertAdjacentHTML('beforeend', userInput);
display.appendChild(linebreak);
theForm.reset();
}
<section class="message-board">
<div class="title">
<h2>
Leave a message
</h2>
</div>
<form onsubmit="showInput()" id="theForm">
<textarea class="message" type="text" id="userInput"></textarea><br/>
<input type="submit" value="Submit">
</form>
<div class="display-area">
Existing comment:
</div>
<p><span id="display"></span></p>
</section>
jsfiddle: http://jsfiddle.net/ethanryan/x4hq0Lzp/

How to pass a value to "data-value"

I have website: http://thanglongvn.com with this in my webpage
I have a label on the same web page. I would like the "data-value" to get the value from the label value instead of hardcode value.
How to do that? How I can pass a value programmically to "data-value" and define the html mark-up as blank like this:
<div class="counter-animated" data-value="span dynamic value here"></div>
<span id="my_IDLabel">dynamic value</span>
You can access data attributes using plain javascript as element.dataset.datasetname
In this case,it is element.dataset.value,you can set it as element.dataset.value="class1"
check this snippet
window.onload = function() {
var counterClass = document.querySelectorAll('.counter-animated');
alert(counterClass[0].dataset.value);
counterClass[0].dataset.value="class1";
}
<div class="counter-animated" data-value="span dynamic value here"></div>
<span id="my_IDLabel">dynamic value</span>
Hope it helps
You can set a data attribute programatically like so
var label = document.querySelector('.value')
var target = document.querySelector('.target')
var output = document.querySelector('.output')
output.innerHTML = target.getAttribute('data-value')
document
.querySelector('button')
.addEventListener('click', function() {
target.setAttribute('data-value', label.textContent)
output.innerHTML = target.getAttribute('data-value')
})
<label class="value">Bar</label>
<div class="target" data-value="Foo"></div>
<br/>
<button>change data-value attribute</button>
<br/><br/>
The data-value attribute is:
<br/>
<div class="output"></div>

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

Javascript / Jquery .html() replaces only once

Hi I am trying to achieve the following:
1) User clicks on file input button, textfield gets replaced with the name of the file
2) User changes the value of the text field, the file contents are erased..
This works fine. However if the user does 1) after he does 2) the values are not showing up in the text field anymore..
This is on Backbone with coffee script..
events:
'change #soundfile': 'soundReceived'
'change #soundtrack': 'linkInput'
soundReceived: (event) ->
$('#soundtrack').html($('#soundfile').val().replace("C:\\fakepath\\", ''))
#
linkInput:(event) ->
match = $('#soundtrack').val().match('http://')
if match
$('#soundfile').replaceWith($("#soundfile").clone());
console.log($('#soundfile').val())
else
console.log($('#soundfile').val())
$('#soundtrack').html($('#soundfile').val().replace("C:\\fakepath\\", ''))
#
Edit
<div id = "create_form" >
<form class="new_plot" name="create_form" id ="new_plot" data-remote="true" enctype="multipart/form-data">
<div id = "sound_gen">
<span>
<textarea class="input" id="soundtrack" name="name" rows="1" onClick="if(this.value == 'Soundtrack: upload mp3 file') { this.value = ''; }">Soundtrack: upload mp3 file</textarea>
</span>
<img id = "btn_upload" src ="/assets/upload_icon.png"></img>
<input name="soundtrack" type="file" id ="soundfile"/>
<span class ="generate">
<input class="blue_button btn_generate" name="commit" type="submit" value="create" id ="plot_subm"/>
</span>
</div>
</form>
</div>
You should be using val to change the value of a form element, not html, for example:
soundReceived: (event) ->
$('#soundtrack').val($('#soundfile').val().replace("C:\\fakepath\\", ''))
#
Trying to change the value of an <input type="file"> through a script is generally pointless (for hopefully obvious reasons) but you can try with .val(...) if you'd like.
Stripped down demo: http://jsfiddle.net/ambiguous/5n6aZ/
Also, you should probably be using a placeholder attribute instead of your onClick handler in your <textarea>.
This line:
$('#soundtrack').html($('#soundfile').val().replace("C:\\fakepath\\", ''))
Should be like this:
$('#soundtrack').html($('#soundfile').val(''))
So really it was 2 problems:
The only value you're allowed to send to a file input is an empty string
$.val() accepts a single parameter for value, it isn't set like a property
Hope this helps!

Categories