I'm trying send value by JSON. I enter value on HTML page but it doesn't work. It says "Name is null!";
<form action="" method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="control-label" id="movieName" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
<input type="file" id="files" name="files" multiple />
</div>
</form>
<script>
$("#files").fileinput({
language: 'tr',
uploadAsync: true,
dropZoneTitle: "Please drop here pictures",
browseLabel: "Please choose picture",
uploadLabel: "Upload",
uploadUrl: "#Url.Action("Add","Movie")",
allowedFileExtensions: ['jpg', 'png', 'gif'],
maxFileCount: 4,
resizeImage: true,
maxImageWidth: 800,
maxImageHeight: 600,
resizePreference: 'width',
resizeImageQuality: 0.75,
uploadExtraData: { name: $("#movieName").val()}
});
</script>
If I enter standart value it works. Like this:
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="control-label" id="movieName" value="Test" />
<span asp-validation-for="Name" class="text-danger"></span>
but I want to send on HTML page I entered value. How can i do?
Your script is being executed as soon as the page loads, even before you have the chance to input something in the form fields. To solve this you need to only run your script when the form is submitted, like this:
<form action="" method="post" onsubmit="submitForm()">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="control-label" id="movieName" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
<input type="file" id="files" name="files" multiple />
</div>
<input type="submit">Submit</input>
</form>
<script>
function submitForm() {
$("#files").fileinput({
language: 'tr',
uploadAsync: true,
dropZoneTitle: "Please drop here pictures",
browseLabel: "Please choose picture",
uploadLabel: "Upload",
uploadUrl: "#Url.Action("Add","Movie")",
allowedFileExtensions: ['jpg', 'png', 'gif'],
maxFileCount: 4,
resizeImage: true,
maxImageWidth: 800,
maxImageHeight: 600,
resizePreference: 'width',
resizeImageQuality: 0.75,
uploadExtraData: { name: $("#movieName").val() }
});
return false;
}
</script>
A slightly more clear way would be to use addEventListener, like this:
<script>
function submitForm(event) {
event.preventDefault(); // Stop from reloading page etc.
// Rest of old script code
}
document.querySelector('form').addEventListener('submit', submitForm);
</script>
This lets you remove the onsubmit attribute in the HTML.
Related
When we write something in the input field and then dont want to submit the form we click outside the form box but the form fields are not getting blank. I want them to get reset to the blank fields when open the form without refreshing the webpage.
Ps: The form is a popup form
Code for the form:
$(function(){
$("#schedule-demo").validate({
rules: {
firstname: 'required',
lastname: 'required',
email: {
required: true,
email: true,
},
phone : { required: true, minlength: 7 }
},
submitHandler: function(form, event) {
submitInformationForm(form);
event.preventDefault();
return false;
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<form id="schedule-demo" hubspot-form-id="5bd0f54b-4329-40dd-973e-f1fedce07775">
<p>Please provide us your contact information and the expert will reach out shortly.</p>
<div class="form-group">
<label for="demo-first-name">First Name *</label>
<input type="text" name="firstname" class="form-control" id="demo-first-name">
</div>
<div class="form-group">
<label for="demo-last-name">Last Name *</label>
<input type="text" name="lastname" class="form-control" id="demo-last-name">
</div>
<div class="form-group">
<label for="demo-email">Work Email *</label>
<input type="email" name="email" class="form-control" id="demo-email">
</div>
<div class="form-group">
<label for="demo-phone">Phone Number *</label>
<input type="text" name="phone" class="form-control" id="demo-phone">
</div>
<div class="button-group">
<button class="btn btn-primary btn-lg btn-block" type="submit">Submit</button>
</div>
</form>
You can create a js function that u can call with a button for example, and this resets all form inputs.
<button class="button" type="button" onclick="Reset();">Reset</button>
function Reset() {
document.getElementById("schedule-demo").reset();
}
"... we click outside the form box but the form fields are not getting blank."
If you want to clear out the form when you click outside the form box, you could write an event handler that resets the form when you click outside of it.
$(document).on('click', function(e) {
var container = $('#schedule-demo');
if (!container.is(e.target) && container.has(e.target).length === 0) {
$(container).validate().resetForm();
$(container).get(0).reset();
};
});
The .resetForm() is provided by the jQuery Validate plugin to reset all validation. The .get(0).reset() will clear out the form's contents.
$(function() {
$("#schedule-demo").validate({
rules: {
firstname: 'required',
lastname: 'required',
email: {
required: true,
email: true,
},
phone: {
required: true,
minlength: 7
}
},
submitHandler: function(form) {
// submitInformationForm(form); // commented out for demo
return false;
}
});
$(document).on('click', function(e) {
var container = $('#schedule-demo');
if (!container.is(e.target) && container.has(e.target).length === 0) {
$(container).validate().resetForm();
$(container).get(0).reset();
};
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<form id="schedule-demo" hubspot-form-id="5bd0f54b-4329-40dd-973e-f1fedce07775">
<p>Please provide us your contact information and the expert will reach out shortly.</p>
<div class="form-group">
<label for="demo-first-name">First Name *</label>
<input type="text" name="firstname" class="form-control" id="demo-first-name">
</div>
<div class="form-group">
<label for="demo-last-name">Last Name *</label>
<input type="text" name="lastname" class="form-control" id="demo-last-name">
</div>
<div class="form-group">
<label for="demo-email">Work Email *</label>
<input type="email" name="email" class="form-control" id="demo-email">
</div>
<div class="form-group">
<label for="demo-phone">Phone Number *</label>
<input type="text" name="phone" class="form-control" id="demo-phone">
</div>
<div class="button-group">
<button class="btn btn-primary btn-lg btn-block" type="submit">Submit</button>
</div>
</form>
<button>click outside of container</button>
As a side note...
submitHandler: function(form, event) {
submitInformationForm(form);
event.preventDefault();
return false;
}
Using preventDefault() inside of your submitHandler function is completely pointless as the plugin developer does not provide a default event to prevent.
submitHandler: function(form) {
submitInformationForm(form);
return false;
}
I want to show a form in a modal window but I have my buttons on my javascript, so I would want to make them the "submit button" of the form.
This is my code:
I open the modal with this javascript function, with 2 buttons:
modal.js
window.newModal = function(path, title){
ShopifyApp.Modal.open({
src: path,
title: title,
height: 400,
width: 'large',
buttons: {
primary: {
label: "OK",
message: 'modal_ok',
callback: function(message){
ShopifyApp.Modal.close("ok");
}
},
secondary: {
label: "Cancel",
callback: function(message){
ShopifyApp.Modal.close("cancel");
}
}
},
}, function(result){
if (result == "ok")
ShopifyApp.flashNotice("'Ok' button pressed")
else if (result == "cancel")
ShopifyApp.flashNotice("'Cancel' button pressed")
});
}
And this is my form:
form_page.html.erb
<section>
<section class="full-width" align="center">
<article>
<div class="card" style="margin-bottom:0px;">
<form method="POST" action="form_page">
<input name="authenticity_token" value="<%= form_authenticity_token %>" type="hidden">
<div class="row">
<label>Dirección:</label>
<input type="text" name="address"/>
</div>
<div class="row">
<label>Apt, suite, etc. (opcional):</label>
<input type="text" name="addressopt"/>
</div>
<div class="row">
<label>Código Postal:</label>
<input type="text" name="postal" pattern="[0-9]{5}"/>
</div>
<div class="row">
<label>Phone (opcional):</label>
<input type="text" pattern="[0-9]{9}" name="phone"/>
</div>
<div class="row">
<label>City:</label>
<select name="city">
<option>Madrid</option>
<option>Barcelona</option>
<option>Málaga</option>
</select>
</div>
</form>
</div>
</article>
How can I submit that form through that function buttons?
I haven't used ShopifyApp ever, but in general if you want to submit a form in javascript you can just call submit() on the element. You'd want to give an id to the form to find it easily.
https://www.w3schools.com/jsref/met_form_submit.asp
I want to set set Custom msg of jquery validation. my form code : it always give msg: "You have not answered all required fields". But i would like to change.
<form id="addproductform" method="post" action="" role="form">
<div class="col-md-6">
<div class="form-group">
<label>Name </label>
<input data-validation="required" data-msg="Please enter your first name" class="form-control" placeholder="Enter name">
</div>
</form>
Jquery:-
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.8/jquery.form-validator.min.js"></script>
<script>
$.validate({
decimalSeparator: ','
});
</script>
Please use data-validation-error-msg="Please enter your first name" instead of data-msg="Please..." as follows:
$.validate({
decimalSeparator: ','
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.8/jquery.form-validator.min.js"></script>
<form id="addproductform" method="post" action="" role="form">
<div class="col-md-6">
<div class="form-group">
<label>Name </label>
<input data-validation="required" data-validation-error-msg="Please enter your first name" class="form-control" placeholder="Enter name">
</div>
<input type="submit" value="Submit" />
</form>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<form id="addproductform" method="post" action="" role="form">
<div class="col-md-6">
<div class="form-group">
<label>Name </label>
<input name="name" class="form-control" placeholder="Enter name" >
<input type="submit">
</div>
</form>
<!-- jQuery Form Validation code -->
<script>
// When the browser is ready...
$(function() {
// Setup form validation on the #register-form element
$("#addproductform").validate({
// Specify the validation rules
rules: {
name: "required",
},
// Specify the validation error messages
messages: {
name: "Please enter your name",
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
I've been experimenting with JQuery form validation, but haven't been able to get success/failure classes to be added once the validation has been complete.
Here is my code:
https://jsfiddle.net/5WMff/
<form method = "post" id = "signUpForm">
<div class="modal-body">
<div class="form-group">
<label for="firstName">First Name:</label>
<input type="text" class="form-control" name="firstName">
</div>
<div class="form-group">
<label for="surname">Surname:</label>
<input type="text" class="form-control" name="surname" >
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" name="email">
</div>
<div class="form-group">
<label for="phoneNumber">Phone Number:</label>
<input type="phone" class="form-control" name="phoneNumber">
</div>
<div class="form-group">
<label for="postalCode">Home Postcode:</label>
<input type="text" class="form-control" name="postalCode">
</div>
<div class="checkbox">
<label><input type="checkbox" name = "acceptTCs">Accept Terms and Conditions</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">Back</button>
<input type = "submit" name = "submit" class = "btn btn-success btn-large" value = "Submit" ></button>
</div>
</form>
JS:
$(document).ready(function () {
$('#signUpForm').validate({
rules: {
firstName: {
minlength: 2,
required: true
},
surname: {
required: true,
email: true
},
email: {
minlength: 2,
required: true
},
phoneNumber: {
minlength: 7,
required: true
}
},
highlight: function (element) {
$(element).closest('.form-group').removeClass('success').addClass('error');
},
success: function (element) {
element.text('OK!').addClass('valid')
.closest('.form-group').removeClass('error').addClass('success');
}
});
});
The validation (OK vs. more info required) is working fine, it's just failing to add the success/failure class as well. I know it's something obvious I've missed out, but have come to a bit of a dead end.
The effect I'm looking for is like here: http://jsfiddle.net/5WMff/
Thanks.
$.validator.setDefaults({
submitHandler: function() {
alert("submitted!");
}
});
Use submitHandler . Hope this will help you.
I'm trying to use this plugin and I'm not getting anything back when I click submit on the form.
This is the form that is inside a modal. I'm using bootstrap.
<form id="myForm" action="#" method="post" enctype="multipart/form-data">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="closeModalTimes">
×
</button>
<h4 class="modal-title">Upload New Document</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">Name *</label>
<input class="form-control" type="text" id="name" name="name" required />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">Subject *</label>
<textarea name="subject" id="subject" class="form-control" required></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="inputFile">Document File *</label>
<input type="file" name="inputFile" id="inputFile" required>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn" id="closeModalButton">
Close
</button>
<button type='button' id="submitFile" class='btn'>
Send
</button>
</div>
</div><!-- /.modal-content -->
<input name="myId" type="hidden" id="myId" value="393839334034933">
<input name="user" type="hidden" id="user" value="339">
<input name="page" type="hidden" id="page" value="test">
</form>
This is the jquery on the bottom of the page
$("#inputFile").fileinput({
overwriteInitial: false,
maxFileSize: 4000,
showPreview: false,
showUpload: false,
uploadAsync: true,
allowedFileExtensions: ["jpg", "jpeg", "gif", "png"],
browseClass: "btn btn-info",
elErrorContainer: "#documentErrorBlock",
msgSizeTooLarge: "File exceeds size",
msgInvalidFileExtension: "Invalid extension",
uploadURL: "upload.php",
uploadExtraData: function() {
return {
id: $("#myId").val(),
userId: $("#user").val(),
page: $("#page").val(),
name: $("#name").val(),
subject: $("#subject").val()
};
}
});
$('#inputFile').on('filebatchuploadsuccess', function(event, data, previewId, index) {
alert('success: '+data.response);
});
$('#inputFile').on('filebatchuploaderror', function(event, data, previewId, index) {
alert('error: '+data.response);
});
$("#submitFile").click(function(e) {
$('#inputFile').fileinput('upload');
});
And this is the PHP file:
$output = array();
$output['message'] = 'Reached PHP';
$output['success'] = true;
echo json_encode($output);
When I click nothing happens at all... not an error message or anything...
Thanks for your help!
The reason for not submitting came from your "uploadURL" which is spelt wrongly according to the documentation.
Change this
uploadURL: "upload.php",
to
uploadUrl: "upload.php",
that solves your problem.
http://plugins.krajee.com/file-input#option-uploadurl