Can Anyone solve this problem?pop-up message
I have this code below
<body>
<div class="contact-form-wrap responsive">
<!--- pop-up message start --->
<div class="status alert alert-success contact-status"></div>
<!--- pop-up message end --->
<form id="main-contact-form4" class="contact-form" name="contact-form" method="post" action="app.php" role="form">
<legend style="padding-bottom: 20px; color: #708090;">Please provide us your information.</legend>
<!-- Name Filed Starts -->
<div class="col-sm-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" name="name" id="name" required="required" placeholder="Full Name">
</div>
</div>
</div>
<!-- Name Filed Ends -->
<!---------------- Pop-up Message here ---------------->
<!-- Button starts -->
<div class="col-sm-12">
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</div>
</div>
<!-- Button Ends -->
</form>
</div>
</div>
</body>
I like to move my pop-up message on the top of the button. so every time the button will press the pop-up message will notice immediately.
here is my js
$(".contact-form").submit(function() {
var rd = this;
var url = "app.php";
$.ajax({
type: "POST",
url: url,
data: $(".contact-form").serialize(),
success: function(data) {
$(rd).prev().text(data.message).fadeIn();
}
});
return false;
});
The problem with your code is that you're selecting the popup message based on it's location in the DOM. You need to select it on a proper selector instead. Since it has a class called contact-status, let's use that.
Change:
$(rd).prev().text(data.message).fadeIn();
to
$('.contact-status').text(data.message).fadeIn();
It's a bad idea to select elements from their location in the DOM since you sometimes (like now) want to move them. Using proper selectors (like id's or classes) will keep your code working regardless where in the DOM the element is.
Related
I'm building a support contact form where the user can upload files. The file upload is managed using AJAX: the user can upload the files, then submit the form at their convenience. The current layout that works is, however, not aesthetic: the upload input is below the form submit button.
I read about nested forms and the new form attribute and I thought this would do the trick:
<form action="" method="post" enctype="multipart/form-data" id="main-form">
...
<form action="/upload_file_ajax.php" method="post" id="file-upload-form">
<div class="form-group row mb-3 mb-3">
<label class="col-sm-3 col-lg-3 col-form-label" for="file"><?php echo $label['attach-file']; ?></label>
<div class="col-sm-8 col-lg-7">
<input class="form-control custom-file-input" name="file" id="file" type="file" form="file-upload-form" />
</div>
</div>
</form>
<div class="form-group row">
<div class="col-4 offset-3">
<button type="submit" name="submit" class="btn btn-outline-success" form="main-form"><?php echo $label['submit-button']; ?></button>
</div>
</div>
</form>
I have added the form attribute to every input and button. However, the inner form ("file-upload-form") won't submit at all when I add the file.
Could it be because this is an auto-submit input, i.e. the Javascript triggers the AJAX when the file is selected? This is the trigger line:
$('#file-upload-form').on('change', function(e){
...
As soon as I move the nested form below the closing </form> tag of the main form, it works.
If the aesthetic layout can be achieved in any other way, e.g. the file upload input can appear above the Submit button without nesting the forms, please let me know.
EDIT: This is the revised Javascript that takes care of the file upload via AJAX. I have removed the inner form tags as advised but the input still won't submit.
$(function(){
// listen for input changes (when a file is selected)
$('#file-upload-input').on('change', function(e){
//var formData = new FormData();
// file has been selected, submit it via ajax
$.ajax({
type: 'POST',
url: "/upload_file_ajax.php",
data: new FormData(this),
cache: false,
contentType: false,
processData: false,
success: function(data){
// the upload_file_ajax.php endpoint returns the file name and a status message for the uploaded file
console.log(data.filename, data.message);
// we then inject these into the main data form
var $hiddenInput = $('<input type="hidden" name="uploads[]" value="'+data.filename+'">');
$('#main-form').append($hiddenInput);
// show a thumbnail maybe?
var $thumbnail = $('<img src="/uploaded_files/'+data.filename+'" width="40" height="40" />');
$("#preview").append($thumbnail);
$("#status").html(JSON.stringify(data.message));
// reactivate file upload form to choose another file
$('#file-upload-input').val('');
},
error: function(){
console.log("error");
}
});
});
});
This is what the revised HTML looks like:
<form action="" method="post" enctype="multipart/form-data" id="main-form">
... (other inputs here)...
<div class="form-group row offset-3 mb-3">
<div class="col-12" id="preview"></div>
<div class="col-12" id="status"></div>
</div>
<div class="form-group row mb-3 mb-3">
<label class="col-sm-3 col-lg-3 col-form-label" for="file"><?php echo $label['attach-file']; ?></label>
<div class="col-sm-8 col-lg-7">
<input class="form-control custom-file-input" name="file" id="file" type="file" id="file-upload-input" form="file-upload-form" />
</div>
</div>
<div class="form-group row">
<div class="col-4 offset-3">
<button type="submit" name="submit" class="btn btn-outline-success" form="main-form"><?php echo $label['submit-button']; ?></button>
</div>
</div>
</form>
Here is how I solved my problem. I found the answer here, on SO, but can't find the link to the post any more.
The problem with uploading a file independently, without submitting the form or without having <form>...</form> tags, is that FormData(); does not contain the file as it does when the <form>...</form> tags are present. So, you need to append the file to it.
Here is my entire jQuery code that takes care of the file upload. On success, it creates additional form input tags containing the uploaded files info, so that I can submit them together with the form. It also creates a thumbnail for each uploaded image, and a Delete button next to the input in case the user changes their mind.
$('#file-upload-input').change(function(){
var file_data = $('#file-upload-input').prop('files')[0];
var form_data = new FormData();
// pass the file itself – needed because the input is submitted without <form> tags
form_data.append('file', file_data);
// pass website language variable to the PHP processor to load the correct language file
form_data.append('lang', '<?php echo $lang; ?>');
$.ajax({
url: "/ajax_upload_file.php",
type: "POST",
data: form_data,
cache: false,
contentType: false,
processData: false,
success: function(data){
// the upload_file_ajax.php endpoint returns the file name and a status message for the uploaded file
console.log(data.filename, data.message);
// we then inject these into the main data form
var $hiddenInput = $('<div class="input-group mb-1"><input class="form-control" readonly type="text" name="uploads[]" value="'+data.filename+'" /><input type="button" name="delete_'+data.filename+'" id="delete_'+data.filename+'" value="Delete" class="delete btn btn-outline-danger ms-2" /></div>');
$('#uploaded_files').append($hiddenInput);
// show a thumbnail if the uploaded file is an image
var $thumbnail = $('<img src="/uploaded_files/'+data.filename+'" height="75" id="img_'+data.filename+'" class="me-1" />');
$("#preview").append($thumbnail);
// print a status message returned from the PHP processor
$("#status").html(data.message);
// reactivate file upload form to choose another file
$('#file-upload-input').val('');
},
error: function(){
console.log("error");
}
});
});
This is the relevant HTML. It contains divs for the inputs containing the uploaded files names, for the thumbnails (called "preview"), and for the status message returned from the PHP script.
<div class="form-group row offset-2 mb-3">
<div class="col-sm-8 col-lg-7" id="uploaded_files">
</div>
</div>
<div class="form-group row offset-2 mb-3">
<div class="col-12" id="preview"></div>
</div>
<div class="form-group row offset-2 mb-3">
<div class="col-12" id="status"></div>
</div>
<div class="form-group row mb-3 mb-3">
<label class="col-sm-3 col-lg-2 col-form-label" for="file"><?php echo $label['attach-file']; ?></label>
<div class="col-sm-8 col-lg-7">
<input class="form-control custom-file-input" name="file" type="file" id="file-upload-input" />
</div>
</div>
I can't submit the form even though I used preventDefault, (page refreshed and doesn't take any action) My form inputs are filled dynamically here is my code.
HTML
<div class="modal-body">
<form id="update_form">
<!-- loaded below -->
</form>
</div>
another request that fill my form data
#csrf
<div class="form-row">
<div class="form-group col-md-6">
<input type="hidden" name="request_type" value="{{RegisterTypesNames::Faculty}}">
<label>University</label>
<select name="university" class="custom-select" id="university{{$action}}">
<option selected value="1">University of Cansas</option>
</select>
</div>
<div class="form-group col-md-6">
<label>Faculty</label>
<input type="text" class="form-control" name="faculty" id="faculties{{$action}}">
</div>
<div class="form-group col-md-6">
<label>Init</label>
<input type="text" class="form-control" name="short_name" id="short_names{{$action}}">
</div>
</div>
<button type="submit" class="btn btn-primary"><span class="fa fa-save"></span> Save</button>
And jquery code
$('#update_form').submit(function (e) {
$.ajax({
url: '/update_data',
type: "POST",
data: $('#update_form').serialize(),
dataType: "json",
success: function (data) {
console.log(data.result);
}
});
e.preventDefault();
});
Note: I use multiple partial forms like this all others works fine
I can't submit the form even though I used preventDefault, (page refreshed and doesn't take any action)
Interpretation: the statements "page refreshed" and "used preventDefault" indicate that the problem is that the code inside the $("#id").submit( is not firing and the page's default submit is kicking in hence the "page refreshed".
As the jquery event is not firing, it likely means that the HTML does not exist when the script runs. This can usually be handled by putting in a doc.ready; OP indicates that it's already in doc.ready.
The alternative is to use event delegation. Though it's not clear if the code is running before the HTML is generated or if the HTML is added after (subtle difference).
The solution for event delegation is to use:
$(document).on("submit", "#update_form", function(e) {
e.preventDefault();
$.ajax({...
});
I used to implement an Angular 2/4 application with Bootstrap 3 and used the Reactive Forms approach. I had a field-validation where the border of the input-field turned red and an error message appeared under the field in red font color.
it looks like this:
<div class="form-group row"
[ngClass]="{'has-error': (sourcesForm.get('sourceName').touched ||
sourcesForm.get('sourceName').dirty) &&
!sourcesForm.get('sourceName').valid }">
<label class="col-md-2 col-form-label"
for="sourceNameId">Source Name</label>
<div class="col-md-8">
<input class="form-control"
id="sourceNameId"
type="text"
placeholder="Source Name (required)"
formControlName="sourceName" />
<span class="help-block" *ngIf="(sourcesForm.get('sourceName').touched ||
sourcesForm.get('sourceName').dirty) &&
sourcesForm.get('sourceName').errors">
<span *ngIf="sourcesForm.get('sourceName').errors.required">
Please enter the Source Name.
</span>
<span *ngIf="sourcesForm.get('sourceName').errors.minlength">
The Source Name must be longer than 3 characters.
</span>
<span *ngIf="sourcesForm.get('sourceName').errors.maxlength">
The Source Name is too long.
</span>
</span>
</div>
</div>
Now i have to use Bootstrap 4 and neither the error message or the input-field turns red. How do i realise this? I tried to change the class of the parent span-block to "form-text" but it didn't work.
For beta version of Bootstrap v4, you can check out Form validation docs. There you can read about the new way, supported by all modern browsers for HTML5 way of form-validation with valid/invalid css classes. There Bootstrap uses the .was-validated and .invalid-feedback classes for what you want to achieve (see code snippet).
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<form class="container" id="needs-validation" novalidate>
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
"use strict";
window.addEventListener("load", function() {
var form = document.getElementById("needs-validation");
form.addEventListener("submit", function(event) {
if (form.checkValidity() == false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add("was-validated");
}, false);
}, false);
}());
</script>
If you want something more similar to Bootstrap 3, you can use what they call server-side validation, as it is written:
As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server side validation. They do not require a .was-validated parent class.
Previous answer for alpha version of Bootstrap V4 (if you must use this).
On Bootstrap V4 Form Validation Docs there is the following example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group has-danger">
<label class="form-control-label" for="inputDanger1">Input with danger</label>
<input type="text" class="form-control form-control-danger" id="inputDanger1">
<div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
So i think you just need to change the has-error class to has-danger
This is the solution:
<div class="form-group row">
<label class="col-md-2 col-form-label"
for="sourceNameId">Source Name</label>
<div class="col-md-8">
<input class="form-control"
[ngClass]="{'is-invalid': (sourcesForm.get('sourceName').touched ||
sourcesForm.get('sourceName').dirty) &&
!sourcesForm.get('sourceName').valid }"
id="sourceNameId"
type="text"
placeholder="Source Name (required)"
formControlName="sourceName" >
<span class="invalid-feedback" *ngIf="(sourcesForm.get('sourceName').touched ||
sourcesForm.get('sourceName').dirty) &&
sourcesForm.get('sourceName').errors">
<span *ngIf="sourcesForm.get('sourceName').errors.required">
Please enter the Source Name.
</span>
<span *ngIf="sourcesForm.get('sourceName').errors.minlength">
The Source Name must be longer than 3 characters.
</span>
<span *ngIf="sourcesForm.get('sourceName').errors.maxlength">
The Source Name is too long.
</span>
</span>
</div>
</div>
i needed to put the [ngClass]into the input-tag. Then i had to define the class as is-invalid and set the parent span-class to invalid-feedback
i know that your question is for long time ago, but it is the best way to validate the form-control input field by reactive form technique and bootstrap 4 to display the validation. first you need to write some code for your form :
in html section:
<form [formGroup]="myForm">
<div class="form-group">
<label for="name">first Name: </label>
<input type="text" class="form-control" formControlName="firstName" id="name">
<div *ngIf="firstName.touched && firstName.invalid" class="alert alert-danger">
<div *ngIf="firstName.errors.required">filling name is required!</div>
</div>
</div>
in ts file, you should implement the logic to conduct the validation.
in ts file:
myForm = new FormGroup({
'firstName':new FormControl('',Validators.required)
})
//getter method
get firstName(){
this.myForm.get('firstName');
}
now you can see that the validation is working. now to give style to input field to show the red border around the invalid input, just go to css file of component and add this class to the css file:
.form-control.ng-touched.ng-invalid{border:2px solid red;}
and simply you can see the result.
I'm using this code for a form in HTML:
<div class="login-wrapper">
<form>
<div class="popup-header">
<span class="text-semibold"><i class="fa fa-sign-in"></i> Logging in</span>
</div>
<div class="well">
<div class="form-group has-feedback">
<label>Username</label>
<input type="text" name="user" class="form-control" placeholder="e.g. andre#mail.de">
<i class="icon-users form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label>Password</label>
<input type="password" name="password" class="form-control" placeholder="Password">
<i class="icon-lock form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label>reCaptcha</label>
<div class="g-recaptcha" data-sitekey="..."></div>
</div>
<div class="form-actions text-right">
<input type="submit" id="loginbutton" name="loginbutton" value="Login" class="btn btn-primary">
</div>
</div>
</form>
</div>
<!-- /login wrapper -->
However, when I press the submit button, it does nothing but giving me a very strange url in my browser's address bar:
http://localhost/?user=&password=&g-recaptcha-response=&loginbutton=Login
Whenever I fill out fields, it kind of puts the content into the URL:
http://localhost/?user=peter%40griffin.com&password=somepass&g-recaptcha-response=&loginbutton=Login
The intended PHP code which should be run when pressing the button won't even run or load, since this HTML stuff apparently screws things up. I don't know what I have done the wrong way. Any suggestions?
In order for the form to submit somewhere else, you need to set the form elements action parameter.
<form action="some_file.php">
Alternatively, you can take the query string and append it directly to the file path to test your script.
http://localhost/some_file.php?user=peter%40griffin.com&password=somepass&g-recaptcha-response=&loginbutton=Login
Inside of some_file.php, you would then pull out each of the variables like
$user = $_GET['user'];
$password = $_GET['password'];
The very strange url is actually the result of a GET request.
The parameters are separated by an & so you have:
user=peter%40griffin.com&password=somepass&g-recaptcha-response=
"User" is the attribute name of your input and "peter%40griffin.com" is the value
First you need to send your form to an action using the attribute action="save.php", for example an pass the parameters using the method="POST", so the user can't see the values in the URL.
<form action="save.php" method="post">
I have two forms on my page. They are popups and through javascript they are shown/hidden. Both forms go to wrong controller. The action name is taken from form parameters, but the controller is taken from somewhere else.
<!-- create queue form -->
<div id="popupCreateQueue" style="display: none;">
<div id="queuePopupBody">
<form controller="queueAAA" action="createAAA" name='createQueueForm'>
<input id='popupQueueNameInput' name="queueName" type="text">
<input type="submit" value="Create">
<input type="button" onclick="createQueueForm_hide()" value="Cancel">
</form>
</div>
</div>
<!-- create activity form -->
<div id='popupCreateActivity' style="display: none;">
<div id='activityPopupBody'>
<form controller="activityBBB" action="createBBB" name='createActivityForm'>
<input id='popupActivityNameInput' name="activityName" type="text">
<input type="submit" value="Create">
<input type="button" onclick="createActivityForm_hide()" value="Cancel">
</form>
</div>
</div>
First submit goes to queue/createAAA?queueName=asd
Second submit goes to queue/createBBB?activityName=asd
What happens here? Why some other controller is being called?
upd: i tried to renaming every "queue" in the page to some other name and still the controller called was "queue"
p.s. the buttons to show popups are inside , don't know if that matters.