JavaScript/CSS - Update value *and* size of multiple input elements - javascript

I have a numerical base conversion page with html, javascript and css (no external jquery) where I type into one input field and then in real time it updates multiple other input fields with a corresponding value in a different base for each input field. These multiple values, about 5 dozen of them, are all different lengths, so I manually set up each of their input lengths with size="43", size="50", etc. Is it possible to also in real time update the size of each input field to match its dynamically-updated content, with javascript and css but not jquery? Each one is also in its own div if that helps, or it could be in its own span if needed.
I have tried at least half a dozen suggestions I found online but none have worked so far, because they all depend on either 1) "onkey" or "blur" events, of which there are none except on my 1 input field where I type, so that does not work for any of the other dozens of fields, or 2) updating one specific input field by specific name, and that doesn't apply either because I have dozens, each with a different input id.
A short and elegant solution would be preferable but I'm willing to try anything. thanks!

Use the setAttribute command to change the value of elements.Refer to the sample below.
HTML
<td><input type=text name=script_id id="id" onblur="myFunctionY(this)" placeholder="19506"></td>
<td><input type=text name=dep id="dep" placeholder="dependency"></td>
JS
<script type=text/javascript>
function myFunctionY(vari) {
console.log(vari.value);
document.query_form.dep.setAttribute("value",vari.value);
}
</script>
dep is the id for an input element
query_form is the form name
Essentially, call a function onblur,which then gets the input value entered.Use the setAttribute function for the form name to update a particular value of an input field.

solved it myself with :
document.getElementById("foo").style.width = ((document.getElementById("foo").value.length + 1) * 6.5);
it's pretty close, not 100%, as far as the style width matching the input element contents, but at least it's dynamic which is what I was looking for.

Related

How to reset a input tag field after taking one input to take another one

I wanted to create a calculator using HTML and JavaScript. I have already written the code and it works. But the main problem is that I cannot reset the input tag after I have already taken one input(like a calculator). I have an input tag like this:
Enter First Number:
<input id = "num1" placeholder = "First Number"/>
In my JavaScript there are functions like sum() which requires two numbers and functions like sine() which requires one number. So I want the input tag to be reset for taking another input after the first one for the sum() function. How do I do that?
Do you use jQuery? Can you give us a little overview of your code?
Its hard to give you an advice when we dont know the code.
In case of jQuery you can empty the inputs value by
$("input").val("") //Replace input with the fitting selector
If you are not using jQuery you can use:
document.getElementById('num1').value="";
This will clear the current value of the element. You should make sure that you have saved off the current value before you do this though.

What is best way to make a calculation with input values from a html form?

I have a product form with 3 inputs
Price (fixed number)
Quantity (an input with type="text" where the user can enter a number)
Optional extra (a checkbox that the user can tick to add a number)
So far I have been using Javascript to get the value of the html elements, and then adding them and outputting the result into a html element.
I need the form to update on the fly, so that a user can enter a number into quantity and tick the box and the result update live. Unfortuantely I have been unbale to find a way to set variables when there is an update in a field, please see the link below of what I have done so far.
http://jsbin.com/tapen/2/watch?html,css,js,output
With Jquery its very easy to acess the value of an input field, or to set events to will execute when the field value is changed / updated.
As a pratical example i would suggest that you take a look in the code of a sample calculator using only jquery and html: http://firstemission.blogspot.com.br/2012/10/jquery-and-watermark-example.html

Limit for Hidden Fields in HTML Form

<input type="hidden" value="Is there any limit that how many Hidden Fields ? "/>
Is there any limit for the how many Hidden Fields can be used in the HTML Form?
If Yes, can you please elaborate the reason..?
Thanks..!
There is "NO" limit over how many hidden fields are there in a form..!
But, when you are trying to POST the value of all the hidden fields and normal should not more than post_max_size which is defined in php.ini
No. As long as each field has a unique name you are fine using as many as you would like:
<input type="hidden" name="must-be-unique" value="Some value"/>
EDIT: There is an exception to the unique name rule. In the case of radio buttons or anything where you'd like the data to be passed as an array, you may use the same name for multiple inputs.
Actually there are some PHP parameters that control/effect the processing of inputs $_POST and $_GET data.
These are
max_input_vars = ?? // default is 1000, the number of fields php will process
max_input_time = ?? // maximum time in seconds a script is allowed to parse input data, like POST and GET
post_max_size = ?? // Sets max size of post data allowed.
These are not specifically related to "hidden" fields but to the total number of fields or size of the buffer. If your hidden fields are the last fields defined on your form and the number of fields or size of POST buffer is to large, php just stops processing when the limit it reached. However you should see at least a warning in your php error log to say something like this has happened.
In case you are generating hidden fields dynamically using JS for example you can limit, else you cannot control and having many fields may make your page performance bad
You can make periodical check using JS to count hidden fields and you may delete last added ones based on your implementation
Also you can have N elements with same name in HTML but in PHP I don't know if you will face limitation or not
function checkDOMChange()
{
// check for any new element being inserted here,
// or a particular node being modified
// call the function again after 100 milliseconds
setTimeout( checkDOMChange, 100 );
}
Some browsers (ex: Netscape, IE) have a limit for hidden field content size, but not for field count. In those situations the quick walkaround is to divide content into multiple hidden fields.

reset value of multiple (but not all) form fields with jQuery in one line

Is it possible to reset multiple form fields in one line, or one hit, with jQuery. Note: I don't want to reset all form fields, only a specified whitelist (as below):
// reset some form fields
$('#address11').val('');
$('#address21').val('');
$('#town1').val('');
$('#county1').val('');
$('#postcode1').val('');
It is better to use a class so you do not have to maintain a long list of ids.
HTML
<input type="text" class="resetThis" id="address11" />
<input type="text" class="resetThis" id="address21" />
JavaScript
$(".resetThis").val("");
jQuery (and CSS) selector strings can contain multiple selectors using a comma as a delimiter for sub-selectors:
$('#address11, #address21, #town1, #county1, #postcode1').val('');
I'd argue that this is faster than using a class (ID look-ups should perform in essentially constant time, whereas a class look-up will have to visit every DOM node), but perhaps less maintainable if you're going to want to change which elements get reset.
If you have a lot of fields i'd label the ones you want to ignore with a class to minimise code:
$('#myForm input:not(.ignore)').val('');
You can use $('#Form_name select:not(.fixed)').val('');

Set value to hidden column with jquery

I am trying to set value to a hidden column. Previously i have achieved this by doing:
var bc = $("select[title='Broadcast Channel']").val();
$("select[title='Execution Channel']").val(bc);
This works fine as I am able to get the column which exist in html source.
Now I am trying to set value to a hidden column which I have hidden in Sharepoint 2010 list setting. And I am not able to find it under html source (e.g. <input type=hidden....>).
How can I set value to this hidden column?
Not sure if the following method will be acceptable to you, but here goes...
In sharepoint, make the input field non-hidden. Instead, make it invisible at document.ready() using JQuery. If the input field is given a specific ID/class name, you can get a reference to the same, and set the text (using text() function), or for more complex situations, consider enclosing it all in a div.
Best Regards,
Gopal Nair.
In share point make the field as text input and then using jquery make it hidden and then set the value. try something like
$('input[type="text"][title="abc"]').attr('type','hidden').val("abc");
There is a common problem that if an element is hidden from back end code, normally it is simply not rendered in the html generated. Elements that needs to be manipulated at the front end need to be shown but hidden using html or js code.

Categories

Resources