jQuery templates - how to get value of user-edited input - javascript

I run into a problem while using jQuery templates (http://api.jquery.com/category/plugins/templates/)
First: defined a template like this one:
<td>
<input type="text" value="${Text}" />
</td>
When it renders user types some text into it, but I don't know how to get what he types. All I receive is old "value" attribute value.
The code I use to get data back:
var enteredData = row.tmplItem();
var note = enteredData.data;
var data = {};
data.NoteId = note.NoteId;
data.NoteText = note.Text;
I'd be grateful for any help!
Thank you!

You should be able to use
$('input').val()
to get the entered value
(obviously it would be best to give the input an id so you don't call all inputs on the page!)

try this:
<td>
<input type="text" value="${Text}" id="text${id}"/>
</td>
and
$('#text'+ id).val() //if you want a specific one of more inputs
or just set a static id if you only have one....

Related

Trying to target an element if it has a label

Attempted to log a label to console via
var labelTest = document.getElementById('js_8').label;
console.log(labelTest);
However it is returning undefined.
Edit: correcting some stuff, sorry at work and trying to do this in between other tasks. What my end result needs to be is targeting the inner html of the js_8 ID, but with React it is different for each of the Pages that it is on. So I want to add an extra stipulatoin of having that label attribute.
HTML:
<span data-reactroot="" label="1715724762040702" class="_xd6" data-pitloot-persistonclick="true" display="inline" data-hover="tooltip" data-tooltip-content="Copy Text to Clipboard" id="js_8"><div class="_xd7">1715724762040702</div></span>
I'm not sure exactly what you're after, but this is a way to connect a <label> and <input> together via JavaScript.
var some_id = 'someid',
my_label = getLabel(some_id);
function getLabel(id) {
return document.querySelector('[for=' + id + ']')
}
my_label.click();
<label for='someid'>My Label</label>
<input type='text' id='someid' />
You can associate a <label> with an <input>, <output>, <select> or <textarea> element in one of two ways:
The for attribute:
<label for="js_8">Test</label>
<input id="js_8">
Or by wrapping the element with a label:
<label>Test<input id="js_8"></label>
You can then access the associated label(s) as an array like this:
var labelsTest = document.getElementById('js_8').labels;
// labelsTest will be an array of 0 or more HTMLLabelElement objects
console.log(labelsTest);
Label-able elements can have more than one label.
So essentially I believe I am going to want to utilize var x = getAttribute("label") . The fact that the attribute was titled label confused me, and in turn I goof'd.

angularjs removing special characters in dynamic form elements

I am trying to use angularjs dynamic form elements but when I type something in inputs, there are appearing many special characters []"": and field, value .etc in textarea, I just want to see in textarea what I wrote in inputs ,
this is what I am working on it http://plnkr.co/edit/JbjqjAoQ3odBhXF1a13r?p=preview
sorry for my poor english,,,
What Chris Story says is correct. You are trying to model the text value of the <textarea> to an array of objects, inputs
If you are just trying to display the results like it seems, a <textarea> is not the way to go. You can display them in a simple list, like this:
<ul>
<li ng-repeat="input in inputs">{{input.field}} = {{input.value}}</li>
</ul>
EDIT
To display it in a <textarea>, you will need to store the list as string to use. This can be done by appending each item into a single string each time there is a change to an input value using ng-change.
Change the inputs to utilize the ng-change:
<div ng-repeat="input in inputs">
<input type="text" ng-model="input.field" ng-change="inputChanged()" />
<input type="text" ng-model="input.value" ng-change="inputChanged()" />
<button ng-click="removeInput($index); inputChanged()">Remove</button>
</div>
And create the function that is called to maintain the string:
$scope.inputChanged = function() {
$scope.listString = "";
for(var i = 0; i < $scope.inputs.length; i++) {
var field = $scope.inputs[i].field;
var value = $scope.inputs[i].value;
$scope.listString += field + " = " + value + "; ";
}
}
And finally, use this $scope.listString in the <textarea>:
<textarea rows="22" cols="55" ng-model="listString"></textarea>
I have forked your Plunkr here
The behavior does not make much sense from a UX perspective, but this seems to match your requirement. An option that might make sense is to add disabled="true" to the <textarea> so it can not be edited.
The issue is that you are rendering {{inputs}} and inputs is an Array.

In Javascript how can I make an Alert and modify html based on the contents of a form

I need to take the contents of form fields (client, phone number) validate them (most likely using regex) and concatenate them into an alert and a modify some html so on form submit I get
<p>John smith
99999999
2 wilerby dr
morrowie city
morrowie </p>
and alert("form data")..
I tried with something like var field1 = document.forms[0].elements[0].value,
but not sure how to address the fields.
Edit:
<form id="form1" action="form_action.asp">
<fieldset>
<table cellpadding="3" border="0">
<th> Order Details </th>
<tr>
<td>Client Name:</td>
<td><input id="clientname" type="text" name="clientname" value="" maxlength="20"></td>
</tr>
...
Edit 2
var name = document.getElementById('clientname').value;
function buttontest()
{
alert(clientname);
}
using this script I keep getting a [object HTMLInputElement] alert, the script is external and the script tag is in the header.
You should use DOM selectors alike document.getElementById('elementId').value.
Please read the resembling documentation about such browser APIs: https://developer.mozilla.org/en-US/docs/Web/API/document
Try add an ID to those fields, and use getElementById(). Example.
var val = document.getElementById('id_field').value;
document.getElementById('id_tag').innerHTML = val;
var clientName = document.getElementById('clientname').value;
alert(clientName);
if you already know the sequence no of the element that you want to address then only you can use the syntax you specified i.e. as follows:
document.forms[form_index].elements[form_element_index].value
form_index->the index of the particular form where the element is.
form_element_index->the index of the element in the particular form.
So you could use:
alert(document.forms[form_index].elements[0].value);
N.B.-form_index will be 0 only if the form you refer to is the first form in your document.
Otherwise
If you don't know either the sequence no of the form or the sequence no of the element in the form you should use the id attribute to refer to it(No need of any reference to the form where the element is) which is the usual approach and I personally suggest you to use this.
So in your code use the following:
alert(document.getElementById('clientname').value)
You should use document.getElementById('ID'), you can go to www.w3schools.com for more details.

Assign a input value to variable on same page with Jquery

I am working with a api where i need to post a url from a form and get response. Everything is working well except one thing. I could not figure out how to get url posted in form input in to a variable for javascript. Take a look at following.
<form action="#" method="post">
<input type="text" class="url" name="url" />
<input type="submit" value="Analyse for Page Speed" value="submit" />
</form>
I use above form to get url and i want that url to be a value for the following variable
// Specify the URL you want PageSpeed results for here:
var URL_TO_GET_RESULTS_FOR = 'your url here';
How to get this done?
Is this what you're looking for?
var URL_TO_GET_RESULTS_FOR = document.getElementsByName('url')[0].value;
getElementsByName returns an array with all elements having the name passed as parameter. Since I'm assuming you have only one element with name="url", I get the first position of the array and returns the value.
As #crush pointed out in the comments, this task alone probably does not merit the use of jQuery. So if you aren't already using it, this should probably not be the deciding factor. If you need a pure JS solution, go with #ClaudioRedi's answer.
However, I'm assuming you're already using jQuery, and are asking for a jQuery solution. So here it is:
var URL_TO_GET_RESULTS_FOR = $('form input[name="url"]').val();
This will get the value of an <input> with the name url within a <form> element.

HTML form attribute "name" not getting defined in Firefox

Below is the sample code in my JSP page:
<form name = loginform method = post action="">
<table class=registerTable>
<tr>
<td>Username:</td></tr>
<tr><td>
<input name=user type=text class=usnm required size=28 maxlength=35 autocomplete="off" onblur="validateUser()" onkeyup="checkUsernameAvailability(this.value)"><br></td></tr>
<tr><td>
<span id = uerrmsg class = error></span><br></td></tr>
</table>
</form>
When onblur=validateUser() is called the following code executes:
function validateUser(){
if(loginform.user.value.length<5){
document.getElementById("uerrmsg").innerHTML="minimum 5 characters";
return false;
}else{
document.getElementById("uerrmsg").innerHTML="";
return true;
}
}
Error Console in FF gives the following error
loginform is not defined
Please help me on this.
PS: Above code works in all other browser.
you can use input.getAttribute("name") to get name attribute of an input.
This works for almost all browsers.
By the way, if you use getElementById, you must populate "id" field of input.
You should be using document.loginform.
You don't need the form for this.
First give your input an id: id="user". Then you can access it using document.getElementById(), as you do with the element. something like this:
document.getElementById("user").value.length
Also, your code is very non-standard, for eg you should not put a " " (space) between the attribute (or it's value) and the = sign. And the attributes' values should be within quotes (Look at the source code of this page, for example).

Categories