Develop Reference

Trying to put an "€" sign into a input - but no luck

I'm trying to put a euro sign inside an input but despite everything, I can't get it to work.
It's a plugin that display a slider for a form, I tried to add a div to contain this input inside the plugin file, but it doesn't work either.
Here's what I tried, but I'm not sure if it can work this way with javascript
var input = $( "#input_1_30" );
input.val( input() + "€" );
<div class="ginput_container"><input name="input_30" id="input_1_30" type="number" step="500" min="0" max="250000" data-value-visibility="show" data-connect="lower" value="25000" class="slider large" data-min-relation="" data-max-relation="" data-value-format="decimal_dot">
Thanks

As I said in my comment, I used HTML text input field with currency symbol
<label>€
<input name="input_30" id="input_1_30" type="number" step="500" min="0" max="250000" data-value-visibility="show" data-connect="lower" value="25000" class="slider large" data-min-relation="" data-max-relation="" data-value-format="decimal_dot">
</label>
This isn't a job for JS. Place the € next to the form input in html and style it accordingly using CSS.
Edit
The benefit of using a label here is that clicking the contents of the label brings the input into focus, which other methods wouldn't do by default.

I am not entirely sure what you want to do but what you can do is add the euro sign as a placeholder in the input field but it will disappear after a user adds their earnings.
If you still want add it in the placeholder attribute, you can do this in the input tag
<input placeholder="€"/>
I hope this helped and if you want to know more about placeholders and input tags you can check INPUT Placeholder Attribute (MDN).

ng-required does not work with number input with min condition

I have a checkbox, based on value of its ng-model, I'm toggling visibility of a div using ng-show.
This div contains an <input> of type="number". I have a validation on it of min="10000".
I dont want the form to get submitted if the number input is less than 10000.
However, I want this only to happen when the checkbox is checked.
So, I'm using ng-required to check the value of checkbox.
<input type="checkbox" ng-model="isOn"/>
<div ng-show="isOn">
<input type="number" min="10000" ng-model="counter" ng-required="isOn"/>
</div>
If someone proceeds without touching the checkbox and the input field, the form get submitted.
However, if I click the checkbox, enter a number<10000, and the uncheck it again, the form doesn't get submitted.
On the console I get error that it cannot focus on the the input control.
The ng-required fails to work on the min condition. It is being checked regardless of ng-required.
Is there any way I can get this working?
PS: I dont want to use the solution with text input + length limit + restricted char codes on key press so that only numbers could be typed.

you need to reset the model of the number input field to its initial state as well when user unchecks the checkbox.

I used ng-if instead of ng-show and it worked.
I had tried it before I posted the question, but it didnt work. Later I realized I had done the change on a different html file.

I hope this should work
<form name="MyForm" novalidate >
<input type="checkbox" ng-model="MyForm.isOn" required/>
<div ng-show="MyForm.isOn.$touched||MyForm.$submitted">
<span class="errormsg" ng-message="required" ng-show="MyForm.counter.$error.required">Please select the checkbox</span>
</div>
<div ng-show="MyForm.isOn">
<input type="text" ng-model="MyForm.counter" required min="1000" />
<div ng-show="MyForm.counter.$touched||MyForm.$submitted">
<span class="errormsg" ng-message="required" ng-show="MyForm.counter.$error.required">You can't leave this empty</span>
<span class="errormsg" ng-message="required" ng-show="MyForm.counter.$error.min">Value should be atleast 1000</span>
</div>
</div>
</form>

jQuery, input elements with the same data attribute value but one is hidden, fill in same data on keyup

jQuery, input elements with the same data attribute value but one is hidden, fill in same data on keyup.
I have 2 forms on a page with dynamically created form fields from a database via .NET MVC.
I have one form visible and one form that is hidden.
I know how to copy, on keyup, the values from one form field to another IF I have known element classes or Id's. This is not the case on dynamically created fields. I can not guarantee that all fields will come back in the same order in each form.
So what I did was I created a 'data' attribute and output the "Model.Name" on the input field. In my case I am lucky enough that the 2 forms have fields with the same "Model.Name" values. So I am able to do a match on that. But since the forms are built dynamically I need a few things to happen and I need some pointers.
I need to know how to copy field inputted values from the visible form fields to their matching hidden form fields with the same "data" attribute value. I won't necessarily know the actual data-attribute value since the input fields are getting created dynamically.
How would this work to get the matching form fields.
I have a basic JS Fiddle set up.
https://jsfiddle.net/mb91ktbg/6/
HTML
<!--I know the class of the wrapping form -->
<!--All data values are dynamic, so I don't know then on page load-->
<div class="masterFieldWrapper">
<!--Need to copy these input values to the sub field wrapper input values-->
<label>Field one</label>
<input type="text" data-myattribute="dynamicvalue" />
<label>Field Two</label>
<input type="text" data-myattribute="dynamicvalue2" />
<label>Field Three</label>
<input type="text" data-myattribute="dynamicvalue3" />
<!--I know the class of the sub field wrapper-->
<!--I would like to copy the inserted values from the parent wrapper fields to the sub field wrapper fields with the same data-myattribute value-->
<!--I can not assume the fields come back in the same order. This is why I need to use the data attribute value-->
<div class="subFieldWrapper">
<label>Field One</label>
<input type="text" data-myattribute="dynamicvalue" />
<label>Field Two</label>
<input type="text" data-myattribute="dynamicvalue2" />
<label>Field Three</label>
<input type="text" data-myattribute="dynamicvalue3" />
</div>
</div>
jQuery Started but not working. need some help please.
$(".masterFieldWrapper input").each(function() {
var fieldVal = $(this).val();
var fieldDataAttr = $(this).data("myattribute");
console.log(fieldDataAttr);
$(this).keyup(function() {
$(this).parent('.masterFieldWrapper').find(".subFieldWrapper input").data("myattribute").val($(this).val());
});
});

Don't know if this would help but, you could dynamically add a class or id to the element and then access like so:
$(".bodyWrapper").on("change", ".form-control", event => {
let value = $('.dynamicValueInput').val();
$('.dynamicValueInputCopy').val(value);
console.log(`body-input-has-changed`);
});

//Try this :)
var mainForm = $(".masterFieldWrapper");
var Input_type = $("input[type='text']");
var Totalinputs = mainForm.find(Input_type).length;
var Visible_inputs = Totalinputs/2;
var auto_fulfill = function(){
for(i=Visible_inputs; i<Totalinputs;i++){
Input_type.eq(i).val(Input_type.eq(i-Visible_inputs).val());
}
}
Input_type.keyup(function(){
auto_fulfill();
})

radio buttons + input field for one of them

I tried the following but it returns two pieces of data to the server. This is a problem for my gateway, and I get an error.
I used this for one of my attempts:
<script type="text/javascript">
if( $('#other).is('):selected') )
{
// user wants to enter own value
$('[name="installments"]").not('[type="text"]').attr('name', '') // remove all
values apart from the entered text.
}
</script>
<body>
<FORM ACTION="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" METHOD="POST">
<br><br>
<input type="radio" name="installments" id="r1" checked="checked" value="99">
Open-Ended - I can stop them via email at any time.<br>
<label for="installments">number of payments</label><br>
<input type="radio" name="installments" id="other" value="Enter Custom.."><br>
<input type="text" name="installments" value="" maxlength="4" size="4">
<br><br><br>
<input type="submit" name="btnSubmit" value="Submit" />
</form>
This returns either -
installments 99
installments (empty)
or
installments Enter Custom..
installments 5
I can only have one return for the var 'installments' either 99 or the number they imputed.
I have tried various ways of doing this using JS and allowing the user to make a choice with the same results - two instances of the var 'installments' being sent.
Is there a javascript way to test the input field and if a number is entered then disable using id(s) the extra radio button so it can't send any data? Or is there a better way to do this?
Solved
I found the answer & Here it is
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#user_input').change(function() {
$('#use_user_input').val($(this).val());
});
});
</script>
And Html Here:
Total number of payments...</span><br>
<input type="radio" name="installments" checked value="99">
Open-Ended -
<input id="use_user_input" type="radio" name="installments" value="">
limited number of payments -
<input id="user_input" type="text" value="" maxlength="4" size="4"></span>

You would want to give the input text field a different name from the radio inputs, then handle the text field's POST as a separate variable from the radio buttons in the HTTP request. Also, give the second radio input a value, such as "other" so you know to handle the associated text input.

If you only have the ability to receive one field from the form you will need to alter the form as the user fills it in. Currently the form works if the user selects one of the values delimited by the radio buttons. The problem, I gather, is that the status of the radio buttons overrides the value of the text field even if the user selects the "other" option of filling in the text box.
The solution is to use a script that is triggered when the user changes the content of the text box. This script will read the value of the text box and assign that value to the 'other' radio button.
We can do this using the onchange event:
<input id="otherRadio" type="radio" name="installments" value="" /><br />
<input id="otherText" type="text" value="" maxlength="4" size="4" onchange="applyOtherOption()" />
If you try this now, it will cause a javascript error on your page when you change the value of the the text field. This is because the browser fails to find a javascript function with the name applyOtherOption. Let's change that now:
<script type="text/javascript">
function applyOtherOption() {
var textField = document.getElementById("otherText");
var radioField = document.getElementById("otherRadio");
radioField.value = textField.value;
}
</script>
The result is that the "other" radio button's value is always changed to whatever the user enters into the text field and if this radio is selected, this is what is sent with the form.
Important
I've been a bit lazy here and typed out the easiest way to access the content of the form elements. This will work on most (probably all major) browsers but it is not the way it should be done. The proper method is to access the form first, then from the form element access the fields. To do it right you should read this article on setting the value of form elements.
I hope this is useful.

Umbraco add linked from page #nodename as text input value on form

How can I add the linked from page #nodename as a text input value on my form?
The input will disabled, so that the user cannot change the text.
<input type="text" name="jobtitle" id="jobtitle" value="Job Title to be Prefilled here by linked from page #nodeName - Disabled field" disabled="disabled" />

I assume this is razor? Try #Model.Name instead.