I'm trying to make a form using Ant design v4.0. The display of an Form.Item (Input text) depends of the value of other Form.Item (Radio button group). I'm using form.getFieldValue('fieldname') and it works initially but, when I changed the value of the radio Botton group the field is still showing up.
The code is similar to this
(...)
const [form] = useForm();
(...)
<Form form={form} (...)>
<Form.Item name="fieldname" initialValues={props.initialValues}>
// Here it is a radio button group
</FormItem>
{ form.getFieldValue('fieldname') === 'a_value' && (
<Form.Item name="a-text-field>
// here it is an input text
</Form.Item>
)}
</Form>
As I said before, it works with the initial value but if I changed the option it doesn't work. I also try the prop in the field a-text-field but it didn't work
hidden={form.getFieldValue('fieldname') !== 'a_value'}
it's because if the radio input changed, it does not change the form.item value so doing form.getFieldValue('fieldname') will not work. You may use a state instead and use onValuesChange prop of the form:
const [radioValue, setRadioValue] = useState("a_value");
const [form] = useForm();
(...)
const handleFormValuesChange = (changedValues) => {
const fieldName = Object.keys(changedValues)[0];
if(fieldName === "a-text-field"){
const value = changedValues[fieldName];
setRadioValue(value)
}
}
<Form form={form} onValuesChange={handleFormValuesChange}>
<Form.Item name="fieldname" initialValues={radioValue}>
// Here it is a radio button group
</FormItem>
{ radioValue === 'a_value' && (
<Form.Item name="a-text-field'>
// here it is an input text
</Form.Item>
)}
</Form>
here is the link of working sample
Check out this example in antd documentation.
https://ant.design/components/form/#components-form-demo-control-hooks
This doesn't require any state variables. The 'shouldUpdate' prop rerenders the specific form.item.
Related
I have a textarea id="task", which has a word counter id="count" connected. The counter is set to count spaces between words, so a word is only accounted for if one puts a space after it. However, if for whatever reason one finds themself in a frenzy of hitting the spacebar, each and every space is then counted as a word which thwarts the final count. Below is the code for you to see for yourselves.
What I am asking is as follows:
1) Is there a way to count only one space after each word and ignore multiple spaces?
2) Can I prevent multiple spaces in the textarea?
Since I am suspecting that the solution dwells within the realm of javascript, I kindly ask for your help as I am still a noob. I will be grateful for any suggestions, be it 1) or 2).
HTML:
<div class="options">
Task:
<textarea type="text" rows="10" cols="97" name="task" id="task" onkeypress="onTestChange01();"
autocorrect="off" spellcheck="false"></textarea>
<p>Word count: <textarea cols="10" name="count" id="count" readonly>0</textarea></p>
</div>
JAVASCRIPT:
// WORD COUNTER FUNCTION
var count = document.getElementById('count');
var input = document.getElementById('task');
input.addEventListener('keyup', function(e){
wordCounter(e.target.value);
});
function wordCounter(text) {
var text = input.value;
var wordCount = 0;
for (var i = 0; i <= text.length; i++) {
if (text.charAt(i) == ' ') {
wordCount++;
}
}
count.innerText = wordCount;
}
I tried fiddling with the JS function and its values.
Also, I found a function to change multiple spaces to one space, which did not work as expected and it disrupted the original function and the counting.
Finally, I tried preventing 'space' altogether in the textarea properties but all in vain.
Looking forward to your ideas. Thanks.
tk
First of all: Svelte is still new to me. I hope the question is not too trivial.
Within a simple component I want to use the content of a formatted input field for a calculation.
For example:
In the input field a Euro amount should be displayed formatted (1.000).
Next to it a text with the amount plus VAT should be displayed (1.190).
How I do this without formatting is clear to me. The example looks like this:
export let net;
export let vat;
$: gross = net + (net * vat / 100);
$: grossPretty = gross.toLocaleString('de-DE',{ minimumFractionDigits: 0, maximumFractionDigits: 0 });
with a simple markup like this:
<form>
<label>Net amount</label>
<input type="text" step="any" bind:value={net} placeholder="Net amount">
</form>
<div>
Gros = {grossPretty} €
</div>
In vue i used a computed property. Its getter delivers the formatted string and its setter takes the formatted string and saves the raw value.
(In data() I define net, in the computed properties i define netInput. The input field uses netInput as v-model).
It looks like this:
netInput: {
get(){
return this.net.toLocaleString('de-DE',{ minimumFractionDigits: 0, maximumFractionDigits: 0 });
},
set(s){
s = s.replace(/[\D\s._-]+/g, "");
this.net = Number(s);
}
}
How can I handle it in svelte?
You can do something somewhat similar, you create another computed variable that stores the deformatted string from the input field and is used in the calculation instead of the direct input
export let net;
export let vat;
$: net_plain = Number(net.replace(/[\D\s._-]+/g, ""));
$: gross = net_plain + (net_plain * vat / 100);
$: grossPretty = gross.toLocaleString('de-DE',{ minimumFractionDigits: 0, maximumFractionDigits: 0 });
But maybe find a better name for the variable :)
Thanks to Stephane Vanraes I found a solution.
It has not the charm of the vue approach but it's ok. First I inserted 'net_plain'. To have the input field formatted during input, I added an event listener for the keyup event.
<input type="text" step="any" bind:value={net} on:keyup={handleKeyUp} placeholder="Net amount">
The event is handled from the function handleKeyUp as follows:
function handleKeyUp(event){
if ( window.getSelection().toString() !== '' ) {
return;
}
// ignore arrow keys
let arrows = [38,40,37,39];
if ( arrows.includes( event.keyCode)) {
return;
}
let input = event.target.value.replace(/[\D\s._-]+/g, "");
input = input ? parseInt( input, 10 ) : 0;
event.target.value = ( input === 0 ) ? "" : input.toLocaleString( "de-DE" );
}
BUT: If anyone has a solution using getter and setter I would appreciate the anwer!
My problem: building a Dart form according to the book. Below, my basic sample that looks like JS. It works fine but I get this warning: The getter value is not defined for the class Element.
My question: how can I write a better Dart code to avoid this warning message? Thanks.
HTML:
<form>
<input type="number" min="0" id="enter-x">
<input type="number" min="0" id="enter-y">
<input type="button" id="result" value="Submit">
<input type="reset" id="raz" value="Reset">
<input type="text" id="s" readonly>
</form>
DART:
import 'dart:html';
import 'dart:core';
main() {
document.querySelector('#result').onClick.listen((e) {
calculateS();
});
}
calculateS() {
var x = int.parse(document.querySelector('#enter-x').value);
var y = int.parse(document.querySelector('#enter-y').value);
var surface = (x * y).toString();
document.querySelector('#s').value = surface;
}
Dart helps with hints and warning to find errors in your program.
The generic Element doesn't have a value field. The Dart program is still valid and should work as expected and doesn't cause any errors or warnings at runtime because the actually returned element is the more specialized TextInputElement or NumberInputElement which has a value field.
To silence the analyzer, make this more clear by adding a "cast"
calculateS() {
var x = int.parse((document.querySelector('#enter-x') as NumberInputElement).value);
var y = int.parse((document.querySelector('#enter-y') as NumberInputElement).value);
var surface = (x * y).toString();
(document.querySelector('#s') as TextInputElement).value = surface;
}
Try it at DartPad
See also:
https://api.dartlang.org/1.12.0/dart-html/InputElement-class.html
Dart 'query' explicit cast
What is the syntax for implicit cast operator in dart?
https://www.dartlang.org/docs/dart-up-and-running/ch02.html#operators
I use jquery mobile sliders:
<div data-role="fieldcontain">
<input type="range" name="slider1" id="slider1" value="0" min="0" max="255" />
</div><br><br>
<div data-role="fieldcontain">
<select name="switcher1" id="switcher1" data-role="slider">
<option value="0">Off</option>
<option value="255">On</option>
</select>
</div>
It should work in the following way:
if switcher1 is touched, then slider1 value should be set either to 0 or to 255;
if slider1 value is changed, then (a) if it is = 0, then switcher1 should be set to 0, (b) else switcher1 value should be set to 255.
I've tried to do so with change event (the same is used for switcher1 change()):
var slider1_val = "0";
$('#slider1').change(function () {
sVal = $(this).val();
if (slider1_val !== sVal) {
$("#slider1").val(sVal).slider("refresh");
if (sVal == 0) {
$("#switcher1").val(0).slider("refresh");
} else {
$("#switcher1").val(255).slider("refresh");
}
slider1_val = sVal;
}
});
But looks like each call of refresh calls change event, so I am getting infinite loop.
It should work in the following way:
if switcher1 is touched, then slider1 value should be set either to 0 or to 255;
if slider1 value is changed, then (a) if it is = 0, then switcher1 should be set to 0, (b) else switcher1 value should be set to 255.
I've tried to do so with change event (the same is used for switcher1 change()):
The fact that you have two very different criteria for changing each control should tip you off that the change event handlers should be different as well. Using the same handlers leads to the infinite loop you are experiencing. The code below accounts for the strict change criteria you've provided. Note that the slider1 change handler changes switcher1 only if it needs to be changed (based on your criteria), not every time it is called. Also, note that in the slider1 change handler, switcher1_val is set before calling refresh, so that in case .slider('refresh') does call the change handler, the change handler will not do anything, because switcher1_val is already updated.
var linkSliders = function(sliderId, switcherId){
var slider = $('#'+sliderId),
switcher = $('#'+switcherId);
var min = Math.min(switcher[0].options[0].value, switcher[0].options[1].value),
max = Math.max(switcher[0].options[0].value, switcher[0].options[1].value);
var sliderVal = switcherVal = min;
// set the slider min/max to be the same as the switcher's, just in case they're different
slider.attr('max', max).attr('min', min).slider('refresh');
slider.change(function(){
var sVal = $(this).val();
if(sliderVal != sVal){
if( sVal == min && switcherVal!=min){
switcherVal=min;
switcher.val(min).slider('refresh');
}else if(sVal>min && switcherVal!=max){
switcherVal=max;
switcher.val(max).slider('refresh');
}
sliderVal = sVal;
}
});
switcher.change(function(){
var sVal = $(this).val();
if(switcherVal != sVal){
slider.val(sVal).slider('refresh');
switcherVal = sVal;
}
});
};
linkSliders('slider1','switcher1');
See the live example.
Hope this helps.
Update: As requested, the example has been modified to make it more general.
Facebook has this unique and clever approach to localization of their site: translators (in their case users that help to translate the site voluntarily) can simply click on the not-yet-translated strings – which are marked with a green bottom border – in their natural context on the site. See http://www.facebook.com/translations/.
Now, if you ever had to deal with the translation of a website, you'll be well aware of how odd and funny some of these translations can be when using tools like poedit where the translator isn't fully aware of the spot the translated string will lated appear in on the website.
Example: Please translate "Home". In German, for instance, the start page of a website would be "Home" while the house you live in is "Heim". Now, you as the translator basically have to guess which context this term is likely to appear in on the website and translate accordingly. Chances are, you're new website on home furniture now translates as "Home-Einrichtung" which sounds ridiculous to any German.
So, my question boils down to:
Do you know any open source PHP projects that work on something like this? I'm basically looking for a framework that allows you to put your internationalized website in "translation mode" and make strings clickable and translatable e.g. through a Javascript modal.
I'm not so much looking for a full-fledged and ready-made solution, but would love to know about similar projects that I can contribute code to.
Thanks in advance!
If you want to roll your own with jquery & jquery browserLanguage, this might get you going.
Tag all translatable text's contain elements with class="i18n", and include jquery, jquery browserLanguage, and your i18n script.
1. the internationalization javascript
— this needs to accept translations via ajax from your server, like:
var i18n = {};
i18n.bank = new Array();
i18n.t = function ( text, tl=$.browserLanguage ) {
var r = false;
$.ajax({
url: "/i18n_t.php?type=request&from="+ escape(text) +"&tl="+ tl,
success: function(){ i18n.bank[text] = this; r = true; }
});
return r;
};
2. php i18n translation service
— now we need to serve up translations, and accept them
the database will look like a bunch of tables, one for each language.
// SCHEMA for each language:
CREATE TABLE `en`
(
`id` INT PRIMARY KEY AUTO INCREMENT NOT NULL,
`from` VARCHAR(500) NOT NULL,
`to` VARCHAR(500) NOT NULL
)
the php will need some connection and db manipulation.. for now this may do:
//Connect to the database
$connection = mysql_connect('host (usually localhost)', 'mysql_username' , 'mysql_password');
$selection = mysql_select_db('mysql_database', $connection);
function table_exists($tablename, $database = false) {
if(!$database) {
$res = mysql_query("SELECT DATABASE()");
$database = mysql_result($res, 0);
}
$res = mysql_query("SELECT COUNT(*) AS count FROM information_schema.tables WHERE table_schema = '$database' AND table_name = '$tablename'
");
return mysql_result($res, 0) == 1;
}
the code is simply:
<?php
// .. database stuff from above goes here ..
$type=$_GET["type"];
$from=$_GET["from"];
$to=$_GET["to"];
$tl=$_GET["tl"];
if (! table_exists($tl)) {
...
}
if ($type == "request") { // might want to set $tl="en" when ! table_exists($tl)
$find = mysql_query("SELECT to FROM `'$tl'` WHERE from='$from'");
$row = mysql_fetch_array($find);
echo $row['to'];
} elsif ($type == "suggest") {
$find = mysql_query("SELECT COUNT(*) AS count FROM `'$tl'` WHERE from='$from'");
if ( !(mysql_result($res, 0)) == 0 ) {
$ins = mysql_query("INSERT INTO `'$tl'` (from, to) VALUES ('$from','$to')");
}
}
?>
3. page translation mechanics
— finally we can tie them together in your webpages with some further jquery:
i18n.suggest = function (from) { // post user translation to our php
$.ajax({
url: "/i18n_t.php?type=suggest&from='+from+'&to="+ escape( $('#i18n_s').contents() ) +"&tl="+ $.browserLanguage,
success: function(){ $('#i18n_t_div').html('<em>Thanks!</em>').delay(334).fadeOut().remove(); }
});
};
$(document).ready(function() {
i18n.t("submit");
i18n.t("Thanks!");
$('.i18n').click( function(event) { //add an onClick event for all i18n spans
$('#i18n_t_div').remove;
$(this).parent().append(
'<div id="i18n_t_div"><form class="i18n_t_form">
<input type="text" id="i18n_s" name="suggestion" value="+$(this).contents()+" />
<input type="button" value="'+ i18n.bank[ "submit" ] +'" onclick="i18n.suggest( '+$(this).contents()+' )" />
</form></div>'
);
}).each(function(){
var c = $(this).contents(); //now load initial translations for browser language for all the internationalized content on the page
if ( i18n.t(c) ){
$(this).html(i18n.bank[c]);
}
});
});
Mind you I don't have a server to test this on... and I don't actually code php. :D It will take some debugging but the scaffolding should be correct.