This question already has answers here:
change type of input field with jQuery
(29 answers)
Closed 8 years ago.
I want to replace an existing file input field entirely with a text input field, with all properties intact like id, name, etc. How do I do that using jQuery?
Prelude:
I have an <input type="file" name=".." id=".." /> that I am using for AJAX based uploads. (yes, For IE, I am submitting the form using IFRAMEs.)
When the upload is done, I go into my success callback function, where I am trying to change the original <input type="file" to <input type="text".
In other browsers, this is working fine when I simply run the following code:
$originalInput[0].type = 'text';
$originalInput[0].value = 'response code';
But this is not working in IE, where I came to know from SO that it is a security concern and hence not allowed. I want to write minimum code for this.
From user2259571's answer, I did this following in a shorter one-line way:
$originalInput
.replaceWith( $originalInput[0].outerHTML.replace(/type="file"/, 'type="input"') );
IE does not allow this, but a workaround can be:
$('body').find('input:file').each(function() {
$("<input type='text' />").attr({value: 'response code' }).insertBefore(this);
}).remove();
possible duplicate of jQuery change input type
I think you can reach this very simple by placing two inputs,
<input type="file" name="somename1" id="someid1"/>
<input type="text" name="somename1-after" id="someid1-after" style="display:none"/>
In you request callback you can remove the type="file" input field, strip the "-after"
suffix and show the type="text" input field.
Long live jQuery
var fileInput = $('input[type="file"]');
var textInput = $('<input type="text"/>');
//can copy properties here
textInput.value = 'response code';
textInput.className = fileInput.className;
textInput.insertBefore(fileInput);
textInput.remove();
var input = $("input[type=file]");
var inputHTML = input.clone().wrapAll("<div>").parent().html();
var newinputHTML = inputHTML.replace(/type="file"/, 'type="text"');
input.replaceWith(newinputHTML);
http://jsfiddle.net/QdZDb/1/
Related
This question already has answers here:
Putting text in a number input doesn't trigger change event?
(3 answers)
Closed 5 years ago.
I have an Input field in my form. I want to be able to past only numbers in this input field.
For example: (Some random characters on my clipboard W123W000)
Should Paste = 123000
Note: Only works in Chrome Browser
I have been searching online and so far I came up with this but it's not working properly.
var inputBox = document.getElementsByClassName('numbersOnly');
inputBox.onchange = function () {
inputBox.value = inputBox.value.replace(/[^0-9]/g, '');
}
<input id="number" type="number" class="numbersOnly">
Use jQuery for cross-browser compatibility and bind the event input to handle every change.
Firefox: <input type="number">
elements automatically invalidate any entry that isn't a number (or empty, unless required is specified).
You can change to type=text, but you will lose the numeric keyboard behavior in devices.
var inputBox = $('.numbersOnly').on('input', function(e) {
e.preventDefault();
$(this).val($(this).val().replace(/[^0-9]/g, ''));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="number" type="text" class="numbersOnly">
I know it's simple and there's probably something wrong with my syntax but I just don't understated it. I'm talking about the following:
//declaration of a string
var str_input = "";
//this is supposed to get the new inputs and to store them in str_input
$(document).ready(function(){
str_input = $('input[name=po]').val();
});
//this is on html side, this should make an input field where the user to type in the needed
<input type"text" name = 'po' id="po" value="asd">
That's it, can you help me to sort it out? The problem so far is that str_input is undefined regardless of what is written in the input, though, it saves its initial value.
Your html tag is invalid:
<input type"text" name = 'po' id="po" value="asd">
Should be:
<input type="text" name = 'po' id="po" value="asd">
// ^ Missing this character (=)
Ok, Now I understood, you can do 2 things, first, you can create a button than when the user clicks it calls the function to store the value in the variable like this:
var str_input = "";
//this is supposed to get the new inputs and to store them in str_input
$(document).ready(function(){
$("#MyButton").click(function(){
str_input = $('input[name=po]').val();
})
});
//this is on html side, this should make an input field where the user to type in the needed
<input type"text" name = 'po' id="po" value="asd">
<input type="button" id="MyButton" value="Click Here" />
Or the blur function when the user lose focus of the input text like this:
var str_input = "";
//this is supposed to get the new inputs and to store them in str_input
$(document).ready(function(){
$('input[name=po]').blur(function(){
str_input = $('input[name=po]').val();
})
});
//this is on html side, this should make an input field where the user to type in the needed
<input type"text" name = 'po' id="po" value="asd">
Ok, so here is the solution, though it's a little bit in "from Alf to Alf" style. So, yes, the code I've posted in the main post uses correctly the 'by default' value of the input but the problem comes from that nothing is checking for further changes in the input text field. I'm using $(document).ready... which as far as I know runs during the web project is opened and of course enables the use of some jquery methods within it. There is an interesting function called .change() which actually put the whole thing up for me. Take a glance at the following:
$(document).ready(function(){
$('input[type="text"]').change(function(){
str_input = $('input[name=polynom]').val();;
});
str_input = $('input[name=polynom]').val();
});
The second, third and fourth line make the magic actually, where the code in the .change() method updates str_input on each time a change have appeared in the input box field, whereas the str_input = $('input[name=polynom]').val(); outside of change() takes into account the initial value of the input. That's it... I knew I was forgetting something and yeah...
P.S. Another approach is to use a function and a button (a.k.a. an event-triggered function) which to 'update' the str_input on event. For this way check the post bellow this one.
I am using localStorage where in I am able to store in previous page and retrive it in this page. (Checked it using alert).
name12=localStorage.getItem("content");
Now my requirement is to display it into the input field and make it non-editable.
Please help me out with it. I have tried different things but I am not able to get it right.
Used onblur="localStorage.setItem(this.name, this.value) in the input tag
and also tried to use
if name_2.value = name12; in script tag
To make a field uneditable, you can use the html attribute disabled on the input field. http://www.w3schools.com/tags/att_input_disabled.asp
To set a default value for a field, you can use the html attribute value. In your case since the value is dynamic, you probably want do not want to do that inline in the html. One possible solution is to set the value attribute through javascript like below.
<script type="text/javascript">
var name2 = document.getElementById("name_2");
name2.value = localStorage.getItem("content");;
</script>
Set the value of an input field
You have to assign the value to input using javascript.
<input username" id="name_2" type="text" placeholder="name" name="name_2" required="required" autofocus="autofocus">
<script>
var n = "5"; // read from storage here
var inpt = document.getElementById("name_2");
inpt.value = n;
inpt.disabled = true;
</script>
There are many places to find this information. Try reading the jquery documentation when you get stuck. For example, here is a page that describes how to set the value of an input element. StackOverflow also has many questions about this topic. A quick google search brings up this question about setting the value of input elements. We can also find SO questions about disabling input elements easily, like this one.
I encourage that you attempt to use more resources to find what you need before bringing your questions here.
Based on the answers to the questions I linked, we can set the input and then disable it to keep the value from changing:
$('#input').val(name12);
$('#input').prop('disabled', true);
This question already has answers here:
Get the value in an input text box
(13 answers)
Closed 8 years ago.
I am very new to programing so sorry if this question is to vague.
I have a simple html input field:
input class="draft" type="text"
and I have a javascript function (the function only accepts strings):
Message.send()
Using javascript/jQuery how do I take the string the user typed into the input field and place it into the Message.send() function (in string form)?
Thanks in advance for any help
jQuery:
Message.send($("input.draft").val());
javascript:
Message.send(document.querySelector("input.draft").value);
No jQuery needed. I'm not sure what you mean by place it into the Message.send() function (in string form), so I assume you get the value in the text input and use it as an argument in the Message.send() function.
Try this:
Message.send(document.getElementsByClassName("draft")[0].value);
Assuming your input field is something like this:
<input type="text" id="someInputField" name="someInputField" class="inputFields" />
You could do this
<script type="text/javascript">
//We use the field's id to refer to it and get to its value (the text in it):
var message = $('#someInputField').val();
//And then you might call the function like:
nameOfTheFuntion(message);
</script>
You would need to have jQuery libraries to make it work though, but you could do without them by replacing:
$('#someInputField').val();
with
document.getElementById('someInputField').val();
Give your <input> box an id for example
<input type="text" id="blah" />
In your javascript you are able to reference the <input> like so:
var strBlah = document.getElementById("blah").value;
Now you have the value typed into the <input> box so you would do the following:
Message.send(strBlah)
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How do I clear all the fields in a variable html content? (preferably with jQuery)
The answer of this question is not find in this question: Blank out a form with jQuery, since I have no form ID to connect to.
I have a text string with a value of a HTML code snippet that has some form elements within, with pre filled values. All fields that are found in this code snippet (only) must be cleared/reset.
You could just create a form, populate it with your string, and then reset it, like so:
var myForm = $('<form>').html(your_string).
find(':input').not(':button, :submit, :reset, :hidden').
val('').removeAttr('checked').removedAttr('selected');
Then it's just a matter of accessing the innerHTML of myForm.
Assuming you have a text string like this:
var txt = '<form id="search" action="/search" method="get" autocomplete="off"><div><input autocomplete="off" name="q" type="text" value="sample"></div></form>'
var $form = $(txt);
$form[0].reset();
var resetTxt = $form.html();