Get textfield value without submit (html) - javascript

Can I get the value of a text field in html without a form and without submit?
I currently have a form on my website and inside this form I have a textfield. Unfortunately I can't have 2 forms at the same time (but I actually need two seperate actions), so I am looking for a way to get the value of the textfield without a submit.
All help is appreciated!

Try document.getElementById("textfield-id").value

document.getElementById('my_txt_box_id').value
where your text box 's id is "my_txt_box_id"
Does that fit your need ?

You can get a reference to the text field element (via getElementById or any of several other DOM mechanisms), and then look at its value property.
Separately, if your form element has a name, and your input element has a name, you can access them via window: window.formName.textFieldName.value I don't think this is covered by an active spec (yet), but it probably will be at some stage (probably by an evolution of this draft spec or a replacement of it) as it's nearly universally supported.
References:
DOM2 Core
DOM2 HTML Bindings
DOM3 Core
HTML5 APIs
Alternately:
...I can't have 2 forms at the same time (but I actually need two seperate actions).
You can have two submit buttons with the same name but different values, and differentiate between which one was clicked on the server (the value for the one that was clicked will be sent). So if you have two submits called "command" and one has the value "Foo" and the other "Bar", clicking the "Foo" button sends command=Foo to the server along with the various form fields, whereas clicking the "Bar" button sends command=Bar to the server with the other fields.

Maybe you can use this jQuery / AJAX to submit the form without refreshing te page?
http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
else you can use javascript:
document.getElementById('id').value

Related

jQuery change function, how to save the state like a session

I am looking for a way with my form I am currently showing and hiding fields based on the values selected in the dropdowns, What I want to know is.
when i select yes and the field below displays I click submit on the form, if I return to the form the value is still present but the field is hidden again...
How can I prevent that from happening by default?
I want my browser to remember the jQuery change funtions state I left it at after I submit the form.
What you want to do is 'refresh fields visibility' in some cases. I suggest you to create such function refreshFieldsVisibility. Such function reads values from the dropdown and shows/hide the proper field. Then call your function:
When elements state is changed, with on('change') events.
When document is ready (this is your case as I understand), with $(document).ready
Any other situation if necessary

how to duplicate the value of one form field in another in jquery

I have a form where a user can chose the applications he has access to? and when he the applications he wants access to, he is presented with more options. One of them is notification email address. if the user choses two applications, he gets two notification email address fields to fill. But both of them are stored in the same column in the database.
There are multiple fields like user authorisation level, user branch etc which are uniform accross all applications.
i am trying to replicate the value of one field in the other with jquery. i tried the below which obviously fails. Can anyone suggest how to acheive the replication?
$("#email").val().change(function() {
$("#email1").val($("#email").val());
});
Edit: I have drop down fields as well as text boxes.
.val() returns a string which cannot have a change event. You need to use
$("#email").change(function() {
$("#email1").val($(this).val());
});
You will want to bind the change event using on or live depending on your version of jquery, if you haven't wrapped this piece of code in a ready block.:
$("#email").on("change",function() {
$("#email1").val($(this).val());
});
This fiddle shows setting a <select> tags value using .val() http://jsfiddle.net/8UG9x/
It is an often asked question:
Copy another textbox value in real time Jquery
depending on when you need this action to execute, but if live
$(document).ready(function() {
$('#proname').live('keyup',function() {
var pronameval = $(this).val();
$('#provarname').val(pronameval.replace(/ /g, '-').toLowerCase());
});
});
http://jsfiddle.net/KBanC/
another one, basically same:
JQUERY copy contents of a textbox to a field while typing

How to select all form fields within a given form element with Prototype?

My question might seem trivial but I can't find resources about selecting elements that are descendant of a given element.
I have a form in which I want all fields (they should be all the inputs and selects that are child of the form tag, except buttons) to submit the form when ENTER key is pressed. Actually I require to call a custom Javascript method to submit the form, instead of merely submitting it the plain old way.
This because I need to raise a different Stripes ActionBean event depending on the button being hit (or in the case of enter key I know what event to fire a priori).
I can apply a custom CSS class to all fields (booooooooooooring) and I can select all form fields in a page with $$('input[type!=button], select').
How to constrain the selection to elements that descend from a given form tags (which has an ID?). The selection will be used to handle the keyup event
$$('input[type!=button],select', '#formid')
* selects all elements.
Something along the lines of
$$('#formId input[type!=button],#formId select')
Haven't been using prototype but i assume most CSS selectors work

dynamically adding textboxes to a form by the click of a button

I am a php programmer .I have a user input form in which a person should be able to add as many text boxes (to enter muliple email ids ) as he wishes , by the click of a button.eg:He clicks the button for the first time an additional text box is added.He clicks the button for the second time , another text box added ....and so on and so forth.
You can create elements via document.createElement, and append them to a form via appendChild, like so:
var textbox = document.createElement('input');
textbox.type = 'text';
document.getElementById('theForm').appendChild(textbox);
(That assumes the form has an id = "theForm", but you can get the reference to the form other ways.)
If you want to wrap it in a label, that's easy, too:
var label, textbox;
label = document.createElement('label');
label.appendChild(document.createTextNode('Another email address: '));
textbox = document.createElement('input');
textbox.type = 'text';
label.appendChild(textbox);
document.getElementById('theForm').appendChild(label);
Live example
If you kick around the DOM specs (DOM Core 2 is the most widely-supported at present, as is the HTML stuff on top of it; DOM Core 3 is getting some support now), you'll find other things you can do — like inserting into the form in the middle rather than appending to the end, etc.
Most of the time, you can use innerHTML to add to DOM structures (it's supported by every major browser, and is getting standardized as part of HTML5), but there are some browser quirks around form fields, specifically, which is why I've gone with the DOM interface above.
You haven't said you're using a library, and so the above is pure JavaScript+DOM. It's fairly simple, but in real world use you can quickly run into complications. That's where a JavaScript library like jQuery, Prototype, YUI, Closure, or any of several others can save you time, smoothing over browser differences and complications for you, allowing you to focus on what you're actually trying to do.
For instance, in the linked example, I had to provide a hookEvent function to handle the fact that some browsers use the (standardized) addEventListener function, while IE prior to IE9 uses attachEvent instead. And libraries will handle the form field quirks I was talking about, allowing you to specify your fields using straight HTML, like this:
Using jQuery:
$("#theForm").append("<label>Another email address: <input type='text'>");
Live example
Using Prototype:
$("theForm").insert("<br><label>Another email address: <input type='text'>");
Live example

How to hide an HTML input field with javascript

I need to hide a text input field with javascript. Changing its type attribute to hidden does not work in IE (security issue).
What would be the best way to do it?
Note: No jQuery or other lib can be assumed.
I assume you have to show and hide the text field dynamically based on changing conditions in the form, otherwise you'd just make it an <input type="hidden"... to begin with.
Keep your code that shows and hides the field as it is, but also catch the onsubmit event.
In the submit handler, get your text field via document.getElementById(...) (or by accessing document.forms[i]) and check to see whether or not it's hidden.
If it is hidden, create a new DOM node for an <input type="hidden" ...> field and add that node to the form, probably via myform.appendChild(...). You'll have to give it the name your server-side code expects. Copy the contents of the hidden text field into the newly created type=hidden field, then return from your submit handler, allowing the standard submit to continue.
You could also just un-hide the text field on submit, but you'd have to move it "off screen" also or the user would see it reappear during submit processing.
Try wrapping it in a div or span and then setting the display style to none when you want to hide it, and then to block (if you used a div) or inline (if you used a span) when you want to show it.
document.myform.myelement.style.display = 'none'
works as expected even in Internet Explorer.
The only way you can change it is before you append it to the DOM. You can make a new element and then replace the current one with it.
Look at replaceChild and createElement since you want to do manual DOM scripting. I assume you know what to do.
EDIT: "Hidden" fields as far as I know are sent. Have you checked whether they are? And you can also just do position:absolute; left:-9999em; to offset them.

Categories

Resources