Let's say for example I have this code:
<input type="file" id="file" name="">
<input class="uploadarea">
<span class="button">Browse</span>
Now I've setupped some css to change the default input file button's look, And now the question is, How do i change .uploadarea's value depending on the value of #file when I select a file?
I currently have this code but I don't know what to do next.
var x = document.getElementsByTagName('input');
inputfile = x[0];
textbox = x[1];
Add an onchange handler to handle the change event on the file event :
<input type="file" id="file" name="" onchange="something(this.value)">
<input id="somethinghere" class="uploadarea">
<span class="button">Browse</span>
function something(val) {
document.getElementById('somethinghere').value = val;
}
You need to add the id attribute for this to work
Yes. Use onchange.
And by the way read alternate to onchange event in <input type='file' />. There are some problems with JS manipulation after file select.
Simple jQuery code:
$('#file').change(function(){
$('.uploadarea').val(this.value);
});
pure Javascript:
<input type="file" id="file" onchange="foo()" />
<input class="uploadarea" id="other" />
function foo(){
document.getElementById('other').value = this.value
}
Related
I have project written in Angular and I want to style input type file. So in the Internet I have found solution that I have to hide input type file and call its event programmatically. But below code doesn't to work:
<input type="button" id="addImgFile" value="Add file"
onclick="var addImgFile = document.getElementById('addImgFile'); var event = new Event('change'); addImgFile.dispatchEvent(event);" />
<input type="file" name="avatar" id="addImgFile" style="display:none;"
(change)="onFileChange($event)" />
Instead of using another input you could use label to get your desire style. Here is an example
In Angular, you should use the ViewChild property dectorator to access to the element. You can then manually execute any method you need from your typescript file. Here is a basic example: https://stackblitz.com/edit/angular-nfdvsr
<input type="button" id="addImgFile" value="Add file" (click)="onAddFile()" />
<input #file type="file" name="avatar" id="addImgFile" style="display:none;"
(change)="onFileChange($event)" />
#ViewChild('file', { static: true })
private file: ElementRef;
onAddFile() {
// manually click the file element
this.file.nativeElement.value = null;
this.file.nativeElement.click();
}
Not quite clear what you want to achieve, but if you just want to hide the input field in beginning and show it only on click of "add file" button then you can try changing button's event as per below code.
<input type="button" id="addImgFile" value="Add file" onclick="var addImgFile = document.getElementById('addImgFile1'); var event = new Event('change'); addImgFile.dispatchEvent(event);" />
<input type="file" name="avatar" id="addImgFile1" style="display:none;" onchange=" event.target.style=''; event.target.click()" />
I need each instance of input and submit to operate independently. What is the best way to handle multiple instances where each submit is connected to it's own set of inputs?
Since they are unrelated, would data-attributes be the best solution?
$(document).ready(function() {
validate();
$('input').on('keyup', validate);
});
function validate() {
var inputsWithValues = 0;
var myInputs = $("input:not([type='submit'])");
myInputs.each(function(e) {
if ($(this).val()) {
inputsWithValues += 1;
}
});
if (inputsWithValues == myInputs.length) {
$("input[type=submit]").prop("disabled", false);
} else {
$("input[type=submit]").prop("disabled", true);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item1">
<div><input type="text" name="name" autocomplete="off" required/></div>
<input type="submit" value="Submit 1" />
</div>
<div class="item2">
<div><input type="text" name="name" autocomplete="off" required/></div>
<div><input type="text" name="name" autocomplete="off" required/></div>
<input type="submit" value="Submit 2" />
</div>
I think your intuition about using data attributes works great here.
var allButtons = document.querySelectorAll("input[type=submit]");
allButtons.forEach(button => {
button.addEventListener("click", () => {
var inputSet = button.getAttribute("data-input-set");
var inputs = document.querySelectorAll("input[type='text'][data-input-set='" + inputSet + "']");
});
});
In the following code, when an input button is pressed, it will fetch all the inputs with the corresponding "input-set" tag.
Preferred way
I think best solution would be use form -tag as it is created for just this use case HTML Forms.
<form id="form-1">
<input type="text"/>
<input type="submit>
</form>
<form id="form-2">
<input type="text"/>
<input type="submit>
</form>
You can also bind custom Form on submit event handlers and collect form data this way.
$('#form-1').on('submit', function(event){
event.preventDefault(); // Prevent sending form as defaulted by browser
/* Do something with form */
});
Possible but more bolt on method
Alternative methods to this would be to create your own function's for collecting all relevant data from inputs and merge some resonable data object.
I would most likely do this with giving desired class -attribute all inputs I would like to collect at once eg. <input type="text" class="submit-1" /> and so on. Get all elements with given class, loop through all them and save values into object.
This requires much more work tho and form -tag gives you some nice validation out of the box which you this way have to do yourself.
I am providing multiple check-box and radio button when i enter any value in text field than the same value will assign to radio button and How it is possible using jQuery. Below is the image for reference. I am storing Question and multiple answer and i am going to store true answer out of them like shown in image.
$data = array();
for($i=0,$j=1;$i<count($_REQUEST['quiz_options']);$i++,$j++)
{
$data["quiz_Options".$j] = $_REQUEST['quiz_options'][$i];
}
$data["quiz_Id"] = $Quiz_ID;
$data["quiz_Correct_Answer"] = $_REQUEST['quiz_opt'];
$quiz->insertOptions($data,'quizoptions');
<input class="col-md-4" type="text" name="quiz_options[]" value=""/>
<input type="radio" name="quiz_opt[]" value=""/>
//Here I want to assign my textfield value to the radio button when i write something in my text field.
Please see the example here
You could attach a keydown event to the the textbox and update the value of the radiobutton.
something like this(pseudocode):
$('#textboxId').on('keydown',function(){
$('#radiobuttonId').val($(this).value);
});
Maybe you can use a data attributes (HTML5)
Example
:)
You have to on blur or onchange and should use one class for all dynamic textbox creation. try this code
<input name="quiz_options[]" class ="changesNo1" value="" />
<input name="quiz_options[]" class ="changesNo1" value="" />
<input name="quiz_options[]" class ="changesNo1" value="" />
<input type=radio value="" name="quiz_opt[]">
<input type=radio value="" name="quiz_opt[]">
<input type=radio value="" name="quiz_opt[]">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var test_arr = $("input[name='quiz_options[]']");
$(document).on('change keyup blur','.changesNo1',function(){
$.each(test_arr, function(i, item) {
$("input[name='quiz_opt[]']").val($(item).val());
var d=$("input[name='quiz_opt[]']").val(); // your reference
//alert(d); // This alert for your reference
});
});
</script>
I wanna ask if is it possible to do very basic math inside form's input text field using AJAX? I know its possible with javascript/jquery but I don't want to having to clicking submit button and reload the page to see the result. I want the math calculation with instant result inside the input text field.
example:
Input Text Field 1 + Input Text Field 2 = (Shows Instant Result in Input Text Field 3)
You may do the following
http://jsfiddle.net/dharam1987/L9evdhkk/
Val 1 <input type="text" name="f1" id="f1" /> <br />
Val 2 <input type="text" name="f2" id="f2" /> <br />
Result <input type="text" name="res" id="res" /> <br />
<input type="button" value="Add" onclick="calculate();" />
<script>
function calculate() {
var f1 = parseInt(document.getElementById('f1').value);
var f2 = parseInt(document.getElementById('f2').value);
var res = f1 + f2;
document.getElementById('res').value = res;
}
</script>
You can do that using javascript/jQuery. Ajax has nothing to do with it. Use a change or keypress event.
This should give you the idea:
$("myInputSelector").on("keyup", function () {
var theTwoSelectors = $("myInputSelector"),
total = 0;
theTwoSelectors.each(function () {
var value = $(this).val();
if(value)
total += parseInt(value);
});
$("myResultSelector").val(result);
});
You can use this simple HTML
Lets try an Example for the above requirement
example:
We can simply use the tag
here the below output tag will show the result of input tag "a" value multiply by 5...
<form oninput="o.value = parseInt(a.value) *5">
<input type="number" id="a" name="a">
<output name="o" id="o"></></output>
</form>
more information please refer this link http://www.w3schools.com/tags/tag_output.asp
how can i get a specific element of a text input into a variable via javascript, in other words take the example below
<form id="123">
<input type="text" id="supply_qty" />
<input type="submit" name="submit" id="123" />
</form>
How do i get the element within the text input into a variable when the submit button is clicked, the problem i have is that i have multiple instances of the code above, with lots of text inputs, so i only want to get the element specific to the submit button clicked. Hopefully you will get what i mean. The reason i need this done via JavaScript and not php etc... is that i later want to use ajax with it, but for the moment i just need the variable.
Thanks
The most easiest way is to give and id to the element and user getElementById() method to grab the element on variable. Just like what you are doing right now
Simple Example:
var button = document.getElementyById("123");
button.onclick = function() {
var text = document.getElementById('supply_qty'); //now you got your element in varaiblle
};
Using jQuery make a slight change to your markup. I am just going to add some classes.
<form>
<input type="text" class="textbox" />
<input type="submit" class="submit" name="submit" />
</form>
then
$(".submit").click(function() {
var txtbox = $(this).parent("form").children(".textbox")[0];
});
Or, it might be better to bind to the submit handler of the form, on that case, give a common class to the form.
<form class="tinyforms">
<input type="text" class="textbox" />
<input type="submit" class="submit" name="submit" />
</form>
Then
$('.tinyforms').submit(function() {
var txtbox = $(this).children(".textbox")[0];
});
If you accept using jQuery you can do this:
DOM
<form class="form" action="false">
<input type="text" value="some input" name="textInput" />
<input type="text" value="some text" name="textInput2" />
<input type="submit" class="sumbit" value="Send" />
<div id="results"></div>
</form>
And JavaScript
$(".form").submit( function(){
var inputs = $(this).serializeArray();
$.each(inputs , function(i, input){
$("#results").append(input.value + "<br />");
});
return false;
} );
EDIT: Updated code and Fiddle: http://jsfiddle.net/65Xtp/4/