Remove upload button and filename during image upload - javascript

Using the given form, I first click on "Choose File", open the file,its name comes next to it
and then I click on "Upload" button" to upload the image.What I want to do is click on "Choose File", open the file but the name should not appear next to it and the image should get uploaded without clicking the "Upload button" after this.How can this be achieved?
<div id="image_container" name="image_container">
<img src="../image/ab.jpg" alt="Cover" width="900px" height="500px">
<div class="btn-group" id="cov" name="cov" >
<button class="btn dropdown-toggle" data-toggle="dropdown" id="mybtn" onclick="dropdown()">Action</button>
<ul class="dropdown-menu" id="dropdown-menu" style="display:none">
<!-- dropdown menu links -->
<li><form action="upload.php" method="post" enctype="multipart/form-data" id="MyUploadForm">
<input name="ImageFile" id="imageInput" type="file" />
<label id="fileup" for="imageInput">Upload File</label>
<input type="submit" id="submit-btn" value="Upload" />
<img src="img/loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/>
</form>
<div id="output"></div>
<li>Something else here</li>
<li class="divider"></li>
<li>Another link</li>
</ul>
</div>
</div>
$(document).ready(function() {
var options = {
target: '#output', // target element(s) to be updated with server response
beforeSubmit: beforeSubmit, // pre-submit callback
success: afterSuccess, // post-submit callback
resetForm: true // reset the form after successful submit
};
$('#MyUploadForm').submit(function() {
$(this).ajaxSubmit(options);
// always return false to prevent standard browser submit and page navigation
return false;
});
});

Check this Demo Fiddle.
If you are using jQuery,
$('#imageInput').change(function(){
$("#submit-btn").click(); //$('#MyUploadForm').submit();
});
Or Just,
<input name="ImageFile" id="imageInput" type="file" onChange="this.submit();" />
To hide the filename, you have to manipulate the css, or hide the whole button and place another button in it.

document.getElementById("imageInput").onchange = function() {
document.getElementById("MyUploadForm").submit();
};

What about that?
<input name="ImageFile" id="imageInput" type="file"
onChange="this.submit();this.visibility='hidden';" />

You can use a label to create your own upload button and just hide the input itself.
HTML
<form action="#">
<label for="upload">Pretend Button</lable>
<input type="file" id="upload" name="image">
</form>
JS
$('#upload').on('change', function () {
$(this).closest('form').trigger('submit');
});
CSS
input {
position: absolute;
top: 0;
left: -9999px;;
}
Here is a small demo: http://jsbin.com/rirupeco/2/edit?html,css,js,output

Maybe a lil user experience trick and also inspiration for your request:
When files selected and clicking OK in file-selection-window, it should upload right after. No extra click on Submit, by this:
var flag_fileSelection = false;
$("#element").click(function(){
flag_fileSelection = true;
})
$(window).focus(function(){
if (flag_fileSelection) {
flag_fileSelection = false;
// user is done choosing files
$("#form").submit();
}
})

Related

How to stop my page from reseting after the page is submited

I have a code, who helps me switch between forms, however, when I submit the form, the page will reset and display first(default) tab again. Could anyone help me understand how I can make it so the tab I submit the form from stays there if the submision fails or even if the submision was successfull?
Forms are switching using a little JS code and are submited from a PHP POST method form.
Please find the code below:
Javascript responsible for switching between tabs:
function onTabClick(event) {
let activeTabs = document.querySelectorAll('.active');
// deactivate existing active tab
for (let i = 0; i < activeTabs.length; i++) {
activeTabs[i].className = activeTabs[i].className.replace('active', '');
}
// activate new tab
event.target.parentElement.className += 'active';
document.getElementById(event.target.href.split('#')[1]).className += 'active';
}
const elements = document.getElementsByClassName('nav-tab-element');
for (let i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', onTabClick, false);
}
CSS:
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
And here is the HTML forms:
<body>
<header>
<h1 class="main-header">
Add a New Product
</h1>
</header>
<main>
<ul id="nav-tab" class="nav">
<li class="active">
<a class="nav-tab-element" href="#books">Books</a>
</li>
<li>
<a class="nav-tab-element" href="#dvds">DVD's</a>
</li>
<li>
<a class="nav-tab-element" href="#furniture">Furniture</a>
</li>
</ul>
<form method="POST">
<div class="tab-content active" id="books">
<div class="book-tab">
<input type="text" name="sku" placeholder="test form for books" autocomplete="off">
</div>
<div class="btn">
<input type="submit" value="Submit">
</div>
</div>
</form>
<form method="POST">
<div class="tab-content " id="dvds">
<div class="dvd-tab">
<input type="text" name="sku" placeholder="test form for DVD" autocomplete="off">
</div>
<div class="btn">
<input type="submit" value="Submit">
</div>
</div>
</form>
<form method="POST">
<div class="tab-content " id="furniture">
<div class="furniture-tab">
<input type="text" name="sku" placeholder="test form for furniture" autocomplete="off">
</div>
<div class="btn">
<input type="submit" value="Submit">
</div>
</div>
</form>
</main>
<script src="main.js"></script>
</body>
Clicking submit submits the form data to the page given in the action attribute in form. If you don't put this attribute in (as you have not done) the default is to submit to the current page.
To fix the issue you have, I would suggest that rather than using vanilla form submit, you do you submission via ajax. Making an ajax call is quite simple in jQuery, so I recommend you look into that.
There is an event that is triggered when you send a form. You can prevent your page to reload doing the following:
event.preventDefault()
you can find more about here: https://www.w3schools.com/jsref/event_preventdefault.asp
or here https://www.w3schools.com/jquery/event_preventdefault.asp
All you have to do is add event.preventDefault() to the first line of your onTabClick(event) function. After you preventDefault you can run whatever logic you want right there.
The way vanilla html/js interact is: On form submission, the page attempts to send the info to a server and then it refreshes to update with new information. The rise of SPAs has shifted the desired behavior, and you need to override the browser default behavior to stop the refresh.
Adding Ajax/Axios would work as most of those API libraries have built in functions to override the default, but it is not necessary.

Javascript variables resetting

I'm working on a webapp locally and I have a 'settings' page. The user can change the variables and the Javascript is supposed to save the values but it seems to reset them back to 1 straight after it changes them.
HTML:
<body onload="getSettings()">
<h1>Instance Load Manager - Settings</h1>
<div id="uploader">
<h2>Terraform file upload:</h2>
<input type="file" id="file" name="files[]" multiple onchange="moveFile()" />
</div>
<a href="index.html">
<div id="settingsButton">
<h3>Back</h3>
</div>
</a>
<div id ="settingsForm">
<form>
Maximum instances:<br>
<input type="text" id="maxInst" name="max instances"><br>
<br>
<input type="submit" value="Save Changes" onclick="updateSettings()">
</div>
</body>
Javascript:
var maxInstances = 1;
function updateSettings()
{
maxInstances = document.getElementById("maxInst").value;
alert(maxInstances);
}
function getSettings()
{
document.getElementById("maxInst").value = maxInstances;
}
Help appreciated :)
You need to prevent your page from refreshing after submitting the form.
function updateSettings(e)
{
e.preventDefault();
maxInstances = document.getElementById("maxInst").value;
alert(maxInstances);
}

Submit button for input versus textarea for js html

2 questions:
Submit works when I hit "enter" on keyboard. However, submit button itself isnt working.
If I wish to change the entire <form> to a <textarea> form, how should I tweak the code? I tried to change the event but the form doesnt fire.
The event js
'submit form': function(e, template) {
e.preventDefault();
var $body = $(e.target).find('[name=body]');
var comment = {
body: $body.val(),
postId: template.data._id
};
var errors = {};
if (! comment.body) {
errors.body = "Input and/or attach content?";
return Session.set('commentSubmitErrors', errors);
}
Meteor.call('commentInsert', comment, function(error, commentId) {
if (error){
throwError(error.reason);
} else {
$body.val('');
}
});
The html
<div class="page-content message-content">
<form class="form-send-message" data-keyboard-attach >
<!-- <form> -->
<input name="body" id="body" type="text" placeholder="content">
comment
<!-- <a href="#" class="link" type="submit">
<i class="icon ion-android-send"></i>
picture icon doesnt work
</a> -->
<!-- what I aim to have
<textarea placeholder="add comment" name="body" id="body"></textarea>
<a href="#" class="link" type="submit">
<i class="icon ion-android-send"></i> -->
</form>
</div>
an <a> tag does not have a type attribute - you could make it an <input type="submit"> and style it how you like or else put a click listener on the <a> tag, but best practice would be the former

magento form submit handler

We have a magento site that is using the WebForms2 plugin and ends up using something like the following generated code for a form:
HTML
<form action="http://example.com/magento/index.php/webforms/index/iframe" method="post" name="webform_2" id="webform_2" enctype="application/x-www-form-urlencoded" class="webforms-lg-test" target="webform_2_iframe">
<input type="hidden" name="submitWebform_2" value="1"/>
<input type="hidden" name="webform_id" value="2"/>
<div id="fieldset_0" class="fieldset fieldset-0 ">
<ul class="form-list">
<li class="fields ">
<div id="field_11" class="field type-text webforms-fields-11 webforms-fields-name">
<label id="label_field11" for="field11">Name</label>
<div class="input-box">
<input type='text' name='field[11]' id='field11' class='input text ' style='' value="" />
</div>
</div>
</li>
</ul>
</div>
<div class="buttons-set">
<p class="required">* Required Fields</p>
<button type="button" class="button" id="webform_2_submit_button" onclick="webform_2_submit()" title="submit">
<span>
<span>Submit</span>
</span>
</button>
<span class="please-wait" id="webform_2_sending_data" style="display:none;">
<img src="http://example.com/magento/skin/frontend/default/default/images/opc-ajax-loader.gif" alt="Sending..." title="Sending..." class="v-middle"/>
<span id="webform_2_progress_text">Sending...</span>
</span>
</div>
</form>
JS
var webform_2 = new VarienForm('webform_2', 0);
var webform_2_submit = function(){
var form = webform_2;
if(form.validator && form.validator.validate()){
form.submit();
$('webform_2_submit_button').hide();
$('webform_2_sending_data').show();
}
};
The tricky part is that we have an additional tool that works with all forms. Previously we just had it hook into the forms submit handler, but this particular method that Magento/WebForms uses, does not trigger the submit handler.
An example of our tool's code:
var forms = document.getElementsByTagName('form');
for(i=0; i<forms.length; i++) {
forms[i].addEventListener('submit', function() {
alert('form submitted');
}
}
We were also using a jQuery approach, but pared it down to reduce dependancies. It also did not work.
$('form').on('submit', function(e) {
alert('form submitted');
});
Question
Is there something specific in Magento that I could use with this implementation that I could hook into instead of a standard submit handler? Or a different/better way to observe a form's submit handler?
Using Prototype I was able to override the existing submit handler.
VarienForm.prototype.submit = VarienForm.prototype.submit.wrap(function($super, url) {
//-- your code can go before OR after the default form behavior
//-- include this if you want to include the previous submit behavior
$super(url);
return false;
});

Through image I browsed images but not able to submit the same

Through image I want to browse images for that I have taken div and hided the field img_photo and called a function i.e OpenFileBrowser() on anchor tab. I am able to browse images but not able to submit the form.
HTML :
<form name="frmimg" id="frmimg" method="post" action="abc.php">
<div style="display:none"><input type="file" name="img_photo" id="img_photo" value="" accept="image/gif, image/jpeg, image/jpg, image/png"></div>
<a href="wap_statusupadate.php?img=<?php echo $_REQUEST['hid_img']; ?>" onclick="return OpenFileBrows
er('frmimg')"><img src="images/photo-icon.jpg" /></a>
</form>
Javascript :
function OpenFileBrowser(obj)
{
document.getElementById('img_photo').click();
var img = document.getElementById('img_photo').value;
if(img!="")
{
document.obj.submit();
}
else
{
return false;
}
}
Try adding
document.getElementById('frmimg').submit();
to the end of function OpenFileBrowser(obj).

Categories