I'm making a form for a task in class and nobody can figure out why the input validation isn't working. The code for the whole form is below. It's specifically the required tag that seems to be causing problems.
<form action = "">
<p>First Name</p>
<input type = "text" name = "firstname" size = "25" maxlength = "20"></input> <br>
<p>Last Name</p>
<input type = "text" name = "lastname" size = "25" maxlength = "20"></input> <br>
<p>Age</p>
<input type = "radio" name = "age" value = "<25" checked></input><25
<input type = "radio" name = "age" value = "25-40" ></input>25-40
<input type = "radio" name = "age" value = ">40" ></input>>40
<input type = "radio" name = "age" value = "Rather not say" ></input>Rather not say <br>
<div style = "float:left">
<p>Favourite food</p>
<select name = "Favourite food" style = "float:left;">
<option value = "1" selected>Italian</option>
<option value = "2">Indian</option>
<option value = "3">Thai</option>
<option value = "4">Chinese</option>
</select>
</div>
<br>
<div style = "float:right">
<p>What new country would you like to see on the website?</p>
<select name = "newCountry">
<option value = "1" selected>Vietnamese</option>
<option value = "2">American</option>
<option value = "3">French</option>
<option value = "4">Spanish</option>
</select>
</div>
<br>
<p style = "clear:both; float:left;">What new cooking technique would you like to see on the website?</p>
<textarea name = "NewTechnique" rows = "5" cols = "100" maxlength = "500" style = "clear:both;"> </textarea>
<br>
<p>Please rate the following from 1 (poor) to 5 (excellent)</p>
<p>Ease of use</p>
<input type = "text" name = "easeofuse" size = "25" min = "1" max = "5" required=""></input> <br>
<p>Quality of information</p>
<input type = "text" name = "infoquality" size = "25" min = "1" max = "5" required></input> <br>
<p>Taste of recipies</p>
<input type = "text" name = "tastes" size = "25" min = "1" max = "5" required = ""></input> <br>
<p>Permission for my information to be held and used for future developments</p>
<input type ="radio" name = "permission" value = "1" required></input>Yes
<input type ="radio" name = "permission" value = "2"></input>No
<input type = "submit" onclick="alert('form entered')" value = "submit"></input>
</form>
I can't see what the problem is. Is it because the action tag is empty? We've been told to leave it like that.
Edit:Problem has been solved!
To get the form required fields to work, I've replaced the onclick with onsubmit inside the form tag. I've also cleaned up whatever HTML oddities I found after a quick skim (I've probably missed a few).
<form onsubmit='alert("ya done clicked")'>
<p>First Name</p>
<input type="text" name="firstname" size="25" maxlength="20"> <br>
<p>Last Name</p>
<input type="text" name="lastname" size="25" maxlength="20"> <br>
<p>Age</p>
<input type="radio" name="age" value="<25" checked><25
<input type="radio" name="age" value="25-40">25-40
<input type="radio" name="age" value=">40">>40
<input type="radio" name="age" value="Rather not say">Rather not say <br>
<div style="float:left">
<p>Favourite food</p>
<select name="Favourite food" style="float:left;">
<option value="1" selected>Italian</option>
<option value="2">Indian</option>
<option value="3">Thai</option>
<option value="4">Chinese</option>
</select>
</div>
<br>
<div style="float:right">
<p>What new country would you like to see on the website?</p>
<select name="newCountry">
<option value="1" selected>Vietnamese</option>
<option value="2">American</option>
<option value="3">French</option>
<option value="4">Spanish</option>
</select>
</div>
<br>
<p style="clear:both; float:left;">What new cooking technique would you like to see on the website?</p>
<textarea name="NewTechnique" rows="5" cols="100" maxlength="500" style="clear:both;"> </textarea>
<br>
<p>Please rate the following from 1 (poor) to 5 (excellent)</p>
<p>Ease of use</p>
<input type="text" name="easeofuse" size="25" min="1" max="5" required> <br>
<p>Quality of information</p>
<input type="text" name="infoquality" size="25" min="1" max="5" required> <br>
<p>Taste of recipies</p>
<input type="text" name="tastes" size="25" min="1" max="5" required> <br>
<p>Permission for my information to be held and used for future developments</p>
<input type="radio" name="permission" value="1" required>Yes
<input type="radio" name="permission" value="2">No
<input type="submit" value="submit">
</form>
Related
Consider this form:
<form>
<input type="text" value="" placeholder="Enter no. of employee" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" required/>
<input type="text" value="" placeholder="Enter Salary" required/>
<input type="submit"/>
</form>
I want a regular expression validation for Enter salary text feild with following:
The salary should be separated by commas like this format 1,00,000
It should not take any other input except numbers like in the case
of "Enter no. of employee" field
You can try this:
The salary should be separated by commas like this format 1,00,000
It should not take any other input except numbers like in the case of
"Enter no. of employee" field.
<form>
<input type="text" value="" placeholder="Enter no. of employee" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" required/>
<input type="text" value="" onkeyup="this.value = this.value.replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');" placeholder="Enter Salary" required/>
<input type="submit" />
</form>
Here is the solution for my problem:
Indian currency:
onkeyup="this.value = this.value.replace(/\D/g, '').replace(/\B(?=(?:(\d\d)+(\d)(?!\d))+(?!\d))/g, ',');"
US Currency:
onkeyup="this.value = this.value.replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');"
Working solution:
<form>
<input type="text" value="" placeholder="Enter no. of employee" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" required/>
<input type="text" value="" placeholder="Enter Salary" onkeyup="this.value = this.value.replace(/\D/g, '').replace(/\B(?=(?:(\d\d)+(\d)(?!\d))+(?!\d))/g, ',');" placeholder="Enter Salary" required/>
<input type="submit"/>
</form>
I have a form that looks like this.
What I want to do is, I want to make sure that Minimum Age < Maximum Age
and Minimum Skill Level < Maximum Skill Level
What is a way to put constraints on the inputs?
HTML
{% extends "template.html" %}
{% set active_page = "events" %}
{% block content %}
<div class="jumbo">
<h2>EVENTS PAGE</h2>
<br/>
<p>Click here to go to the welcome page</p>
</div>
<form action = "/events_success" method=post>
Event Name:<br>
<input type="text" name="eventname" required="">
<br>
Sports:<br>
<select name="sports">
{% for item in sports_data %}
<option value="{{ item[0] }}">{{ item[0] }}</option>
{% endfor %}
</select>
<br>
Location:<br>
<select name="location">
{% for item in loc_data %}
<option value="{{ item[0] }}">{{ item[0] }}</option>
{% endfor %}
</select>
<br>
Time:<br>
<input type="datetime-local" name="time" required>
<br>
Number of Players:<br>
<input type="text" name="numplayers" required>
<br>
Minimum Age:<br>
<input type="text" name="minage" required>
<br>
Maximum Age:<br>
<input type="text" name="maxage" required>
<br>
Minimum Skill Level:<br>
<input type = "radio" name = "minskill" value = "1" required> 1
<input type = "radio" name = "minskill" value = "2"> 2
<input type = "radio" name = "minskill" value = "3"> 3
<input type = "radio" name = "minskill" value = "4"> 4
<input type = "radio" name = "minskill" value = "5"> 5
<br>
Maximum Skill Level:<br>
<input type = "radio" name = "maxskill" value = "1" required> 1
<input type = "radio" name = "maxskill" value = "2"> 2
<input type = "radio" name = "maxskill" value = "3"> 3
<input type = "radio" name = "maxskill" value = "4"> 4
<input type = "radio" name = "maxskill" value = "5"> 5
<br>
<br>
Creator: {{ session['username'] }}<br>
<input type="submit" value="Send">
</form>
{% endblock %}
You can just try some javaScript to prevent the form submission if those fields fails to fulfill that condition. Please check my demo.
**Note: It's just a demo. That's why didn't put any authentication.
window.onload = function() {
let submit = document.querySelector("#submit");
function validateAge(minAge, maxAge) {
let min = parseInt(minAge, 10);
let max = parseInt(maxAge, 10);
return min >= max ? false : true;
}
function validateSkill(minSkill, maxSkill) {
let min = parseInt(minSkill, 10);
let max = parseInt(maxSkill, 10);
return min >= max ? false : true;
}
submit.onclick = function() {
let minAge = document.querySelector("#minage").value;
let maxAge = document.querySelector("#maxage").value;
let radios = document.querySelectorAll('input[type="radio"]:checked');
let minSkill = radios[0].value;
let maxSkill = radios[1].value;
if(validateAge(minAge, maxAge) && validateSkill(minSkill, maxSkill))
return true;
else {
alert("Invalid data");
return false;
}
}
}
<form id="myForm" action = "/events_success" method=post >
Minimum Age:<br>
<input type="text" name="minage" id="minage" required>
<br>
Maximum Age:<br>
<input type="text" name="maxage" id="maxage" required>
<br>
Minimum Skill Level:<br>
<input type = "radio" name = "minskill" value = "1" required> 1
<input type = "radio" name = "minskill" value = "2"> 2
<input type = "radio" name = "minskill" value = "3"> 3
<input type = "radio" name = "minskill" value = "4"> 4
<input type = "radio" name = "minskill" value = "5"> 5
<br>
Maximum Skill Level:<br>
<input type = "radio" name = "maxskill" value = "1" required> 1
<input type = "radio" name = "maxskill" value = "2"> 2
<input type = "radio" name = "maxskill" value = "3"> 3
<input type = "radio" name = "maxskill" value = "4"> 4
<input type = "radio" name = "maxskill" value = "5"> 5
<br>
<br>
<input type="submit" value="Send" id="submit">
</form>
You can use some common PHP validation techniques. These are more beneficial as less risky to injection and other exploits.
PHP:
if (empty($_POST["code"])) {
$errcode = "Verify that you're human";
} else {
$code = test_input($_POST["code"]);
if (!$_POST['code'] < $string) {
$errcode = "Make code greater than string";
}
}
HTML:
<p><label for="code">Scrambled code: </label><input type="text" name="code" id="code" /><span class="error"> * <?php echo $errcode;?></span></p>
I would like to produce something similar to the checkin and checkout for a hotel reservation system. So far, I'm allowing the user to enter the booking date (which is the check in). However, I would like to implement an unedited input with the value of checkin plus number of nights.
So, after the user has selected the booking date and the number of nights, it would add them together and display the checkout date on the side (but the user can't change it). After the duration has finished, the user can book the same hotel again, without telling the user that they have already booked that hotel.
<body>
<form action="" method="POST">
<fieldset>
<legend>Personal Details: </legend>
<label for="phone">Phone:</label><input type="tel" name="phone" id="phone" required placeholder="Please enter in your phone number" pattern="[0-9]{4}[0-9]{3}[0-9]{3}" title="Please enter in a phone number in this format:#### ### ###">
<select name="country" required >
<option value=""></option>
<option value="US">US</option>
<option value="UK">UK</option>
<option value="AUS">AUS</option>
</select>
</fieldset>
<br>
<fieldset>
<legend>Booking Details: </legend>
<label for="date">Booking date: </label><input id="date" type="date" name="date" min="2017-01-04">
<label for="numberOfRooms">Number of Rooms:</label><input id="NumberOfRooms" type="number" name="numberOfRooms" min="1" max="4">
<label for="numberOfNights">Number of Nights:</label><input id="NumberOfNights" type="number" name="numberOfNights" min="1" max="60">
<p>Do you require breakfast?</p>
<label for="yesBreakfast">Yes:</label><input id="yesBreakfast" type="radio" name="meals" value="yesBreakfast">
<label for="noBreakfast">No:</label><input id="noBreakfast" type="radio" name="meals" value="noBreakfast">
<br>
<!--<label for="balcony">Do you require a balcony?</label><input id="balcony" type="checkbox" name="balcony" value="yes" checked>-->
<br>
<button name="submit" type="submit">Submit</button>
</fieldset>
</form>
</body>
</html>
database tables for the book and the hotel
Book table:
id(int 11)
username(varchar 30)
hotel_id(int11)
phone(varchar 50)
date(datetime)
num_rooms(int 60)
num_nights(int 4)
Table for hotel
id(int 11)
Hotel_name(text)
Hotel_location(text)
Hotel_price(int 11)
image(varchar 500)
description(text)
I suggest you use momentjs to handle date related stuff.
I added change event on both date and NumberOfNights to call updateCheckout(), in that function will handle the checkout date
hope it helps
$(document).ready(function() {
$('#date, #NumberOfNights').on("change", updateCheckout);
$('#price, #NumberOfNights, #NumberOfRooms').on("change", updateTotalPrice);
function updateCheckout() {
var bookingDate = $('#date').val();
var numOfNights = $('#NumberOfNights').val();
if (bookingDate != '' && numOfNights != '') {
var new_date = moment(bookingDate, "YYYY-MM-DD").add(numOfNights, 'days').format("YYYY-MM-DD");
$('#checkout_date').text(new_date);
} else {
$('#checkout_date').text('N/A');
}
}
function updateTotalPrice() {
var price = $('#price').val();
var numOfNights = $('#NumberOfNights').val();
var NumberOfRooms = $('#NumberOfRooms').val();
if (price != '' && numOfNights != '' && NumberOfRooms != '') {
var total_price = +price * +numOfNights * +NumberOfRooms;
$('#total_price').text('$' + total_price);
} else {
$('#total_price').text('N/A');
}
}
});
#checkout_date,
#total_price {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<form action="" method="POST">
<fieldset>
<legend>Personal Details: </legend>
<label for="phone">Phone:</label>
<input type="tel" name="phone" id="phone" required placeholder="Please enter in your phone number" pattern="[0-9]{4}[0-9]{3}[0-9]{3}" title="Please enter in a phone number in this format:#### ### ###">
<select name="country" required>
<option value=""></option>
<option value="US">US</option>
<option value="UK">UK</option>
<option value="AUS">AUS</option>
</select>
</fieldset>
<br>
<fieldset>
<legend>Booking Details: </legend>
<label for="date">Booking date: </label>
<input id="date" type="date" name="date" min="2017-01-04">
<label for="numberOfRooms">Number of Rooms:</label>
<input id="NumberOfRooms" type="number" name="numberOfRooms" min="1" max="4">
<label for="numberOfNights">Number of Nights:</label>
<input id="NumberOfNights" type="number" name="numberOfNights" min="1" max="60">
<label for="price">Single Room Price: </label>
<input id="price" type="number" min="0">
<br>
<br>
<label>Checkout Date:</label>
<span id="checkout_date"> N/A</span>
<p>Do you require breakfast?</p>
<label for="yesBreakfast">Yes:</label>
<input id="yesBreakfast" type="radio" name="meals" value="yesBreakfast">
<label for="noBreakfast">No:</label>
<input id="noBreakfast" type="radio" name="meals" value="noBreakfast">
<br>
<!--<label for="balcony">Do you require a balcony?</label><input id="balcony" type="checkbox" name="balcony" value="yes" checked>-->
<br>
<label>Total Price:</label>
<span id="total_price"> N/A</span>
<br><br>
<button name="submit" type="submit">Submit</button>
</fieldset>
</form>
</body>
</html>
i have a bootstrap site and have 4 different forms. I set the required attribute against certain fields. On my local machine, the validation works if the fields are left blank but when I post it to a web host, the validation does not work.
The field types range from free text input to check boxes, select boxes and radio buttons.
I am writing this from my mobile so don't have a snippet of code to show. Sorry all. Suggestions are more than welcome.
<fieldset>
<b><u><h4>Trip Type</h4></u></b>
<div class = "form-group">
<label for="where">Will you be:</label>
<select class="form-control" id="where" name = "where" required>
<option></option>
<option value = "travelling to">Travelling to the Airport</option>
<option value = "travelling from">Travelling from the Airport</option>
</select>
</div>
<div class = "row">
<div class = "col-lg-6 col-md-6">
<div class = "form-group">
<label for = "airporttype">From / to which airport:</label>
<div class = "radio">
<label class="radio-inline"><input type="radio" name="airporttype" id = "airporttype" value = "International" required>International</label>
<label class="radio-inline"><input type="radio" name="airporttype" id = "airporttype" value = "Domestic">Domestic</label>
</div>
</div>
</div>
<div class = "col-lg-6 col-md-6">
<div class="control-group form-group">
<label for = "trip">Is this a Single or Return Trip:</label>
<div class = "radio">
<label class="radio-inline"><input type = "radio" name = "trip" id = "trip" class = "return" value = "Single" required>Single</label>
<label class="radio-inline"><input type = "radio" name = "trip" id = "trip" class = "return" value = "Return">Return Trip</label>
</div>
</div>
</div>
</div>
<hr>
<b><u><h4>Your Details</h4></u></b>
<div class="control-group form-group">
<div class="controls">
<label for = "fname">First Name:</label>
<input type = "text" class = "form-control" id = "fname" name = "fname" required placeholder = "Enter First Name" data-validation-required-message="Please enter your first name.">
<p class="help-block"></p>
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label for = "surname">Last Name:</label>
<input type="text" class="form-control" id="surname" name = "surname" required placeholder = "Enter Last Name" data-validation-required-message="Please enter your last name.">
<p class="help-block"></p>
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label for = "cell1">Contact Mobile / Cell:</label>
<input type="text" class="form-control" id="cell1" name = "cell1" required placeholder = "Enter Mobile / Cell Number Main" data-validation-required-message="Please enter your main contact number.">
<p class="help-block"></p>
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label for = "cell2">Contact Mobile / Cell 2:</label>
<input type="text" class="form-control" id="cell2" name = "cell2" placeholder = "Enter Mobile / Cell Number Alt" data-validation-required-message="Please enter your alternate contact number.">
<p class="help-block"></p>
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label for = "email">Enter your email address:</label>
<input type = "email" class = "form-control" id = "email" name = "email" required placeholder = "you#yourdomain.com" data-validation-required-message="Please enter your email address.">
<p class="help-block"></p>
</div>
</div>
<br>
<div class="control-group form-group">
<div class="controls">
<label for = "date16">Travel Date:</label>
<input type = "text" class="form-control datepicker" id = "date16" name = "date16" required data-validation-required-message="Please enter your travel date." style = "text-align: center">
<p class="help-block"></p>
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label for="address">Pick Up / Destination Address:</label>
<input type = "text" class = "form-control" id = "address" name = "address" placeholder = "The start or end of your journey" required data-validation-required-message = "Please enter the address where you will start or finish your journey.">
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label for = "passnum">Number of Passengers:</label>
<select class="form-control" id = "passnum" name = "passnum" required>
<option></option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
<option value = "4">4</option>
<option value = "5">5</option>
<option value = "6">6</option>
<option value = "7">7</option>
<option value = "8">8</option>
<option value = "9">9</option>
<option value = "10">10</option>
<option value = "11">11</option>
<option value = "12">12</option>
<option value = "13">13</option>
<option value = "14">14</option>
<option value = "15">15</option>
<option value = "16">16</option>
<option value = "17">17</option>
<option value = "18">18</option>
<option value = "19">19</option>
<option value = "20">20</option>
<option value = "21">21</option>
<option value = "22">22</option>
<option value = "23">23</option>
<option value = "24">24</option>
</select>
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label for = "flightnum">Flight Number:</label>
<input type = "text" class="form-control" id = "flightnum" name = "flightnum" placeholder = "Please enter your flight number" required data-validation-required-message = "Please enter your flight number.">
<p class="help-block"></p>
</div>
</div>
<hr>
<b><u><h4>Child Seats</h4></u></b>
<div class = "row">
<div class = "col-lg-4">
<div class="control-group form-group">
<label for = "babyseat">Baby Seat Required:</label>
<div class = "radio">
<label class="radio-inline"><input type = "radio" name = "babyseat" id = "babyseat" class = "bseat12" value = "Yes" required>Yes</label>
<label class="radio-inline"><input type = "radio" name = "babyseat" id = "babyseat" class = "bseat12" value = "No">No</label>
</div>
</div>
<div class="control-group form-group" id = "babyseat1">
<div class="controls">
<label for = "bseatnum">Number of Baby Seats:</label>
<select class="form-control" id = "bseatnum" name = "bseatnum">
<option></option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
<option value = "4">4</option>
<option value = "5">5</option>
</select>
</div>
</div>
</div>
<div class = "col-lg-4">
<div class="control-group form-group">
<label for = "boost">Booster Seat Required:</label>
<div class = "radio">
<label class="radio-inline"><input type = "radio" name = "boost" id = "boost" class = "boost12" value = "Yes" required>Yes</label>
<label class="radio-inline"><input type = "radio" name = "boost" id = "boost" class = "boost12" value = "No">No</label>
</div>
</div>
<div class="control-group form-group" id = "boost1" >
<div class="controls">
<label for = "boostnum">Number of Booster Seats:</label>
<select class="form-control" id = "boostnum" name = "boostnum">
<option></option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
<option value = "4">4</option>
<option value = "5">5</option>
</select>
</div>
</div>
</div>
<div class = "col-lg-4">
<div class="control-group form-group">
<label for = "cradle">Baby Cradle Required</label>
<div class = "radio">
<label class="radio-inline"><input type = "radio" name = "cradle" id = "cradle" class = "cradle12" value = "Yes" required>Yes</label>
<label class="radio-inline"><input type = "radio" name = "cradle" id = "cradle" class = "cradle12" value = "No">No</label>
</div>
</div>
<div class="control-group form-group" id = "cradle1">
<div class="controls">
<label for = "cradlenum">Number of cradles:</label>
<select class="form-control" id = "cradlenum" name = "cradlenum">
<option></option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
<option value = "4">4</option>
<option value = "5">5</option>
</select>
</div>
</div>
</div>
</div>
<hr>
<b><u><h4>Additional Services</h4></u></b>
<div class = "row">
<div class = "col-lg-6">
<div class="control-group form-group">
<label for = "shuttle">Shuttle Service:</label>
<div class="radio">
<label for = "shuttle" class="radio-inline"><input id = "shuttle" name = "shuttle" type="radio" value = "Yes" required>Yes</label>
<label for = "shuttle" class="radio-inline"><input id = "shuttle" name = "shuttle" type="radio" value = "No">No</label>
<p class="help-block"></p>
</div>
</div>
</div>
<div class = "col-lg-6">
<div class="control-group form-group">
<label for "charter">Private Charter:</label>
<div class="radio">
<label class="radio-inline"><input type="radio" name="charter" id = "charter" value = "Yes" required>Yes</label>
<label class="radio-inline"><input type="radio" name="charter" id = "charter" value = "No">No</label>
<p class="help-block"></p>
</div>
</div>
</div>
</div>
<hr>
</fieldset>
validation only using required attribute is not good, because it may not work in many cases. for example when using javascript submit() method, also in some browsers,required wont work. So Best way is to validate using javascript(client side)
So create a javascript function and call it during form onsubmit event
function checkform(form) {
var inputs = form.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
if(inputs[i].hasAttribute("required")){
if(inputs[i].value == ""){
alert("Please fill all required fields");
return false;
}
}
}
return true;
}
I want to clear my input values in html form when you press submit.
the function is in the controller.
i tried to do: $scope.name = "" or null (for every input) but its don't work.
This is the html file:
<label for="messageName">Message Name:</label>
<input type="text" ng-model="message.name" name="message.name" required/>
<label for="text">Text:</label>
<input type="textarea" ng-model="message.text" name="message.text" required/>
<label for="images">Images:</label>
<input type="text" ng-model="message.images" name="message.images" required/>
<label for="template">Template:</label>
<input list="template" ng-model="message.template" name="message.template" required/>
<datalist id="template">
<option value="template1">
<option value="template2">
<option value="template3">
</datalist>
<label for="millisecToShow">Millisec To Show:</label>
<input type="number" min="1000" max="10000" ng-model="message.millisecToShow" name="message.millisecToShow" required/>
<label for="timeFrame">Time Frame:</label>
<label for="TimeStart">Start Time:</label>
<input type="datetime-local" ng-model="message.startDateTime" name="message.startDateTime" required/>
<label for="DateStart">End Time:</label>
<input type="datetime-local" ng-model="message.endDateTime" name="message.endDateTime" required/>
<label for="days">Days:</label><br>
<form>
<input type="checkbox" ng-model="message.sunday" name="message.days" value="Sunday">Sunday<br>
<input type="checkbox" ng-model="message.monday" name="message.days" value="Monday">Monday<br>
<input type="checkbox" ng-model="message.tuesday" name="message.days" value="Tuesday">Tuesday<br>
<input type="checkbox" ng-model="message.wednesday" name="message.days" value="Wednesday">Wednesday<br>
<input type="checkbox" ng-model="message.thursday" name="message.days" value="Thursday">Thursday<br>
<input type="checkbox" ng-model="message.friday" name="message.days" value="Friday">Friday<br>
<input type="checkbox" ng-model="message.saturday" name="message.days" value="Saturday">Saturday<br>
</form>
<label for="screenId">Screen ID:</label>
<input list="screenId" ng-model="message.screenId" name="message.screenId" required/>
<datalist id="screenId">
<option value="screen1">
<option value="screen2">
<option value="screen3">
</datalist>
<button ng-click="createButton()">Create</button>
And this is the controller:
angular.module('CreateCtrl', []).controller('CreateController', function($scope, superService) {
$scope.createButton = function() {
superService.insert($scope.message).then(function (result)
if (result == "true") {
alert('Create successful');
$scope.tagline = 'Create successful';
return result.data;
}
else {
$scope.tagline = 'Cannot create message';
}
});
};
});
I want to remove the input after sending the file.
thanks (:
Considering that all of the fields refer to $scope.message.*, wouldn't it be easier to just clean up the whole message object like this?
if (result === "true") {
alert('Create successful');
$scope.tagline = 'Create successful';
// cleaning up
$scope.message = {
name: null,
text: null,
images: null,
template: null
};
return result.data;
}
In fact, if you want to wipe the whole object clean, if it were me I would just go for $scope.message = {}; and be done with it.