I have this Bootstrap from model, and I do not know why the submit button does not sent the file, it sent nothing.
<form action="myPage.php" class="form-horizontal form-bordered">
<div class="form-body">
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="input-group input-large">
<div class="form-control uneditable-input input-fixed input-medium" data-trigger="fileinput">
<i class="fa fa-file fileinput-exists"></i>
<span class="fileinput-filename"> </span>
</div>
<span class="input-group-addon btn default btn-file">
<span class="fileinput-new"> CHOOSE FILE </span>
<span class="fileinput-exists"> CHANGE </span>
<input type="file" name="..."> </span>
DELETE
</div>
</div>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-6 col-md-offset-3">
Cancel
</div>
</div>
</div>
</form>
all links are available
Try this code :
<form action="myPage.php" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="exampleInputFile">CHOOSE FILE</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
you are using link ,You need submit button
<button type="submit" class="btn btn-default">Submit</button> and your form is messing ">"
<form action="myPage.php" class="form-horizontal form-bordered"
Related
I am dynamically generating modals with form that look like described at the bottom. I searched and found How to handle multiple forms in one page but I unfortunately can't find out how I can handle posting one of the form if exactly that one has been clicked/submitted. Any help will be greatly appreciated.
<td class="actions">
<a href="#modalForm-1" class="modal-with-form on-default cancel-row">
<i class="fas fa-edit"></i>
</a>
<div id="modalForm-1" class="modal-block modal-block-primary mfp-hide">
<form method="post" action="/insurances/update">
<section class="card">
<header class="card-header">
<h2 class="card-title">Modification - Interhyp</h2>
</header>
<div class="card-body">
<div class="form-row">
<div class="form-group col-md-6">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" value="Interhyp" name="name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="msisdn">MSISDN</label>
<input type="text" class="form-control" id="msisdn" value="1234567" name="msisdn">
</div>
<div class="form-group col-md-6">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" value="inter-daolwin#gmail.com"
name="email_address">
</div>
</div>
</div>
<footer class="card-footer">
<div class="row">
<div class="col-md-12 text-right">
<input type="hidden" name="search_uuid" value="287b5e62-a434-4e67-9ce0-f24466876114">
<button type="submit" class="btn btn-primary modal-confirm">Submit</button>
<button class="btn btn-default modal-dismiss">Cancel</button>
</div>
</div>
</footer>
</section>
</form>
</div>
</td>
<td class="actions">
<a href="#modalForm-2" class="modal-with-form on-default cancel-row">
<i class="fas fa-edit"></i>
</a>
<div id="modalForm-1" class="modal-block modal-block-primary mfp-hide">
<form method="post" action="/insurances/update">
<section class="card">
<header class="card-header">
<h2 class="card-title">Modification - Interhyp</h2>
</header>
<div class="card-body">
<div class="form-row">
<div class="form-group col-md-6">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" value="Interhyp" name="name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="msisdn">MSISDN</label>
<input type="text" class="form-control" id="msisdn" value="1234567" name="msisdn">
</div>
<div class="form-group col-md-6">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" value="inter-daolwin#gmail.com"
name="email_address">
</div>
</div>
</div>
<footer class="card-footer">
<div class="row">
<div class="col-md-12 text-right">
<input type="hidden" name="search_uuid" value="287b5e62-a434-4e67-9ce0-f24466876114">
<button type="submit" class="btn btn-primary modal-confirm">Submit</button>
<button class="btn btn-default modal-dismiss">Cancel</button>
</div>
</div>
</footer>
</section>
</form>
</div>
</td>
The other modals bear the ids "modalForm-3", "modalForm-4" and so on and can randomly be clicked/submitted.
D.
I have a ejs(html) file, and There is a div class called "card".
What I want to do is that, if I click the button("Click me") then,
card-header(header1) has to be changed(before --> after) with colored back-ground.
However when I clicked the button, only the back-ground color was changed (excluding the header). need your help.
function save() {
var x = document.getElementById("header1");
x.style.backgroundColor="#cfe8f9";
x.setAttribute("value", "After");
}
<div class="col-sm-6">
<div class="card">
<div class="card-header" id="header1" style="font-weight:bold;">before</div>
<div class="card-body">
<form action="" method="POST">
<input type="hidden" id="input_flag" value="">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">noID</span>
</div>
<input type="text" id="notiSeq_1" name="notiSeq_1" class="form-control" value="" style="background-color:#FFFFFF">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-sort-numeric-asc"></i>
</span>
...
...
...
<button type="button" class="btn btn-primary" onclick ="save()">Click me</button>
</div> //end of col-sm-6
Update the innerHTML
function save() {
var x = document.getElementById("header1");
x.style.backgroundColor="#cfe8f9";
x.innerHTML = "After";
}
<div class="col-sm-6">
<div class="card">
<div class="card-header" id="header1" style="font-weight:bold;">before</div>
<div class="card-body">
<form action="" method="POST">
<input type="hidden" id="input_flag" value="">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">noID</span>
</div>
<input type="text" id="notiSeq_1" name="notiSeq_1" class="form-control" value="" style="background-color:#FFFFFF">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-sort-numeric-asc"></i>
</span>
...
...
...
<button type="button" class="btn btn-primary" onclick ="save()">Click me</button>
</div> //end of col-sm-6
I want to know if it's possible to use a button instead of href to trigger a div.
Here are examples below:
This is the current div:
<div id="ver" class="modal-block modal-block-primary mfp-hide">
<section class="panel">
<header class="panel-heading">
<h2 class="panel-title">Registration Form</h2>
</header>
<form class="form-horizontal mb-lg" method="POST" novalidate="novalidate">
<div class="panel-body">
<div class="form-group mt-lg">
<label class="col-sm-3 control-label">Name</label>
<div class="col-sm-9">
<input type="text" name="name" class="form-control" placeholder="Type your name..." required/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" name="email" class="form-control" placeholder="Type your email..." required/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">URL</label>
<div class="col-sm-9">
<input type="url" name="url" class="form-control" placeholder="Type an URL..." />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Comment</label>
<div class="col-sm-9">
<textarea rows="5" class="form-control" placeholder="Type your comment..." required></textarea>
</div>
</div>
</div>
<footer class="panel-footer">
<div class="row">
<div class="col-md-12 text-right">
<input type="submit" name="ola" value="Submit">
<button class="btn btn-default modal-dismiss">Cancel</button>
</div>
</div>
</footer>
</form>
</section>
This is how I can trigger it using href:
<a class="modal-with-form btn btn-default" href="#ver">Open Form</a>
This is how I tried:
<a class="modal-with-form btn btn-default" href="#ver?id=$ausenciaid">Open Form</a>
But it didn't work , there is a way to use a button instead of href?
you can try this
<input type="button" onclick="location.href='Your location';" value="Open Form" />
This will give you a button and when you click on it you will transfer/open your href
Less recommended inline way:
<button onclick="location.href='Your location';"> Open Form" </button>
OR
Attach Event & trigger using javascript:
<button type="button" id="mybutton" >Open Form </button>
<script>
document.getElementById("mybutton").addEventListener("click", function(){
window.location.href = <input type="button" onclick="location.href='Your location';
});
</script>
i have one file upload form field,here without select any file means i want to show error message,from this code it will be working fine after that i select anyone file means i want hide the error message ,i don't know how to do this???
$("#horoscope_form").submit(function(e) {
e.preventDefault();
var filename = document.forms["myForm"]["Filename"].value;
if (filename == null || filename == "") {
$("#fileselect_error").show();
return false;
} else {
var filename = document.getElementById("myFile").value;
alert(filename);
$("#fileselect_error").hide();
return false;
}
});
<form method="post" enctype="multipart/form-data" class="form-horizontal" style="margin-top: 20px;" id="horoscope_form" name="myForm">
<div class="form-group">
<label class="control-label col-xs-3">File Upload</label>
<div class="col-md-9">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input">
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-default btn-file" id="fileinput">
<span class="fileupload-exists">Change</span>
<span class="fileupload-new">Select file</span>
<input type="file" id="myFile" name="Filename">
</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-xs-5">
<span id="fileselect_error"><strong >Error!</strong> Please select your file.</span>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-md-12">
<button class="btn btn-primary" value="register" type="submit">Upload The Horoscope</button>
</div>
</div>
</form>
Changes Made
$("input:file").change(function (){
console.log($(this).val().trim())// You will get the input value.
if($(this).val().trim().length){
$("#fileselect_error").hide();
}
else{
$("#fileselect_error").show();
}
});
Working Example
$(document).ready(function() {
//$("#fileselect_error").hide();
$("input:file").change(function() {
console.log($(this).val().trim())
if ($(this).val().trim().length) {
$("#fileselect_error").hide();
} else {
$("#fileselect_error").show();
}
});
$("#horoscope_form").submit(function(e) {
e.preventDefault();
var filename = document.forms["myForm"]["Filename"].value;
if (filename == null || filename == "") {
$("#fileselect_error").show();
return false;
} else {
var filename = document.getElementById("myFile").value;
alert(filename);
$("#fileselect_error").hide();
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" enctype="multipart/form-data" class="form-horizontal" style="margin-top: 20px;" id="horoscope_form" name="myForm">
<div class="form-group">
<label class="control-label col-xs-3">File Upload</label>
<div class="col-md-9">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input">
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-default btn-file" id="fileinput">
<span class="fileupload-exists">Change</span>
<span class="fileupload-new">Select file</span>
<input type="file" id="myFile" name="Filename">
</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-xs-5">
<span id="fileselect_error"><strong >Error!</strong> Please select your file.</span>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-md-12">
<button class="btn btn-primary" value="register" type="submit">Upload The Horoscope</button>
</div>
</div>
</form>
Have a change event handler for the file input control and set the display property of the error message there
$("#horoscope_form").submit(function(e) {
e.preventDefault();
var valid = !!$('#myFile').val();
$("#fileselect_error").toggle(!valid);
return valid;
});
$('#myFile').change(function() {
$("#fileselect_error").toggle(!this.value);
})
#fileselect_error {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" enctype="multipart/form-data" class="form-horizontal" style="margin-top: 20px;" id="horoscope_form" name="myForm">
<div class="form-group">
<label class="control-label col-xs-3">File Upload</label>
<div class="col-md-9">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input">
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-default btn-file" id="fileinput">
<span class="fileupload-exists">Change</span>
<span class="fileupload-new">Select file</span>
<input type="file" id="myFile" name="Filename">
</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-xs-5">
<span id="fileselect_error"><strong >Error!</strong> Please select your file.</span>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-md-12">
<button class="btn btn-primary" value="register" type="submit">Upload The Horoscope</button>
</div>
</div>
</form>
Add a class of hide, and the remove it like this:
jsfiddle
.hide {
display: none
}
I have the following form:
<form method="post" role="form" name="newCategoryForm" ng-submit="submitForm()" enctype="multipart/form-data" novalidate>
<div class="row">
<div class="row">
<div class="col s12">
<div input-field>
<input type="text" name="cat-name" id="cat-name"
ng-model="category.catname" required>
<label>Nombre</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div input-field>
<textarea class="materialize-textarea" name="cat-description" id="cat-description" length="144"
ng-model="category.catdescription" ng-maxlength="144" required></textarea>
<label>Descripción</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<h6>Imagen de Fondo</h6>
<div class="file-field input-field">
<div class="btn pink darken-2 waves-effect waves-light">
<span>Archivo</span>
<input type="file" name="cat-bgimg" id="cat-bgimg"
file-model="variable" ng-model="category.catimg">
</div>
<div class="file-path-wrapper">
<input class="file-path" type="text" readonly>
</div>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-large pink darken-2 waves-effect waves-light center-button" ng-disabled="newCategoryForm.$invalid">Crear Categoría</button>
</form>
And in my controller I have this:
angular.module('sccateringApp')
.controller('newCategoryController', function (httpcalls, $scope) {
var request = httpcalls;
$scope.submitForm = function(){
$scope.catinfo = $scope.category;
console.log($scope.catinfo);
console.log(this.category);
console.log(newCategoryForm.category);
}
});
As you can see, the controller logs undefined for all three ways I'm trying to print out the contents of the form:
I'm very new to Angular and I'm very inexperienced. I'm using the documentation as a reference: https://docs.angularjs.org/api/ng/directive/ngSubmit
Any idea what I might be doing wrong?