Populate textarea from dropdown when text is long and has HTML - javascript

I have MySQL table templates, which looks like:
template_id|template_subject|template_text
------------------------------------------
1 |some subject |very long text with html
These are displayed in <select> dropdown and complete form looks like:
<form method="post" action="">
<select name="template_id"><option></option><option value="1">some subject</option></select>
<input type="text" name="template_subject">
<textarea name="template_text"></textarea>
<input type="submit" name="submit_me" value="go">
</form>
When user submits form, I need to get all 3 values - id, subject, and text. Furthermore, when user selects an option I need to auto populate <input type="text" name="template_subject"> field with some subject and populate <textarea name="template_text"></textarea> with very long text with html
Found many examples on this site how to populate input field with option text, and textarea with option value, but here's the problem: formatting dropdown as <select name="template_id"><option></option><option value="very long text with html">some subject</option></select> won't work, because template_id value would be missing, and writing very long text with html as option's value would be a very bad practice, I believe.
Looking at example,s I create a JSfiddle which seems to work partially, but once again, I don't think it's a good idea to write a long text (especially with HTML into option's value) - https://jsfiddle.net/ss050535/
How should I proceed? Using jquery, bootstrap and select2 if that matters.

Related

Knockout JS How to Data-Bind to Static Form Element

I am trying to data bind a form element in knockout.js. However I don't want the element to be editable in the form, or even display the element to the user.
I'm able to correctly data-bind the value to an input element. But I would prefer if I could just pull the value from the HTML or a labels text, or a span. So the below works, but I'm not able to change it so it's not an input that the user can change.
<input id="txtProvider" name="txtProvider" type="text" data-bind="value: $root.session().Resource().provider" />
I tried just using a hidden element with a placeholder, but this didn't work.
<input id="txtProvider" name="txtProvider" type="hidden" placeholder="WebEx" data-bind="value: $root.session().Resource().provider" />
Any suggestions?
Thanks in advance for the help.
What you're doing works, or should work, fine:
<form>
<input type="hidden" data-bind="value: myHiddenVal" />
</form>
function ViewModel() {
self.myHiddenVal = ko.observable('Foo');
}
ko.applyBindings(new ViewModel());
This will yield:
<input type="hidden" data-bind="value: myHiddenVal" value="Foo">
Example: https://jsfiddle.net/thebluenile/myves32x/
Though I have to say, I of course don't know your exact use case, but "pulling values from HTML elements" is sort of antithetical to how Knockout, or any other data binding framework, works. If the user doesn't have to edit the field you can just keep it out of the UI altogether. The only valid use case for hidden elements I can think of would be if you were submitting the form to a server side script for processing, instead of sending its contents via AJAX.

How to enable HTML elements on submit

I have a checkbox and a few input elements related to this checkbox as shown below
<input name="balanceFeaturesOn" id="balanceFeaturesOn" type="checkbox" disabled="disabled" checked="" />Control
<input name="IntervalDays26566521" type="Text" onclick="" onchange="" value=" 31 ">
<input name="IntervalHours26566521" type="Text" onclick="" onchange="" value=" 12 ">
For some reasons, I will have to keep my checkbox always disabled.
On the submit of above form (Say that the checkbox and inputs are inside a form), in the server code, I want to grab the text inputs based on if the checkbox was checked/unchecked. However since the checkbox is disabled, the request parameter does not contain the balanceFeaturesOn property.
So when I execute the below line:
String[] balanceFeatArr = request.getParameterValues("balanceFeaturesOn");
I am not getting any value...
So my question is how do I be able to get the value of the checkbox while still keeping it disabled on the UI?
Try the following code,
In the form use javascript function to submit the form,
<input type='submit' onclick='javascript:submitMe()' />
Javascript function,
function submitMe(){
$('#balanceFeaturesOn').removeAttr('disabled');
$('#formId').submit(); //Replace with the actual id of the form
}
Make sure you have included jquery library in your code.
Use Hidden Fields.
Hidden fields are similar to text fields, with one very important difference!
The difference is that the hidden field does not show on the page. Therefore the visitor can't type anything into a hidden field, which leads to the purpose of the field:
To submit information that is not entered by the visitor.
http://www.echoecho.com/htmlforms07.htm

HTML: text input is not being submitted

I have an HTML form with many fields, including a text field, that is,
<input name="my_field" type="text"></input>
Now, this text field is being changed by tons of JavaScript, jQuery and CSS code. The result of all this interaction is that when the form is submitted, this particular text field simply gets ignored (it is like that field was not there). I am not saying it get submitted with empy text, it simply doesn't appear in the list of fields submitted...
Because there are tons of code affecting this particular text field, I don't know what is causing this weird behavior. So I was wondering if someone could tell me what kind of HTML attribute (or JavaScript code, or jQuery code, or ...) could result in a text field being ignored.
At the end of all this interaction, I get the following HTML code (retrieved using the "Inspect Element" from Chrome):
<input id="id_my_field" maxlength="200" name="my_field" type="text" class="tt-query" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;" data-original-title="" title=""></input>
You should add a name attribute to the input:
<input type="text" name="myinput" />
Add the name attribute, like this:
<input name="myField" type="text"></input>

dropdown for search suggestions with prompting

I have a a script that provides suggestions for an input field based on a user typing a character in the input field. It uses a function to make suggestions in a comma delimited using this html:
<body>
<form>
First name:
<input type="text" onkeyup="showHint(this.value)" size="20" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
Now I want to use a drop down box instead of a suggestion string. I think I need to put the input field and the selectable options in a div, but I can't figure out how to get a option into the input field after it's been selected. How do I do that?
You could get value attribute (or text node) of the selected option and populate it to input box.
$(<input>).value(
originalValue +", " + $(<select>).val()
);
JQuery Autocomplete as #DemianBrecht suggested would be the other way to go, if you are looking to create more feature-complete interface.

Simple Javascript coding for input text to password text

I have following HTML code. writer input field is text filed. but I want to pretend that one is password field. whenever someone type anything, one key will display as * only, as you know how password field show; additionally the entry at writer input field should be populate in holder value which field is hidden. Can you please write in simple java script coding.
Password: <input type="text" id="writer" value=""/><input type="hidden" id="holder" value=""/>
This one show http://www.symplik.com/password.html, whatever we enter, it doesn't look good, it should be all * only when you start typing in it.
Simply use <input type="password" id="txtPassord" value=""/>

Categories