form control jquery and ajax - javascript

i have this form, take from site , i have add input and now not work
I just have to figure out what 's wrong with the control jQuery
<div class="row">
<div class="span4">
<h3><strong>1.</strong> <span>Informazioni personali</span></h3>
</div><!-- /.span4 -->
<div class="span4">
<h3><strong>3.</strong> <span>Upload Foto</span></h3>
<div class="fileupload fileupload-new control-group" data-provides="fileupload">
<label class="control-label" for="inputPropertyPrice">
Image files
</label>
<div class="input-append">
<div class="uneditable-input">
<i class="icon-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-file">
<span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span>
<input type="file" name="file" id="file" />
</span>
Remove
</div><!-- /.input-append -->
</div><!-- .fileupload -->
I can not put all the above code so I made ​​a Fiddle.
do you think the tag upload is right? Where do I upload the file I wrote well?
how can I add an upload that takes only .jpg ?

You have a couple typos in the code:
|| bagni == || should be || bagni == "" ||
!emailReg.test(email) should be !emailReg.test(email1)
Fined JSFiddle
Try and use the developer console before asking a question on SO.

Related

Selenium hidden file upload with JavaScipt

I've the following input form, where I would like to upload a .txt file with my test script:
<ol>
<li id="EA-Blk-Invite-Text1">
Create and save a text file in a specific format as explained <span class="preview mln" data-action="sampleCSV">here</span>
</li>
<li id="EA-Blk-Invite-Text2">
<p>Upload the text file as prepared above</p>
</li>
</ol>
<div class="fileuploadArea clearfix pull-left" id="EA-Blk-Invite-Upload">
<div class="ChooseFile" data-flu="name2" data-target="[preview-container-text-bulk]" data-file-template="uploadCard" data-error-target="[data-upload-error-text-bulk]" data-type="txt" data-context="bulkImport" id="EA-Blk-Invite-Fileup">
<button class="custom-style-fileIOBtn">Choose File</button>
<input type="file" class="fileCntr" name="fileinput2" style="display:none;">
</div>
<div class="customLogo phn" id="EA-Blk-Invite-Filetext">
<h5>No file selected</h5>
</div>
</div>
<div class="clearfix previewCntr" preview-container-text-bulk="">
</div>
<div class="clearfix col-xs-12 errorMessage-Main" id="EA-Blk-Invite-Errmsg">
<div data-upload-error-text-bulk="" class="errorMessage"></div>
</div>
<div class="btnCntr pull-right">
<button type="button" class="btn btn-default cancelUpload" id="EA-Blk-Invite-Can-Btn">Cancel</button>
<button type="submit" class="btn btn-primary importFile" id="EA-Blk-Invite-Send-Btn">Send Invitations</button>
</div>
</form>
I used a JS Executor to make the input element interactable. I can upload the file - according to my console log - however, I cannot submit the form. I get a 'File is required' error.
//Upload file with user's email list
await koreLib.sleep(3000);
await driver.executeScript('document.getElementById("EA-Blk-Invite-Fileup").style = "inline"');
console.log(`\nElement is visible`)
await koreLib.sleep(3000);
await driver.wait(until.elementLocated(By.className('fileCntr')));
console.log(`\nElement is located`);
await driver.findElement(By.className('fileCntr')).sendKeys('C:\\Users\\...\\bulkInvite.txt');
console.log(`\nFile upload success`)
//Press submit button
await koreLib.sleep(6000);
await driver.wait(until.elementLocated(By.xpath("//button[#id='EA-Blk-Invite-Send-Btn']")));
await driver.findElement(By.xpath("//button[#id='EA-Blk-Invite-Send-Btn']")).click();
console.log(`\nSubmit button pressed`)
When I upload the file manually, the following section is created, however, not with my script.
<div class="fileuploadArea clearfix pull-left" id="EA-Blk-Invite-Upload">
<div class="ChooseFile" data-flu="name2" data-target="[preview-container-text-bulk]" data-file-template="uploadCard" data-error-target="[data-upload-error-text-bulk]" data-type="txt" data-context="bulkImport" id="EA-Blk-Invite-Fileup">
<button class="custom-style-fileIOBtn">Choose File</button>
<input type="file" class="fileCntr" name="fileinput2" style="display:none;">
</div>
<div class="customLogo phn hidden" id="EA-Blk-Invite-Filetext">
<h5>No file selected</h5>
</div>
</div>
<div class="clearfix previewCntr" preview-container-text-bulk=""><div>
<div class="col-xs-7 fileName">bulkInvite.txt</div>
<div class="col-xs-3 progressBar">
What am I doing wrong? Which element should be used for the upload if not
<input type="file" class="fileCntr" name="fileinput2" style="display:none;">
Thanks!

Page unresponsive after modal close

A have a webapp developed with Spring boot and thymeleaf a s front end.
We display all the groups available to review. Once user clicks a group we list documents in it tabular form and once user clicks on and document we provide its details. All these I am handling through ajax call and defining on click method. Once user gets to detail section they are provided with more details on that document where they can go and modify or add more through modal. Below is the modal
<!-- Modal start-->
<div id="editModal" tabindex="-1" class="modal fade" role="dialog">
<div class="modal-dialog" role="document">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h5 id="pTitle" class="modal-title">Edit</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row" id="firstNameRow">
<div class="form-group col-sm-12">
<label for="firstName" class="col-sm-4">First Name: </label>
<input class="col-sm-8" type="text" id="firstName" maxlength="32" onkeydown="return validateInputFields(this,event)"/>
<span class="text-danger" style="display:none;float: right;" id="firstNameError">First name is required.</span>
</div>
</div>
<div class="row" id="middleNameRow">
<div class="form-group col-sm-12">
<label for="middleName" class="col-sm-4">Middle Name: </label>
<input class="col-sm-8" type="text" id="middleName" maxlength="32" onkeydown="return validateInputFields(this,event)"/>
<span class="text-danger" style="display:none;float: right;" id="middleNameError"></span>
</div>
</div>
<div class="row has-danger" id="lastNameRow">
<div class="form-group col-sm-12">
<label for="lastName" class="col-sm-4">Last Name: </label>
<input class="col-sm-8 is-invalid" type="text" id="lastName" maxlength="32" onkeydown="return validateInputFields(this,event)" />
<div class="text-danger" style="display:none;float: right;" id="lastNameError" >Last name is required.</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" th:onclick="'save();'" id="saveButton" data-backdrop="false" data-keyboard="false">Save</button>
<button type="button" class="btn btn-neutral" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!--Modal end-->
And here is my save function:
function saveParty(){
var hasError = validateParty();
if(!hasError){
//To close the modal and get back to the previous screen
document.getElementById("saveButton").setAttribute("data-dismiss","modal");
var data = loadPartyDetails();
var objectID = $("#objectID").val();
$.ajax({
type : "POST",
contentType: "application/json",
url: "/saveDetails/" + objectID + "/",
data: JSON.stringify(data),
timeout : 100000,
success : function(result) {
$("#detailsPanel").html(result);
document.getElementById("successMsgParties").style.display="";
$('#successMsgParties').delay(5000).fadeOut('slow');
},
error : function(e) {
console.log("ERROR: ", e);
},
done : function(e) {
console.log("DONE");
}
});
}
}
The call to make modal open:
<td class="text-center"><a th:id="${iter.index + 1}" onclick="populateModal(this);" class="glyphicon glyphicon-pencil" data-toggle="modal" data-target="#editModal"></a></td>
And all this has been working fine. But sometimes all of sudden the whole page hangs up, I cant scroll I cant click on the links and have to refresh the page to continue. There are no errors on the console and have compare the response when the screen freeze and when it doesn't and there is no difference. At this point I am lost on where to look for and what could be the issue. Any directions will be appreciated.
Update: So I found that modal-open class was added but not getting remove when the screen froze, so I added below in my javascript. It does unable to page to scroll but all the links on the page are still disabled.
$("body").removeClass("modal-open");
Alright, I found one more thing, below div element stays there whenever screen freeze. How can I found out which div element is this?
<div class="modal-backdrop fade show"></div>
Any guidelines on how to close the modal appropriately?
Programmatically dismissing a Modal can be done using $('#editModal').modal('hide')
So either the modal is dismissed using the close or cancel button or from the Javascript using the method I shared.
I noticed that the below div element being added which is making screen freeze. I have to hide this through javascript.
<div class="modal-backdrop fade show"></div>

Can't access element inside slick slider

I'm using Slick slider (http://kenwheeler.github.io/slick/) and I'm trying to get the id of the element I change. The following code obviously works outside the slick slider, but for some odd reason it always returns the first element of the slider.
<div class="container-slide">
<div class="slider slider-category">
<div class="slider-card">
<div class="row block-image">
<div class="background-upload">
<label for="image">
<i class="fa fa-picture-o fa-2x" data-toggle="tooltip" data-placement="left"></i>
</label>
<input id="image" type="file" accept="image/png, image/jpeg, image/gif" name="image" class="text-center image-card" data-id="1"/>
</div>
</div>
</div>
<div class="slider-card">
<div class="row block-image">
<div class="background-upload">
<label for="image">
<i class="fa fa-picture-o fa-2x" data-toggle="tooltip" data-placement="left"></i>
</label>
<input id="image" type="file" accept="image/png, image/jpeg, image/gif" name="image" class="text-center image-card" data-id="2"/>
</div>
</div>
</div>
</div>
</div>
$('.image-card').on('change', function() {
console.log($(this).data('id'));
});
The previous jquery code gives me always "1" as result. So it gets only the first element.
Why is this happening?
Without using slick slider, it's obviously working fine, there shound't be anything wrong with that very simple code...
Am I missing something about slick slider? I read everything and all the documentation but I couldn't find anything for this issue. I also tried beforeChange event, but didn't work.
Thanks
Ok I found out the problem!
I don't know why but the id and the label were affecting the on change.
So if I change the code into this:
<div class="container-slide">
<div class="slider slider-category">
<div class="slider-card">
<div class="row block-image">
<div class="background-upload">
<label for="image">
<i class="fa fa-picture-o fa-2x" data-toggle="tooltip" data-placement="left"></i>
</label>
<input id="image" type="file" accept="image/png, image/jpeg, image/gif" name="image" class="text-center image-card" data-id="1"/>
</div>
</div>
</div>
<div class="slider-card">
<div class="row block-image">
<div class="background-upload">
<label for="image2">
<i class="fa fa-picture-o fa-2x" data-toggle="tooltip" data-placement="left"></i>
</label>
<input id="image2" type="file" accept="image/png, image/jpeg, image/gif" name="image" class="text-center image-card" data-id="2"/>
</div>
</div>
</div>
</div>
</div>
It works fine. (I changed the input id and label for into "image2).

How to add a "required" checkbox in this code

I want a checkbox in this code. Only if the checkbox is checked it should be possible to press upload / or to allow a upload.
Could you give me a hint how it's possible to change this?
Actually I can insert a checkbox but it's always uploading if the checkbox is unchecked.
#extends('master/index')
#section('custom')
<!-- Main page -->
<div id="content-wrapper" class="snap-content">
<!-- Progress bar -->
<div class="container progress-holder">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="progress-rate">--%</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">--% Complete</span>
</div>
</div>
</div>
</div>
</div>
<!-- Drag zone -->
#if($limitReached == true)
<div class="container text-center start-zone">
<p>{{ t('You have reached daily upload limit') }}</p>
</div>
#else
<div class="container text-center start-zone">
<form id="fileupload" action="{{ route('images.upload') }}" method="POST" enctype="multipart/form-data" accept="image/gif, image/jpeg, image/jpg, image/png">
<input type="file" id="input-browse" class="block-hide" multiple="multiple" name="files">
<p>{{ t('Drag photos from your computer in here. Select maximum 10 images') }}</p>
<div class="help-block">{{ t('Maximum file size allowed is') }} {{ maxUploadSize()*1024 < (int)siteSettings('maxImageSize')*(1024) ? maxUploadSize() : (int)siteSettings('maxImageSize') }}MB (o.O)</div>
<p>{{ t('You can also') }} <a class="browse_files" href="#">{{ t('browse') }}</a> {{ t('for photos to upload') }}.</p>
</form>
</div>
#endif
<div class="uploader block-hide">
<!-- Preview zone -->
<div class="container preview-zone">
<img src="{{ asset('static/img/mask-tran.png') }}"/>
</div>
<!-- Thumbnail zone -->
<div class="container thumbnail-zone">
<div class="row">
<div class="col-md-9">
<ul class="thumbnails-holder nav nav-tabs" id="myTab"></ul>
</div>
<div class="actions col-md-3 text-right">
<button type="button" class="btn btn-danger btn-remove"><i class="glyphicon glyphicon-trash"></i> remove</button>
<button type="button" class="btn btn-primary btn-upload"><i class="glyphicon glyphicon-open"></i> upload</button>
<p class="help-block"><span class="readyphoto"></span>/<span class="totalphoto"></span> photos are ready</p>
</div>
</div>
</div>
<!-- Edit zone -->
<div class="container-fluid tab-content edit-zone-holder"></div>
</div>
</div>
You can do this with JavaScript using the onchangeevent event to enable/disable button based on checked value
<input type="checkbox" onchange="document.getElementById('uploadButton').disabled = !this.checked;" />
<input type="submit" id="uploadButton" value=" Upload " />
you can disable and enable buttons with jQuery depending on the checkbox selection.
If you have:
<input type="checkbox" id="checkbox"/>
<button id="upload">Upload</button>
Then in your jQuery:
$("#upload").prop('disabled', true);
$("#checkbox").bind('change', function(){
var checked = this.checked;
if(checked){
$("#upload").prop('disabled', false);
} else {
$("#upload").prop('disabled', true);
}
});
JSFiddle
add a checkbox
<input type="checkbox" name="chk" id="chk" value="yourvalue">
add onclick event in your upload button
<button type="button" onclick="selected()">upload</button>
<script>
function selected()
{
if(document.getElementById('chk').checked) {
document.getElementById("fileupload").submit();
} else {
alert('YOUR CUSTOM MESSAGE');
}
}
</script>
Try this:
Add this in your html form.
<input type="checkbox" name="writeSomeName" value="value">
Then after that write some php code:
if ($_POST['writeSomeName'] == 'value')
{
//Add code for upload file here
}
else
{
echo "You have not checked the checkbox. Please make it check first"
}

get div with specific class before form input

I have:
<div class="col-md-3 col-centered survey-kind-border">
<a class="lv-item" href="#">
<div class="media">
<label for="no" class="pull-left">
<div class="survey_kind_choice">
1.5
</div>
<input checked="checked" class="survey_kind_input" id="no" type="radio" value="no">
</label>
<div class="media-body">
<div class="lv-title">
No
</div>
<small class="lv-small">
I will Not
</small>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-centered ">
<a class="lv-item" href="#">
<div class="media">
<label for="yes" class="pull-left">
<div class="survey_kind_choice">
2.5
</div>
<input class="survey_kind_input" id="yes" type="radio" value="yes">
</label>
<div class="media-body">
<div class="lv-title">
Yes
</div>
<small class="lv-small">
I will
</small>
</div>
</div>
</a>
</div>
When someone goes to this page, one of the radio buttons will usually already be selected. If the button is selected, I want to grab the div that is associated with that form element and has the class "survey_kind_choice" and add a class to it. I am trying to do that with this code:
if($('.survey_kind_input').is(':checked')){
alert('there is a checked element');
$(this).prev('.survey_kind_choice').addClass('current_choice');
}
The alert is working, but I can't get the class to be added. What am I doing wrong and how do I fix it?
No if statement needed, just execute the selector on the checked input with:
$('.survey_kind_input:checked').prev('.survey_kind_choice').addClass('current_choice');
jsFiddle example

Categories