The Project: https://github.com/marcosnunes/storeData
I need to publish into {div id="result"}{/div} the data from the form and then store to local cached directory. Would anyone help me to write this code? What I am trying to do is make a local site for to be loaded into an Android Hibrid App.
The form:
<body>
<div class="w3-container">
<div class="w3-card-4" style="width:100%">
<header class="w3-container w3-light-grey">
<h2><Div id="nameBox"></Div></h2>
</header>
<div class="w3-container">
<h2><div id="result"></div></h2>
</div>
</div>
</div>
<div class="w3-container">
<div class="row">
<div class="col-md-8">
<h3>Adicionar um Envelope e Saldo</h3>
<form name="contact-form"
method="post" id="contact-form">
<div class="form-group">
<label for="inputName">Envelope</label>
<input type="text"
class="form-control" id="cardName" name="cardName" placeholder="Envelope"
required>
</div>
<div class="form-group">
<label for="inputValue">Valor</label>
<input type="number" class="form-control" id="Value" name="Value"
placeholder="Valor" required>
</div>
<div class="form-group">
<label for="inputDescription">Descrição</label>
<input type="text" class="form-control" id="Description"
name="Description"
placeholder="Descrição" required>
</div>
<button onclick="store()" class="btn btn-primary" name="submit"
value="Submit"
id="submit_form">Adicionar</button>
</form>
</div>
</div>
</div>
</body>
</html>
I need too create new div on the button onclick()
The java code
<script>
function store(){
if (typeof(Storage) !== "undefined") {
var inputName = document.getElementById("cardName");
sessionStorage.setItem("cardName", inputName.value);
var inputValue = document.getElementById("Value");
sessionStorage.setItem("Value", inputValue.value);
var inputDescription = document.getElementById("Description");
sessionStorage.setItem("Description", inputDescription.value);
document.getElementById("result1").innerHTML = sessionStorage.getItem("cardName");
document.getElementById("result2").innerHTML = sessionStorage.getItem("Value");
document.getElementById("result3").innerHTML = sessionStorage.getItem("Description");
} else {
document.getElementById("result").innerHTML = "Ops! Alguma coisa deu errado...";
}
}
I got it !
Just inserted type="button" on button.
<button onclick="store()" **type="button"** class="btn btn-primary"
name="submit" value="Submit"
id="submit_form">Adicionar</button>
Related
Using a modal that inside the modal header I have a list of tabs, in the modal body I have the tab content and separated content with tab-pane, just like in the bootstrap 5. Below modal-body I have a modal footer with buttons, all separated with .
The form just validate if I insert the buttons inside the form, but with I capsulate de modal body and modal footer with tag form a problem occur, mostly in mobile.
Insert a dummy button inside the form for the validation part. Then use javascript for the actual events and all.
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation')
var form = forms[0];
function my_submit(ev) {
if (!form.checkValidity()) {
ev.preventDefault()
ev.stopPropagation()
} else {
form.submit()
}
form.classList.add('was-validated')
return false;
}
document.querySelector("#my-btn").addEventListener('click', my_submit)
form.addEventListener('submit', my_submit);
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<form class="row g-3 needs-validation" novalidate>
<div class="col-sm-4">
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-sm-4">
<label for="validationCustom02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-sm-4">
<label for="validationCustomUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">#</span>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button id="btn" class="btn btn-primary" type="submit" style="display:none">Submit form</button>
</div>
</form>
<button id="my-btn" class="btn btn-primary" type="submit">I am out of form submit</button>
So I want to validate if the email submitted is valid. Tried to make it work with bootstrap because I have to use it.
Here's the codepen:
https://codepen.io/yytimo/pen/ExWLbLd
<div class="col-md-4">
<div class="form-outline">
<input
type="text"
class="form-control"
id="validationCustomEmail"
value=""
required
/>
<label for="validationCustomEmail" class="form-label">E-Mail</label>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">Enter valid e-mail.</div>
</div>
</div>
Found a working solution with some javascript tricks. Try this
(() => {
'use strict';
const forms = document.querySelectorAll('.needs-validation');
Array.prototype.slice.call(forms).forEach((form) => {
form.addEventListener('submit', (event) => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
var email = document.getElementById('validationCustomEmail');
email.oninput = () => {
const re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(!re.test(email.value)){
email.setCustomValidity("Invalid field.");
email.classList.add('is-invalid');
} else {
email.classList.remove('is-invalid');
email.setCustomValidity("")
}
}
}
)();
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-4">
<div class="form-outline">
<input
type="text"
class="form-control"
id="validationCustom01"
value="Mark"
required
/>
<label for="validationCustom01" class="form-label">First name</label>
<div class="valid-feedback">Looks good!</div>
</div>
</div>
<div class="col-md-4">
<div class="form-outline">
<input
type="text"
class="form-control"
id="validationCustom02"
value="Otto"
required
/>
<label for="validationCustom02" class="form-label">Last name</label>
<div class="valid-feedback">Looks good!</div>
</div>
</div>
<div class="col-md-4">
<div class="form-outline">
<input
type="text"
class="form-control"
id="validationCustomEmail"
value=""
required
/>
<label for="validationCustomEmail" class="form-label">E-Mail</label>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">Enter valid e-mail.</div>
</div>
</div>
<div class="col-md-6">
<div class="form-outline">
<input type="text" class="form-control" id="validationCustom03" required />
<label for="validationCustom03" class="form-label">City</label>
<div class="invalid-feedback">Please provide a valid city.</div>
</div>
</div>
<div class="col-md-6">
<div class="form-outline">
<input type="text" class="form-control" id="validationCustom05" required />
<label for="validationCustom05" class="form-label">Zip</label>
<div class="invalid-feedback">Please provide a valid zip.</div>
</div>
</div>
<div class="col-12">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="invalidCheck"
required
/>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">You must agree before submitting.</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
Use input with type:email can help you.
I have a HTML form, which takes in input from the user. On clicking the submit button, form data needs to be sent to the views.py in a JSON format, through AJAX. I tried out something, but I am getting an error the JSON object must be str, not 'NoneType' . The JSON data is being loaded in the views.py through:
form = json.loads(request.POST.get('form'))
The data is returned in form of a dictionary called 'searchdata'.
The form:
<form method="POST" id="inputForm">
<div class="container" style="margin-bottom: 50px;width:100%">
<div class="container-fluid mt-3">
<div class="card" id="statform">
<div class="card-header">
<div class="card-title">
<div style="font-size: 25px">Filter</div>
</div>
</div>
<br>
<div class="card-body">
<div class="row">
<div class="col-xs-6">
<div class="col-xs-6">
<label name="start_date" class="control-label" style="width:35%">Start date</label>
<input type="date" id="start_date" style="color:black;width:100px" ></input>
</div>
</div>
<div class="col-xs-6">
<label name="end_date" class="control-label" style="width:35%">End Date(Default: Current Date)</label>
<input style="color:black;width:100px" id="end_date" type="date"></input>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-6">
<label name="fruit_name" class="control-label" style="width:35%; padding-left:15px">Select a Fruit</label>
<select class="js-example-placeholder-single1 js-example-basic-multiple form-control" id="fruit_name" placeholder="Select" style="width:210px" multiple="multiple">
</select>
</div>
<div class="col-xs-6">
<label name="vendor_test" class="control-label" style="width:35%">Select Vendor_TEST</label>
<select class="js-example-placeholder-single2 js-example-basic-multiple form-control" style="width:210px" id="vendor_test" multiple="multiple">
</select>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label name="release_version" class="control-label" style="width:35%; padding-left:15px">Select Release version</label>
<select class="js-example-placeholder-single3 js-example-basic-multiple form-control" style="width:210px" id="release_version" multiple="multiple">
</select>
</div>
<div class="col-xs-6">
<label class="control-label" style="width:35%">Error Message</label>
<input type="text" placeholder="Type message here" style="width:210px">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label class="control-label" style="width:35%; padding-left:15px">Error Message List</label>
<select class="js-example-placeholder-single4 js-example-basic-multiple form-control" style="width:210px" id = "error_message" multiple="multiple">
</select>
</div>
</div>
<div class="text-center">
<button class="btn btn-md btn-default" type="submit" name="search" value="search" onclick="loadResults()">
<i class="fa fa-arrow-circle-right"></i> Submit
</button>
<button class="btn btn-md btn-default" type="reset" name="searchreset" value="reset">
<i class="fa fa-arrow-circle-right"></i> Reset
</button>
</div>
</div>
</div> <!--form-->
</div> <!-- row -->
</div> <!--container main-->
</form>
The AJAX call I have written:
$.ajax({
url : window.location.href,
type : 'POST',
cache : false,
data:{form:JSON.stringify(formdata)},
success:function(res){
if(typeof res.searchdata != 'undefined'){
self.$dispatch('searchdataevent',res.searchdata);
}
if(typeof res.message != 'undefined'){
self.message = res.message;
}
self.loading = false;
},
error : function(err){
self.message = 'Error communicating with server';
self.loading = false;
}
});
Where am I going wrong? Any help is appreciated.
The second part is the html code and the first part is the angularjs part .
customer.controller("new_info",
function($scope, $routeParams,$http)
{
$scope.customer = {};
$scope.register = function () {
$http.post('localhost:4000/new_info', $scope.customer).then(
function (response) {
console.log("posted successfully"); //not showing anything in the console window
}
);
}
});
<div class="col-md-6">
<div class="panel-body">
<form name="AddCustomer" >
<div class="form-group">
<label>Id</label>
<input type="text" class="form-control" ng-model="customer.id" />
</div>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" ng-model="customer.name" />
</div>
<div class="form-group">
<label>City</label>
<input type="text" class="form-control" ng-model="customer.city" />
</div>
<button class="btn btn-default" ng-click="register()">Submit</button>
</form>
</div>
</div>
//after clicking the button its not showing anything .
i don´t know why my web page reload when i add new register, the diference between next code is the form tag. Whith the first code the page is reloaded and the second code without form tag page isn´t reloaded, I can´t understand why. Could someone help me?
<div class="container" ng-controller="mybranchofficeCtrl">
<h2>Mis Salas</h2>
<!--newRoom input-->
<form role="form">
<div class="row">
<div class="input-group">
<input type="text" class="form-control" ng-model="room.rooms.name" placeholder="Crea tu Sala">
<span class="input-group-btn">
<input type="submit" class="btn btn-primary" ng-click="newRoom()" value="Añadir">
</span>
</div>
</div>
</form>
<p></p>
<p class="input-group" ng-repeat="room in rooms.data">
<input class="form-control" type="text" ng-model="room.name">
<span class="input-group-btn">
<button class="btn btn-danger" ng-click="disableRoom($index)" arial-label="delete">X</button>
</span>
</p>
</div>
but with this no, what is the diference?
<div class="container" ng-controller="mybranchofficeCtrl">
<h2>Mis Salas</h2>
<!--newRoom input-->
<div class="row">
<div class="input-group">
<input type="text" class="form-control" ng-model="room.rooms.name" placeholder="Crea tu Sala">
<span class="input-group-btn">
<input type="submit" class="btn btn-primary" ng-click="newRoom()" value="Añadir">
</span>
</div>
</div>
<p></p>
<p class="input-group" ng-repeat="room in rooms.data">
<input class="form-control" type="text" ng-model="room.name">
<span class="input-group-btn">
<button class="btn btn-danger" ng-click="disableRoom($index)" arial-label="delete">X</button>
</span>
</p>
</div>
these are controllers i´m using whith html code.
$scope.newRoom = function() {
$scope.room.rooms.branchoffice_id = $scope.branchId;
butlerService.createRoom($scope.room).then(function(newroom) {
$scope.rooms.rooms.push(newroom);
});
}
$scope.disableRoom = function(index) {
var delroom = {};
delroom = {rooms:{id:$scope.rooms.data[index].id}}
butlerService.deleteRoom(delroom).then(function() {
$scope.rooms.data.splice(index,1);
});
}
Thanks in advance.