I'm working with ng-file-upload to work with images. In yes I have two options to upload an image for each one. When displaying the first image is displayed in my first ng-model but when I display my second image in my second ng-model it is not shown but it is over write my first ng-model. Then I share my html view:
<div class="row">
<div class="col s12 m12 hide-on-med-and-down">
<div class="image-upload">
<label for="file-input">
<i class="material-icons left teal-text">photo_camera</i>
Agrega imagen 1...
</label>
<input
id="file-input"
type="file"
ngf-select
ng-model="data.imagen_promocion"
name="file"
ngf-pattern="'image/*'"
accept="image/*"
ngf-max-size="3MB"
/>
</div>
<img ngf-thumbnail="data.imagen_promocion || '/thumb.jpg'"/>
</div>
<div class="col s12 m12 hide-on-med-and-down">
<div class="image-upload">
<label for="file-input">
<i class="material-icons left teal-text">photo_camera</i>
Agrega imagen 2...
</label>
<input
id="file-input"
type="file"
ngf-select
ng-model="data.imagen_promocion2"
name="file"
ngf-pattern="'image/*'"
accept="image/*"
ngf-max-size="3MB"
/>
</div>
<img ngf-thumbnail="data.imagen_promocion2 || '/thumb.jpg'"/>
</div>
</div>
I have seen my error is in css:
.image-upload > input{
display: none;
}
.image-upload i{
font-size: 30px;
cursor: pointer;
}
When I delete this css style it works fine. this is my jsfiddle
How can I fix this error? I thank you in advance
Although your fiddle works fine, there is a problem with the label usage:
<label for="file-input">
<input id="file-input">
pair should be unique, you shouldn't write double pairs. It will cause some problem there.
Change the label input to below styles, i think it will solve the problem:
<label for="file-input-1"></label>
<input id="file-input-1"></input>
<label for="file-input-2"></label>
<input id="file-input-2"></input>
It seems fine when i tried on your fiddle:
Related
I need to use focus for this satisfaction survey, but I don't know how to use it, help me!
I need to select one of the faces for a satisfaction survey. I send the satisfaction survey of example. I am working in Angular, so if it's possible, I need the typescript. This was my attempt, but I can't get the svg RELLENO to highlight. I don't know where to put the focus. I don't know if the structure used is the right one.
Images face are in SVG example Cara-muy-feliz Relleno
<form action="/action_page.php" class="form-satisfaction">
<div class="items-calification row align-items-start">
<input id="test" class="calification" type="image"
src="./assets/images/page/dashboard/satisfaction-survey/Cara-triste.svg">
<div id="scripted" class="circle">
<img src="./assets/images/page/dashboard/satisfaction-survey/Relleno.svg">
</div>
<label class="face">
<h3>
Deficiente
</h3>
</label>
<input class="calification" type="image"
src="./assets/images/page/dashboard/satisfaction-survey/Cara-neutra.svg">
<div id="circle" class="circle">
<img src="./assets/images/page/dashboard/satisfaction-survey/Relleno.svg">
</div>
<label class="face">
<h3>
Regular
</h3>
</label>
<input class="calification" type="image"
src="./assets/images/page/dashboard/satisfaction-survey/Cara-feliz.svg">
<div id="circle" class="circle">
<img src="./assets/images/page/dashboard/satisfaction-survey/Relleno.svg">
</div>
<label class="face">
<h3>
Bueno
</h3>
</label>
<input class="calification" type="image"
src="./assets/images/page/dashboard/satisfaction-survey/Cara-muy-feliz.svg">
<div id="circle" class="circle">
<img src="./assets/images/page/dashboard/satisfaction-survey/Relleno.svg">
</div>
<label class="face">
<h3>
Excelente
</h3>
</label>
</div>
</form>
document.getElementById('test').onclick = () => {
document.getElementById('scripted').focus();
console.log('SÍ');
};
.form-satisfaction
overflow: hidden
.items-calification
position: relative
top: 90.76px
width: 1080px
height: 244.24px
left: 200px
.calification
position: relative
margin-left: -90px
.circle
img
z-index: -1
visibility: hidden
position: relative
left: -166px
.img:focus
visibility: visible
I am using a plugin cropitjs to crop the user selected image. I want the user to select the image file via the file input ONCE, and the two cropit instances to load the same image.
I have tried with jquery clone of the file input, but was unable to load it to the preview.
You can view the hosted preview of this here
Right now, the file input prompts twice, and if i select the file twice the two cropit instances loads the image. I would like to be able to use one file input to load the two crop instances "image-editor1" and "image-editor2" as shown in the HTML markup.
NOTE: The end result is to crop the same image to two different sizes.
Here is my HTML
<!-- COVER IMAGE -->
<div class="large-6 medium-6 small-12 columns">
<div class="image-editor1">
<input type="file" class="cropit-image-input" id="cropimg">
<div class="select-image-btn">
<label for="file" class="sr-only"><i class="ion-ios-camera-outline genicon"></i>ކަވަރ ފޮޓޯ އެއް އަޕްލޯޑް ކުރަށްވާ</label>
</div>
<div class="cropit-preview"></div>
<div class="zoomcl">
<i class="ion-image zoom2"></i>
<input type="range" class="cropit-image-zoom-input">
<i class="ion-image zoom1"></i>
</div>
<div class="filename"></div>
<input type="hidden" name="imgdata" class="imgdata" />
</div>
</div>
<!-- MOBILE COVER IMAGE -->
<div class="large-6 medium-6 small-12 columns">
<div class="image-editor2" id='imgedit1'>
<input type="file" class="cropit-image-input">
<div class="select-image-btn">
<label for="file" class="sr-only"><i class="ion-ios-camera-outline genicon"></i>ކަވަރ ފޮޓޯ އެއް އަޕްލޯޑް ކުރަށްވާ</label>
</div>
<div class="cropit-preview"></div>
<div class="zoomcl">
<i class="ion-image zoom2"></i>
<input type="range" class="cropit-image-zoom-input">
<i class="ion-image zoom1"></i>
</div>
<input type="hidden" name="imgdata" class="imgdata" />
</div>
</div>
Here is the JS
$('.select-image-btn').click(function() {
$('.cropit-image-input').click();
$('.image-editor1').cropit({
imageBackground: true,
imageBackgroundBorderWidth: 15,
exportZoom: 4
});
$('.image-editor2').cropit({
imageBackground: true,
imageBackgroundBorderWidth: 15,
exportZoom: 4
});
});
Thank you in advance for your help. :)
Person,
I have a page with 2 input text and 2 input file when I get the ajax response, send clear the entire form as the code below, but only a field is not cleared the field:
Here my page
<input class="fileUploadAudio" id="fileUploadAudio" name="fileUploadAudio" type="file"></span>
I believe we should have some conflict, I have done everything and I can not clear this blessed country.
PS: If you need I publish the page to take a look.
<div class="form-group">
<label class="col-sm-3 control-label">Imagem para Push</label>
<div class="col-sm-6">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img src="http://placehold.it/190x140/7761A7/ffffff" alt="...">
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
<div>
<span class="btn btn-primary btn-file"><span class="fileinput-new">Selecionar imagem</span><span class="fileinput-exists">Alterar</span>
<input class="arquivo" id="arquivo" name="arquivo" type="file"></span>
Remover
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Áudio para a campanha</label>
<div class="col-sm-6">
<div class="fileinput fileinput-new" data-provides="fileinput">
<input name="..." value="" type="hidden">
<span class="btn btn-primary btn-file"><span class="fileinput-new">Selecionar áudio</span>
<span class="fileinput-exists">Alterar</span>
<input class="fileUploadAudio" id="fileUploadAudio" name="fileUploadAudio" type="file"></span>
<span class="fileinput-filename"></span>
×
</div>
</div>
</div>
In return I send ajax clear the form fields like this:
$(".formulario")[0].reset();
$(".formulario").get(0).reset();
$('#cancelButton').hide();
$("#fileUploadAudio").val("");
$('#submitButton').hide();
I have even tried to clear only the input file this way:
$('#fileUploadAudio').val('');
I assume that you are trying to reset the whole form.
Change the outer div tag to formas followings:
Replace
<div class="form-group">...</div>
with
<form class="form-group" id="formulario">...</form>
Reset form using jQuery
$("#formulario")[0].reset();
if native java script reset function is not working you need to trigger the reset function
$("#formulario").trigger("reset");
I've set up a form with Angular integrated into it. In this form, I want the final submit button to only show up when the form is valid. There are a number of fields, but the only fields that are required are the one's for a user'a name, email-address, and a checkbox. The form recognizes when a required field is invalid, however I can't get the submit button to disappear (and subsequently reappear).
Here's code for reference:
index.html:
<form name="captions" ng-controller="CaptionCtrl>
<div class="current-page">
<div class="pages">
<div class="page active" id="page1">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption1" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(2)">NEXT</button> </div>
</div>
<div class="page" id="page2">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption2" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(3)">NEXT</button>
</div>
</div>
<div class="page" id="page3">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption3" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(4)">NEXT</button>
</div>
</div>
<div class="page" id="page4">
<img src="images/blank_image.jpg">
<div class="page-form-submit-page">
<h4>TO ENTER YOUR CAPTION IN THE CONTEST, TELL US YOUR NAME AND CONTACT METHOD.</h4>
<input type="text" ng-model="user.name" size="70" placeholder="Name" required>
<input type="email" ng-model="user.email" size="70" placeholder="E-mail Address" required>
<br>
<input type="checkbox" required>I have read and accept the Terms & Conditions
<br>
<input class="page-form-submit-page-submit" ng-disabled="captions | validateFields" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
</div>
</div>
<div class="page" id="page5">
<img src="images/blank_image.jpg">
<div class="page-form-thankyou">
<span><strong>THANK YOU</strong></span>
</div>
<div class="chapter-two-story-link"><span class="yellow">CLICK TO TELL US YOUR STORY</span></div>
</div>
</div>
</div>
</form>
If you notice towards the bottom, I have a ng-disabled set with "captions | validateFields". I've tried this with a simply truthy statement as well so its not the filter I set up.
Edit: With feedback I've gotten what I initially wanted to do working with ng-show. However, ng-disabled would actually be more appropriate for what I want. I've added relevant css.
style.css
.page-form-submit-page-submit {
display: block;
padding: 5px 15px;
border: none;
border-radius: 2px;
margin: 40px 400px 20px auto;
text-align: center;
background-color: #001F45;
color: #FFD200;
}
.page-form-submit-page-submit:active {
background-color: #0250B0;
}
Can anyone explain how to get the submit button to show only after all fields are valid?
Try ng-enabled="captions.$valid" to disable (visible but not clickable) and ng-show="captions.$valid" to hide the button if the form is invalid.
More about forms in angular: https://docs.angularjs.org/api/ng/directive/form
Not tested, but you can use the $valid property of your form like this:
<input class="page-form-submit-page-submit" ng-disabled="!captions.$valid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
But if you want the button to disappear completely, use ng-hide="!captions.$valid" instead of the ng-disabled directive
It's fairly easy
hide completly
<input class="page-form-submit-page-submit" ng-if="captions.$valid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
visually disable
<input class="page-form-submit-page-submit" ng-disabled="captions.$invalid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
I'm trying to send the form data of my web page using jquery get() method. But when I submit the form only few of the field data where sent to the server.
Form:
<form class="form-horizontal" id="addpost" method="GET" action="">
<div class="control-group">
<label class="control-label" for="form-field">Post Title</label>
<div class="controls">
<input type="text" id="form-field" placeholder="Post Title" name="Post-title" value="" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="form-field-11">Content Here</label>
<div class="controls">
<textarea name="post-content" value="" class="autosize-transition span12" id="form-field-11" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 67px;"></textarea>
</div>
</div><!-- Insert Image Code -->
<div class="control-group">
<div class="widget-main">
<div class="controls">
<div class="ace-file-input">
<input id="id-input-file-2" type="file">
<a class="remove" href="#"></a>
</div>
</div>
<div class="controls">
<div class="ace-file-input ace-file-multiple">
<input id="id-input-file-3" type="file" multiple="">
<a class="remove" href="#">
<i class="icon-remove"></i>
</a>
</div>
<label>
<input id="id-file-format" type="checkbox" name="file-format">
<span class="lbl"> Allow only images</span>
</label>
</div>
</div>
</div><!-- Insert Image Code -->
<div class="space-4"></div>
<div class="control-group">
<label class="control-label" for="form-field-tags">Tag input</label>
<div class="controls">
<input id="form-field-tags" type="hidden" placeholder="Enter tags ..." value="Tag Input Control" name="tags">
</div>
</div>
<div class="space-4"></div>
<div class="control-group">
<label class="control-label" for="form-field-select-3">Select Category</label>
<div class="controls">
<label for="form-field-select-3">Chosen</label>
<select class="chzn-select" id="form-field-select-3" data-placeholder="Choose a Category...">
<option value="">
</option><option value="Blog">Blog
</option><option value="News Letter">News Letter
</option></select>
</div>
</div>
<div class="control-group" style="float:left; margin-right:25px">
<div class="controls"><button type="submit" class="btn btn-info">
<i class="icon-ok bigger-110"></i>
<input type="submit" value="" id="posubmit" style="opacity:0"/>Submit</button>
<button type="reset" class="btn"><i class="icon-undo bigger-110"></i>Reset</button>
</div>
</div>
<div id="resp" style="float:left; margin-top:5px">
<img id="loading" style="visibility:hidden;" src="assets/img/ajax-load.gif" width="16" height="16" alt="loading" />
</div>
</form>
JavaSccript:
$('#addpost').submit(function(e){
if(use_ajax)
{
$('#loading').css('visibility','visible');
$.get('test.php',$(this).serialize(),
function(data){
if(parseInt(data)==-1)
$.validationEngine.buildPrompt("#resp","* Please ensure all fields are filled.","error");
else
{
$("#resp").show('slow').after('<p id="resp-mes" style=" color:#000000; text-decoration: bold;">Success....</p>');
}
$('#loading').css('visibility','hidden');
setTimeout( "jQuery('#resp').hide('slow');",3000 );
setTimeout( "jQuery('#resp-mes').hide('slow');",5000 );
});
}
e.preventDefault();
}
)};
In this only 3 field values where sent to server.
That is Post-title, post-content and tags
I don't know why this happening.
Any help would be appreciated.
you have two issues.
Ajax and serialize upload doesn't work with file upload. (Read this question and answer for async upload)
jquery form serialize needs a name attribute. your select box (form-field-select-3) doesn't have a name attribute.
following is a note in jquery serialize documentation page -
Note: Only "successful controls" are serialized to the string. No
submit button value is serialized since the form was not submitted
using a button. For a form element's value to be included in the
serialized string, the element must have a name attribute. Values from
checkboxes and radio buttons (inputs of type "radio" or "checkbox")
are included only if they are checked. Data from file select elements
is not serialized.
Its because you have missed "name" attribute in select element
<select class="chzn-select" id="form-field-select-3" name="form-field-select-3" data-placeholder="Choose a Category...">
I have checked in my local, and now this is working fine.
Please check and let me know if any issue.
Thanks
I see that attrbute name="" is required and some of the input elems are missing those. so you can try placing this attribute and see if this solves the issue:
<select class="chzn-select" name="your-elem-name">
//--------------------------^^^^^^^^^^^^^^^^^^^^^-----try placing the name attr
ok of this entire form, only four elements may get sent through if all four are populated/selected from a higher index than zero;
the ones with these names;
"tags"
"file-format"
"post-content"
"Post-title"
this is because those are the only tags with a name attribute defined.
please give all the elements you want to post through to the server a name attribute with the post index you want to use to access them with.