I am trying to read the value the user inputs into a polymer paper-input object. However, this is a custom object as follows :
<dom-module id="mathjax-input">
<template>
<paper-input on-input="handleInputChanged" label="{{ label }}" value="{{ formula }}">
</paper-input>
</template>
This is intending to show the user input translated (if it's in LaTeX code) to the equivalent LaTeX result. The following is the input box:
<div>
<mathjax-input id="formula" label="Enter formula: " ></mathjax-input>
</div>
Assuming now that the "onsubmit" event of the form calls the following function:
<script>
function copy_latex(){
var input = document.getElementById('formula').value
return true;
}
</script>
variable "input" should now get what the user typed. This is not working though. Can you please help me locate the error?
-Thanks!!
Solved with:
var input = document.querySelector('#formula').formula;
Thanks a lot!
Related
I'm trying to solve a problem where a user inputs values into a search box, presses the search button and with the onClick event the search terms are compared to values in a JSON file. Currently I don't know jQuery so if this can be avoided in the solution I would appreciate it! What I have so far is:
<div id="searchb">
<button onclick="userSearch()">Search</button>
</div>
This is a simple div for the search button which calls the userSearch function that deals with the JSON file:
<script>
<!--Function which compares inputted name to names in the .json file. -->
function userSearch(thearr) {
... <!-- All of the code that compares the values -->
console.log();
}
</script>
<script src="filepath on my machine">
</script> <!-- Source path to .json file for script -->
The issue that I'm having is that the function in the onClick event doesn't pass any parameters, because the parameter for userSearch is not defined until the script tag is reached. When I run this 'applet' I get an error saying that the parameter thearr is undefined.
The file path is correct because I used it for a similar problem which automatically generated results from the JSON file on page load, it's the button click that seems to be the problem. Any ideas on how this issue could be fixed would be greatly appreciated! Thanks.
EDIT: Search box HTML as requested
<div id="textboxes">
<textarea id="input1" placeholder="First Name" rows="1" cols="10">
</textarea>
<textarea id="input2" placeholder="Surname" rows="1" cols="10"></textarea>
</div>
From your question, it sounds like you need to get the values from the users input. For userSearch(thearr), i'm not sure what you expect thearr to be. You can get the value of the user input like this:
function userSearch() {
var firstName = document.getElementById("input1").value;
var surName = document.getElementById("input2").value;
console.log(firstName + " " + surName);
}
Note: if you are expecting to process multiple first/surnames, you should rethink the architecture. The logic to do so with the current set up would not be simple to write and more importantly unnecessary.
I'm trying to combine 2 paper elements in my index.html (within a dom-bind) but can't find out the right syntax for this. I think I've tried all combinations mentioned in the Polymer binding documentation... In this simple example, the elevation of a paper-material element should be set by what's put into a paper-input (i.e. a value between 1 and 5). Can someone provide me the correct syntax for this?
My code:
<html>
<head>
...loading necessary components...
</head>
<body>
<template is="dom-bind">
<paper-input id="input" label="label"></paper-input>
<paper-material elevation$="{{this.$.input.value}}">
Some text here...
</paper-material>
</template>
</body>
</html>
When binding to elements that don't inherit/extend from native HTMLElements you shouldn't use the dollar sign. You can too bind directly an input to a property, below is an example:
<paper-input value="{{elevation::input}}">
<!-- or -->
<paper-input bind-value="{{elevation}}">
Here is a working example validating the elevation the user wants to set.
I have a polymer paper-input element on HTML page (among other webcomponents). I need to listen on it’s value change and modify another webcomponent’s property. For a sake of simplicity, let’s imagine I need two syncronized inputs. So far, I have:
<paper-input id="fst" label="First" floatinglabel="First"></paper-input>
<paper-input id="snd" label="Second" floatinglabel="Second"></paper-input>
I want to have their values to be synchronized all the way. Currently I use following code to achieve this:
document.addEventListener('polymer-ready', function() {
['#fst', '#snd'].forEach(function(el) {
document.querySelector(el).addEventListener("change", function(e) {
var value = document.querySelector(el).value;
// ⇓⇓⇓⇓⇓⇓⇓ in pseudocode: other element
document.querySelector(XOR(el)).setAttribute('value', value);
});
});
...
});
I definitely see this is ugly. I am sure, there is a proper way to achieve the goal, but I failed to google it and I’m totally stuck. I suppose observes should do the trick, but I simply can’t figure out how.
The evident code using binding variable is not working for some reason:
<paper-input id="fst" label="First" floatinglabel="First" value="{{ value }}">
</paper-input>
<paper-input id="snd" label="Second" floatinglabel="Second" value="{{ value }}">
</paper-input>
Thanks in advance.
you could use the declarative method and just use something like
<template is="auto-binding">
<paper-input id="fst" label="First" floatinglabel="First" value="{{value}}"></paper-input>
<paper-input id="snd" label="Second" floatinglabel="Second" value="{{value}}"></paper-input>
</template>
plunker shows it in action
http://plnkr.co/edit/3cxdOYKciKRBzROHQzgM?p=preview
edit: update answer to reflect that the use of declarative binding outside a custom element requires a auto-binding template. also it is worth noting that elements inside the auto-binding template are not accessible until the template-bound event is fired.
I have a javascript constant and I was wondering if and how I can get that constant in an input form. For example.
<input form="POST" action="INSERT_API_CONSTANT_HERE/myroute" />
I was wondering if it's possible to do something like that. Thanks in advance.
First of all, your HTML tag is wrong. <form> is a different tag from <input>, so to be a form, it should be:
<form id="myForm" method="POST" action="{{api}}/myroute">
<input type="text" value="this is an input" />
</form>
I also provided an <input> tag to you note the difference, now let's go to changing form action dynamically via javascript with JQuery:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
//your "constant"
var MY_CONSTANT = "some_value";
//option A: to set action parameter, replace"{{api}}" text to your "constant" value
var originalAction = $("#myForm").attr("action");
$("#myForm").attr("action" , originalAction.replace("{{api}}", MY_CONSTANT));
//option B: you could leave form action empty in HTML and write everythig here via javascript
$("myForm").attr("action" ,MY_CONSTANT + "/myroute" );
</script>
Both options A and B works, but I don't think replacing a text for another the best solution, I prefer option B in my opinion.
Try this:
$("form").attr("action", $("form").attr("action")
.replace(/INSERT_API_CONSTANT_HERE/g, APIConstant))
I have multiselect element just like StackOverflow does with their tags. I don't know how to write the jQuery statement that will retrieve the multiple values that were selected.
Here is what I have so far.
HTML
<input id="tagSelect" style="width:400px;" type="text"/>
Here is my Javascript
var tag = $('#tagSelect').val();
Here is the plugin that it uses
http://nicolasbize.github.com/magicsuggest/
There are two ways to retrieve the values with the plugin:
If the combo is included within a classic form like this:
<form method="POST" action="submit.php">
<div id="ms"></div>
</form>
<script type="text/javascript">
var combo = $('#ms').magicSuggest({
data: 'a,b,c,d,e',
name: 'choice'
});
</script>
then the selection will be serialized in the parameter $_POST['choice'].
If you need to retrieve the values through javascript, there is a getValue() method which will return an array of values:
ms.getValue();
This solution does not appear to work.
When trying to execute ms.getValue(); the following error message is logged:
TypeError: ms.getValue is not a function[Learn More]