I am using jquery-modal by kyle fox and am encountering this issue. When I open up the modal window, my partial view is loaded into the modal. However, I get this error in the console:
Dropzone.options.dropzone is not a function
If i change Dropzone.options.dropzone into $(#dropzone).dropzone, the code works. However, when I submit, it doesn't upload the files to the server but just redirects me to the home page.
I already loaded dropzone js and css in the header but I can't seem to get this to work.
#model AppOne.Data.ViewModels.AnnouncementAttachmentDetailsViewModel
<script>
Dropzone.options.dropzone({
url: "#Url.Action("Save", "AnnouncementAttachments", new { area = "Messages" })",
autoProcessQueue: false,
addRemoveLinks: true,
maxFiles: 1,
uploadMultiple: true,
parallelUploads: 100,
init: function () {
console.log("active");
var submitButton = document.querySelector("#submit");
var token = $('input[name="__RequestVerificationToken"]').val();
var wrapperThis = this;
submitButton.addEventListener("click", function (e) {
console.log("submitted");
wrapperThis.processQueue();
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
});
this.on('sendingmultiple', function (data, xhr, formData) {
formData.append("__RequestVerificationToken", token);
formData.append("#Html.IdFor(x=>x.AttachmentId)",$("##Html.IdFor(x => x.AttachmentId)").val())
});;
this.on('errormultiple', function (file, message) {
//toastr.error(message);
wrapperThis.disable();
});
this.on('successmultiple', function (file,message) {
$.each(message, function (key, value) {
//toastr.success(value);
});
$(".dz-remove").hide();
wrapperThis.disable();
});
}
});
</script>
<div class="row row-extend">
<div class="col-sm-12">
<h2>Upload</h2>
</div>
<div class="col-sm-12">
<hr />
</div>
</div>
#using (Html.BeginForm(null, null, FormMethod.Post, new { #action = "/", enctype = "multipart/form-data", id = "modal" }))
{
#Html.AntiForgeryToken()
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
#Html.HiddenFor(x => x.AttachmentId)
<div id="dropzone" name="Files" class="dropzone form-group"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div class="clearfix">
<div class="pull-right">
<button type="submit" id="submit" class="btn btn-primary">Upload</button>
#Html.ActionLink("Cancel", "Index", #ViewContext.RouteData.Values["controller"].ToString(), new { }, new { #class = "btn btn-outline-secondary" })
</div>
</div>
</div>
</div>
</div>
</div>
}
EDIT:
My layout.cshtml:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - AppOne</title>
<link rel="stylesheet" href="~/twitter-bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/theme/theme-extended.css" />
<link rel="stylesheet" href="~/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="~/jqueryui/jquery-ui.css" />
<link rel="stylesheet" href="~/toastr.js/toastr.css" />
<link rel="stylesheet" href="~/jquery-modal/jquery.modal.css" />
<link rel="stylesheet" href="~/select2/css/select2.min.css" />
<link rel="stylesheet" href="~/css/Modal.css" />
<link rel="stylesheet" href="~/css/Site.css" />
<link rel="stylesheet" href="~/datatables/css/jquery.dataTables.css" />
<link rel="stylesheet" href="~/datatables/css/select.dataTables.css" />
<link rel="stylesheet" href="~/datatables/css/fixedHeader.dataTables.css" />
<link rel="stylesheet" href="~/datatables/css/responsive.bootstrap.css" />
<link rel="stylesheet" href="~/css/DataTablesExtended.css" />
<link rel="stylesheet" href="~/bootstrap-datetimepicker/bootstrap-datetimepicker.css" />
<link rel="stylesheet" href="~/dropzone/dropzone.css" />
<script src="~/jquery/jquery.min.js"></script>
<script src="~/jquery-validate/jquery.validate.js"></script>
<script src="~/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script src="~/jqueryui/jquery-ui.js"></script>
<script src="~/twitter-bootstrap/js/bootstrap.js"></script>
<script src="~/moment.js/moment.min.js"></script>
<script src="~/select2/js/select2.min.js"></script>
<script src="~/toastr.js/toastr.min.js"></script>
<script src="~/jquery-modal/jquery.modal.min.js"></script>
<script src="~/datatables/js/jquery.dataTables.js"></script>
<script src="~/datatables/js/dataTables.select.js"></script>
<script src="~/datatables/js/dataTables.fixedHeader.js"></script>
<script src="~/datatables/js/dataTables.responsive.js"></script>
<script src="~/datatables/js/responsive.bootstrap.js"></script>
<script src="~/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
<script src="~/dropzone/dropzone.js"></script>
#RenderSection("scripts", false)
#RenderSection("styles", false)
</head>
However, when I submit, it doesn't upload the files to the server but just redirects me to the home page.
It seems that your Upload button is in the form , and the url of form conflicts with the url of Dropzone.js (the url has to be specified on elements other than form (or when the form doesn't have an action attribute).).Try to make the modification like the working example below :
Html.BeginForm , remove the action
#using (Html.BeginForm( FormMethod.Post, new { enctype = "multipart/form-data", id = "modal" }))
{
// the stuff you want
}
Dropzone.js , NOTE: If you have the option uploadMultiple set to true, then Dropzone will append [] to the paramName. After looking at the request from a html5 multiple file upload I noticed the request does not add the indexes to the filename (files[n]). Dropzone.js does this so there is a work around. If you add the paramName option to Dropzone JS config and have it call a method which returns files you will get the same behaviour as the html5 multiple file upload. You could also refer to this link for more details on Configuration options of Dropzone.js
#section Scripts
{
<script>
function myParamName() {
return "Files";
}
$("#dropzone").dropzone({
url: "#Url.Action("Save", "Home")",
autoProcessQueue: false,
paramName: myParamName,
addRemoveLinks: true,
maxFiles: 1,
uploadMultiple: true,
parallelUploads: 100,
init: function () {
console.log("active");
var submitButton = document.querySelector("#submit");
var token = $('input[name="__RequestVerificationToken"]').val();
var wrapperThis = this;
submitButton.addEventListener("click", function (e) {
console.log("submitted");
wrapperThis.processQueue();
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
});
this.on('sendingmultiple', function (data, xhr, formData) {
formData.append("__RequestVerificationToken", token);
formData.append("#Html.IdFor(x=>x.AttachmentId)",$("##Html.IdFor(x => x.AttachmentId)").val());
});;
}
});
</script>
}
Controller
public IActionResult Save(List<IFormFile> Files,int AttachmentId)
{
//....
}
Related
I have looked at all the examples I could find but cannot find an example that does both, select camera (front or rear) and snap an image.
How can I add to the example below the ability to select a different camera.
https://github.com/mdwaseelahmed/WebCamjsBlazorDemo
[wwwroot/webcamjs/Configuration.js]
function ready() {
if (document.readyState == 'complete') {
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
try {
Webcam.attach('#camera');
} catch (e) {
alert(e);
}
}
}
function take_snapshot() {
// take snapshot and get image data
var data = null;
Webcam.snap(function (data_uri) {
data = data_uri;
});
return data;
}
[wwwroot/webcamjs/webcam.js]
I cannot add this file because it pushes over the body limit.
[_Host.cshtml]
#page "/"
#namespace WebcamjsDemo.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebcamjsDemo</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="WebcamjsDemo.styles.css" rel="stylesheet" />
</head>
<body>
<component type="typeof(App)" render-mode="ServerPrerendered" />
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
<script type="text/javascript" src="~/webcamjs/webcam.min.js"></script>
<script src="~/webcamjs/Configuration.js"></script>
</body>
</html>
[Index.razor]
#page "/"
#inject IJSRuntime JSRuntime
<button #onclick="Capture">Capture</button>
<div class="col-md-2"></div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">Camera</div>
<div class="panel-body">
<div id="camera"></div>
<!-- A button for taking snaps -->
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">Captured Photo</div>
<div class="panel-body">
<div id="results">Your captured image will appear here...</div>
</div>
<br />
<br />
</div>
</div>
#foreach (var item in stringList)
{
<img src="#item" alt="Alternate Text" width="200px;" height="200px;" />
}
#code
{
List<string> stringList = new List<string>();
string aa = "";
public async void Capture()
{
stringList.Add(await JSRuntime.InvokeAsync<string>("take_snapshot"));
StateHasChanged();
}
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
JSRuntime.InvokeVoidAsync("ready", this);
}
}
}
I would suggest using the InputFile component. This one allows you to specify to use the camera, which will then trigger the native camera app where you can switch between both cameras.
<InputFile accept="image/png, image/gif, image/jpeg;capture=camera" OnChange="HandleFileSelected" />
capture=camera is the important part of this code.
I'm working on a standalone application and I'm trying to pass a string which is an output of change event, to the spring controller using the code below
HTML CODE
<!DOCTYPE HTML>
<html xmnls:th="http://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>ADD NEW BILL</title>
<!-- jquery -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$("#Mandy_Name").autocomplete({
source: "autocomplete",
minLength: 3
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#Mandy_Name").change(function(){
var changed = $(this).val();
console.log(changed);
$.ajax({
type : "POST",
dataType : 'json',
url : "mandyname",
data: {name:changed},
success: function(data) {
console.log(data);
return false;
}
});
});
});
</script>
</head>
<body>
<div class="container">
<hr>
<p class="h4 mb-4">SAVE NEW PURCHASE BILL</p>
<form action="#" th:action="#{/savePurchase}"
th:object="${purchase}" method="post">
<!-- add a hidden field to handle update -->
<!-- <input type="hidden" th:field="*{idPurchaseDetails}"> -->
<input type="hidden" th:field="*{ID}">
MANDY NAME : <input id="Mandy_Name" type="text" th:field="*{mandyName}"
class="form-control mb-4 col-4" placeholder="Mandy Name">
GSTIN : <input type="text" th:field="*{gstin}"
class="form-control mb-4 col-4" value = gst() placeholder="GSTIN">
<button type="submit" class="btn btn-info col-2">SAVE</button>
</form>
<br><br>
<a th:href="#{/purchaselist}">BACK TO PURCHASE LIST</a>
</div>
</body>
</html>
controller code
#RequestMapping(value = "mandyName", method = RequestMethod.POST)
public ModelAndView getSearchResultViaAjax(#RequestBody Purchase purchase, HttpServletRequest request,
HttpServletResponse response)
{
ModelAndView mv = new ModelAndView();
String name = purchase.getMandyName();
System.out.println(name);
return mv;
}
I'm getting an error "Failed to load resource: the server responded with a status of 404 ()" in the browser console.
Help me to pass the string "changed" to the controller.
I'm using these dependencies
jquery from "org.webjars" ,
spring-boot-starter-actuator ,
spring-boot-starter-data-jpa ,
spring-boot-starter-web ,
spring-boot-starter-data-rest ,
spring-boot-starter-thymeleaf ,
spring-boot-devtools ,
spring-boot-starter-json ,
mysql-connector-java ,
spring-boot-starter-test ,
junit-vintage-engine ,
spring-boot-maven-plugin
Should I be using any other dependencies ??
The HTTP Status 404 means that the URL provided, cannot be found on the server.
I see that you make the Ajax call with an incorrect URL. Change it to the correct one depending on your Spring App and port.
Normally it should be under: http://localhost:8080/mandyName. But this you have to check and examine.
Sample JS code:
$(document).ready(function(){
$("#Mandy_Name").change(function(){
var changed = $(this).val();
console.log(changed);
$.ajax({
type : "POST",
dataType : 'json',
url : "http://localhost:8080/mandyName", // ~~ HERE ~~
data: {name:changed},
success: function(data) {
console.log(data);
return false;
}
});
});
});
I want to load some options via ajax request and show them into select tag HTML. After I get data and create a select tag manually, the HTML file doesn't show the select tag. I used jquery and put the codes in other files.
I try to put ajax request in both $(document).ready() and function but it doesn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- META SECTION -->
<title>Atlant - Responsive Bootstrap Admin Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<!-- END META SECTION -->
<!-- CSS INCLUDE -->
<link rel="stylesheet" type="text/css" id="theme" href="/public/css/theme-default.css"/>
<!-- EOF CSS INCLUDE -->
</head>
<body onload="onLoadCenterName()">
<!-- START PAGE CONTAINER -->
<div class="page-container">
<!-- PAGE CONTENT -->
<div class="page-content ">
<!-- PAGE CONTENT WRAPPER -->
<div class="page-content-wrap">
<div class="row">
<div class="col-md-12">
<form id="addSiteForm" class="form-horizontal"
style="margin-top: 20px;margin-left: 50px;margin-right: 50px">
<div class="panel panel-default">
<div class="panel-heading ">
<h3 class="panel-title "><strong>Add New Site</strong></h3>
</div>
<div class="panel-body">
</div>
<div class="panel-body">
<div class="form-group">
<label class="col-md-3 col-xs-12 control-label">Select User Type</label>
<div class="col-md-6 col-xs-12">
<select id="addSiteSelectCenterInput" class="form-control select">
</select>
<span class="help-block">Select type of the user account </span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- END PAGE CONTENT WRAPPER -->
</div>
<!-- END PAGE CONTENT -->
</div>
<!-- END PAGE CONTAINER -->
<!-- START PRELOADS -->
<audio id="audio-alert" src="/public/audio/alert.mp3" preload="auto"></audio>
<audio id="audio-fail" src="/public/audio/fail.mp3" preload="auto"></audio>
<!-- END PRELOADS -->
<!-- START SCRIPTS -->
<!-- START PLUGINS -->
<script type="text/javascript" src="/public/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/public/js/plugins/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="/public/js/plugins/bootstrap/bootstrap.min.js"></script>
<!-- END PLUGINS -->
<!-- START THIS PAGE PLUGINS-->
<script type='text/javascript' src='/public/js/plugins/icheck.js'></script>
<script type="text/javascript" src="/public/js/plugins/jquery/jquery.mCustomScrollbar.js"></script>
<!-- END THIS PAGE PLUGINS-->
<!-- START TEMPLATE -->
<!-- <script type="text/javascript" src="/public/js/settings.js"></script>-->
<script type='text/javascript'
src='/public/js/plugins/validationengine/languages/jquery.validationEngine-en.js'></script>
<script type='text/javascript' src='/public/js/plugins/validationengine/jquery.validationEngine.js'></script>
<script type="text/javascript" src="/public/js/plugins/bootstrap/bootstrap-select.js"></script>
<script type='text/javascript' src='/public/js/plugins/noty/jquery.noty.js'></script>
<script type='text/javascript' src='/public/js/plugins/noty/layouts/topCenter.js'></script>
<script type='text/javascript' src='/public/js/plugins/noty/layouts/topLeft.js'></script>
<script type='text/javascript' src='/public/js/plugins/noty/layouts/topRight.js'></script>
<script type='text/javascript' src='/public/js/plugins/noty/themes/default.js'></script>
<script type="text/javascript" src="/public/js/plugins.js"></script>
<script type="text/javascript" src="/public/js/actions.js"></script>
<script type="text/javascript" src="/public/js/addSite.js"></script>
<!-- END TEMPLATE -->
<!-- END SCRIPTS -->
</body>
</html>
addSite.js
function onLoadCenterName() {
$.ajax({
type: 'GET',
url: '/centers/getAllCenters',
dataType: 'json',
contentType: 'application/json',
success: function (data) {
console.log("SUCCESS : ", data);
let selectList = document.getElementById("addSiteSelectCenterInput");
$.each(data, function (key, value) {
console.log(key, value._id, value.centerName);
const option = document.createElement("option");
option.value = value._id;
option.text = value.centerName;
selectList.appendChild(option);
// $('#addSiteSelectCenterInput')
// .append($("<option></option>")
// .attr("value", )
// .text(value.centerName));
});
console.log(selectList);
noty({
text: 'Successful load centers ',
layout: 'topRight',
type: 'success',
timeout: true
}).setTimeout(5000);
$.mpb("update", {
value: 100, speed: 5, complete: function () {
$(".mpb").fadeOut(200, function () {
$(this).remove();
});
}
});
},
error: function (e) {
console.log("ERROR : ", e);
noty({
text: 'There was an error',
layout: 'topRight',
type: 'error',
timeout: true
}).setTimeout(5000);
$.mpb("update", {
value: 100, speed: 5, complete: function () {
$(".mpb").fadeOut(200, function () {
$(this).remove();
});
}
});
}
});
}
in chrom console, result is here:
<select id="addSiteSelectCenterInput" class="form-control select" style="display: none;">
<option value="5d0f86f0a2b7a41bdcd3c91f">sdf</option><option value="5d0f9c4067731820fcabf1eb">scaasdad</option></select>
According to your console result, the <select> is not visible because it has the attribute style="display: none;".
There is nothing in the code that you have provided that would add that attribute, so you obviously haven't given us all the relevant code.
So you either need to remove that attribute... or don't hide the control in the first place.
To show it via jQuery use .show()...
$("#addSiteSelectCenterInput").show()
Or in vanilla JS change the style.display property...
document.getElementById("addSiteSelectCenterInput").style.display = "";
#model IEnumerable<ModelClass.DhoniRegistry>
#using (#Html.BeginForm())
{
<b> Dhoni Name </b>
#Html.TextBox("SearchTerm", null, new { id = "txtSearch" })
<input type="submit" value="Search" />
}
<link href="~/Content/jquery-ui.min.css" rel="stylesheet" />
<link href="~/Content/jquery-ui.structure.min.css" rel="stylesheet" />
<link href="~/Content/jquery-ui.theme.min.css" rel="stylesheet" />
<script src="~/Scripts/external/jquery/jquery.js"></script>
<script src="~/Scripts/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function ()
{
$("#txtSearch").autocomplete({ source: '#Url.Action("ASDhoniName")' });
});
</script>
Controller
public JsonResult ASDhoniName(string SearchTerm)
{
DhoniRegistryBusinessSer dhoniBisSer = new DhoniRegistryBusinessSer();
List<string> dhoniReg;
dhoniReg = dhoniBisSer.ListDhoniRegistry().Where(x => x.DhoniName.StartsWith(SearchTerm))
.Select(y => y.DhoniName).ToList();
return Json(dhoniReg,JsonRequestBehavior.AllowGet);
}
You're missing/wrongly placed jQuery/ jQuery UI.js/ autocomplete.js files.
Also you have added two copies of jquery-ui. Remove one.
Here's the order to include files
jQuery.js
jQuery UI.js
autocomplete.js
Add the following before autocomplete
<script src="http://code.jquery.com/jquery-1.9.1.js />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" />
I am trying to create a form, after clicking on submit i should get a popup with entered values for confirmation with edit and submit buttons.
I see lots of examples but nothing is exact.
help is appreciated.
this is the code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/blitzer/jquery-ui-1.8.2.custom.css">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).ready(function(){
$("#list").click(function() {
var cun = $("#list").val();
$.ajax({
type: "POST",
url: "http://localhost/prakash/popup form/view.php",
data: {'data':cun},
success: function(data){
//redirect to id using response
//window.location.replace("http://yoursite.com/products/" + response);
$('.display').html(data);
}
});
});
});
</script>
<script>
$(document).ready(function(){
$("#add").click(function() {
var cun = $("#dis").val();
$.ajax({
type: "POST",
url: "http://localhost/prakash/popup form/add.php",
data: {'data':cun},
success: function(data){
//redirect to id using response
//window.location.replace("http://yoursite.com/products/" + response);
$('.display').html(data);
}
});
});
});
</script>
<script>
$(function(){
// jQuery UI Dialog
$('#dialog').dialog({
autoOpen: false,
width: 400,
modal: true,
resizable: false,
buttons: {
"Submit Form": function() {
document.testconfirmjq.submit();
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
$('form#testconfirmjq').submit(function(e){
e.preventDefault();
$("p#dialog-name").html($("input#name").val());
$('#dialog').dialog('open');
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div align="center" data-role="main" class="ui-content">
Add New
Show List
</div>
<div class="display" align="center" display="inline">
<table id="dis" border="0">
<form id="testconfirmjq" method="POST" action="insert.php">
<tr><td>Name</td><td> <input type="text" name="name" id="name"></td></tr>
<tr><td>Age</td><td><input type="text" name="age" id="datepicker-13" size="30"></td></tr>
<tr><td>City</td><td> <input type="text" name="city"></td></tr>
<tr><td><input id="button" type="submit" name="send" value="Submit"></td></tr>
</form>
</table>
You entered your Name as:
If this is correct, click Submit Form.
To edit, click Cancel.
This code may be help you
function send(){
var name = document.getElementById('name').value;
var r = confirm(name);
if (r == true) {
//apply with your function(it will be excuted)
return true;
} else {
return false;
}
return false;
}
<form action="demo.php" onsubmit="return send()">
<input type="text" id="name">
<input type="button" value="send">
</form>