I have this JQuery Mobile Form, which sends the inputs to a MySQL Database. I would like to validate all fields as required. However, it does not work and I cannot find the error.
Here is the first part of the form. I put "required" on the input fields.
<form id="form-haftpflicht" method="post">
<div data-role="fieldcontain">
<fieldset data-role="fieldcontain">
<label for="versicherungsbeginn"><b>Versicherungsbeginn</b></label>
<input type="date" name="versicherungsbeginn" id="versicherungsbeginn" value="" required />
</fieldset>
<fieldset data-role="fieldcontain">
<label for="erwachsene" class="select"><b>Anzahl Erwachsene:</b></label>
<select name="erwachsene" id="erwachsene" data-role="none" required>
<option value="standard" data-placeholder="true">-- Bitte wählen --</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>
</select>
</fieldset>
<fieldset data-role="fieldcontain">
<label for="kinder" class="select"><b>Anzahl Kinder:</b></label>
<select name="kinder" id="kinder" data-role="none" required>
<option value="standard" data-placeholder="true">-- Bitte wählen --</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>
</select>
</fieldset>
</div>
And here is my script with the API
$(document).ready(function () {
$("#store-haftpflicht").click(function () {
$("#form-haftpflicht").submit();
});
$("#form-haftpflicht").submit(function (event) {
event.preventDefault();
$("#ajax-loader").css("display", "block");
$.ajax({
url: 'http://app.lovanet.ch/app/store_haftpflicht.php',
data: $(this).serialize(),
method: 'POST',
success: function (data, status) {
$("#ajax-loader").css("display", "none");
},
error: function () {
output.text('Keine Prämien gefunden.');
}
});
});
});
A select is considered empty (and then invalid if the field is required) if the selected option has an empty value (""), but yours have a value ("standard").
To fix the problem with validation, just replace the "standard" value in the first option for a "":
<select name="kinder" id="kinder" data-role="none" required>
<option value="" data-placeholder="true">-- Bitte wählen --</option>
<option value="1">1</option>
<option value="2">2</option>
Related
i have this problem:
I've created into my form a part of it where users can choose to insert from 0 to 10 row.
Each row contains 3 input.
Html code is:
<div class="form-row">
<div class="form-group col-md-3">
<label for="inputCity">Mesi a carico</label>
<select name="mesi_carico[]" id="inputState" class="form-control">
<option value="12">12</option>
<option value="11">11</option>
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="inputState">Min 3 anni?</label>
<select name="min_3_anni[]" id="inputState" class="form-control">
<option value="No">No</option>
<option value="Si">Si</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="inputZip">% Detr. Spettante</label>
<select name="perc_carico[]" id="inputState" class="form-control">
<option value="100">100%</option>
<option value="50">50%</option>
</select>
</div>
</div>
Here my JSCode
$(document).ready(function() {
var max_fields = 10;
var wrapper = $(".container1");
var add_button = $(".add_form_field");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append('<div><div class="form-row">
<div class="form-group col-md-3">
<label for="inputCity">Mesi a carico</label>
<select name="mesi_carico[]" id="inputState" class="form-control">
<option value="12">12</option>
<option value="11">11</option>
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="inputState">Min 3 anni?</label>
<select name="min_3_anni[]" id="inputState" class="form-control">
<option value="No">No</option>
<option value="Si">Si</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="inputZip">% Detr. Spettante</label>
<select id="inputState" class="form-control">
<option value="100">100%</option>
<option value="50">50%</option>
</select>
</div>
</div>Delete</div>'); //add input box
} else {
alert('You Reached the limits')
}
});
$(wrapper).on("click", ".delete", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
Unfortunately, it doesn't work.
Where is the issue?
And, I need to transfer the value array like array[0] array[1] array [2] ecc ecc... I'm not sure to do it.
Thanks for your help.
I have three dropdowns:
<form name="myForm" ng-submit="save(myForm.$valid)" novalidate="novalidate">
<div class="form-group">
<label>Values:</label>
<label>First</label>
<select ng-model="a.values[0]" ng-change="check()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<label>Second</label>
<select ng-model="a.values[1]" ng-change="check()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<label>Third</label>
<select ng-model="a.values[2]" ng-change="check()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3'>3</option>
<option value="4">4</option>
</select>
</div>
<button type="submit" class="btn btn-success">Save </button>
On these dropdowns I applied a filter:-
scope.check = function() {
if (_.uniq(scope.a.values).length !== scope.a.values.length) {
scope.notify("error", "Please set unique values");
}
};
What I want is if the values on dropdowns are not unique then on save button it shows error. Please note that these are not required fields so validation related to that is not required. Only if user set same values then only on save it shows error.
Im trying to create a form that when you submit the form,you stay on the same page and sends the user inputs to Process.php and to my database. The problem that I'm facing is that the page either refreshes or opens up the page Process.php
My Form
<form action="process.php" method="post" class="copy" id="formid" enctype="multipart/form-data">
Project name: <input type="text" name="name"> <br>
Video:
<input type="text" rows="1" cols="40" name="video">
<br>
Svar 1<input type="text" name="answer1"/>
<select name="point1">
<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>
</select>
<br>
Svar 2<input type="text" name="answer2"/>
<select name="point2">
<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>
</select>
<br>
Svar 3<input type="text" name="answer3"/>
<select name="point3">
<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>
</select>
<br>
Svar 4<input type="text" name="answer4"/>
<select name="point4">
<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>
</select>
<br>
<br>
<input type="submit" name="submit" value="create question" id="submit">
</form>
Process.php
<?php
// Exempel 1: Lägga till
if (isset($_POST['submit'])){
$localhost = "localhost";
$username = "root";
$password = "";
$connect = mysqli_connect($localhost, $username, $password)or
die("Kunde inte koppla");
mysqli_select_db($connect, 'wildfire');
$name=$_POST['name'];
$video=$_POST['video'];
$answer1=$_POST['answer1'];
$answer2=$_POST['answer2'];
$answer3=$_POST['answer3'];
$answer4=$_POST['answer4'];
$point1=$_POST['point1'];
$point2=$_POST['point2'];
$point3=$_POST['point3'];
$point4=$_POST['point4'];
$sql1= "INSERT INTO question (answer, point) VALUES ('$answer1', '$point1')";
$result=$connect->query($sql1);
$sql2= "INSERT INTO question (answer, point) VALUES ('$answer2', '$point2')";
$result=$connect->query($sql2);
$sql3= "INSERT INTO question (answer, point) VALUES ('$answer3', '$point3')";
$result=$connect->query($sql3);
$sql4= "INSERT INTO question (answer, point) VALUES ('$answer4', '$point4')";
$result=$connect->query($sql4);
print $sql1;
print $sql2;
print $sql3;
print $sql4;
}
?>
Javascript
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'process.php',
data: $('form').serialize(),
success: function () {
alert('form was submitted');
}
});
});
});
Maybe this will fix the issue (copied answer from this other SO question, with credits to #HarveyARamer):
My best guess is that you are adding your form submit listener
before the form is actually rendered. Try wrapping your jQuery in
$(document).ready(function () {});
probably you gave action to your form. If you provide action to your form it will open the page which you specified in your action. Try remove action attribute of form If you gave
try prevent default after your ajax success instead of before starting ajax
$(function () {
$('form').on('submit', function (e) {
$.ajax({
type: 'post',
url: 'process.php',
data: $('form').serialize(),
success: function () {
alert('form was submitted');
e.preventDefault();
}
});
});
});
Html
Use type as button instead of submit
<input type="button" name="submit" value="create question" id="submit">
Javascript
On Click function use this below function
$('#submit').click(function(e){
e.preventDefault();
$.ajax({
type: 'post',
url: 'process.php',
data: $('form').serialize(),
success: function () {
alert('form was submitted');
}
});
});
I have a very basic html document with two drop downs. When specific values in the drop down menus are selected I would like it to display a certain price in a text area below.
I have the drop downs setup, but I can't find a way to show specific prices for the drop down selections.
Any hints or tips would be greatly appreciated!
Here is my html.
<div class="form-group">
<label class="col-md-4 control-label" for="current">select</label>
<div class="col-md-5">
<select id="current" name="current" class="form-control">
<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>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="desired">select</label>
<div class="col-md-5">
<select id="desired" name="desired" class="form-control">
<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>
</select>
</div>
</div>
create text field with id is price
<script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#current").on('change',function(){
$("#price").val($(this).val());
// you can see values in console also
console.log("Price :"+$(this).val());
});
});
try this one
I'm currently developing a form that needs to sum the values of select fields (integer values) and the result should be displayed in another input field. The layout is that of a scoring sheet, with multiple row, showing partial totals and grand totals and the sum of scores has to be done in stages (or rows). So, all the scores of a single row will have a partial total for that row only.
The problem I have, not being very good at javascript, is that I found a script that is somehow working, but is adding the results of ALL rows into the partial total field of the first row (please see image below).
Link to image: http://postimg.org/image/77fxwl2db/
The right way for the form to work would be that the scores selected in the select fields in a single row will show a partial total in the light grey field of the same row, and that field only, while the dark grey (black) field will show the sum of the previous partial total PLUS the one of that row as well. (please see image below)
Link to image: http://postimg.org/image/ddolwjfft/
Hopefully that will make sense... As for the code, this is what I'm using:
<form method="post" action="#" >
<fieldset class="scores_row_1">
<select class="input1" onchange="OnChange(this.value)" name="score_1">
<option value=""></option>
<option value="X">X</option>
<option value="9">9</option>
<option value="7">7</option>
<option value="5">5</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="0">M</option>
</select>
<select class="input1" onchange="OnChange(this.value)" name="score_2">
<option value=""></option>
<option value="X">X</option>
<option value="9">9</option>
<option value="7">7</option>
<option value="5">5</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="0">M</option>
</select>
<select class="input1" onchange="OnChange(this.value)" name="score_3">
<option value=""></option>
<option value="X">X</option>
<option value="9">9</option>
<option value="7">7</option>
<option value="5">5</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="0">M</option>
</select>
<select class="input1" onchange="OnChange(this.value)" name="score_4">
<option value=""></option>
<option value="X">X</option>
<option value="9">9</option>
<option value="7">7</option>
<option value="5">5</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="0">M</option>
</select>
<select class="input1" onchange="OnChange(this.value)" name="score_5">
<option value=""></option>
<option value="X">X</option>
<option value="9">9</option>
<option value="7">7</option>
<option value="5">5</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="0">M</option>
</select>
<select class="input1" onchange="OnChange(this.value)" name="score_6">
<option value=""></option>
<option value="X">X</option>
<option value="9">9</option>
<option value="7">7</option>
<option value="5">5</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="0">M</option>
</select>
<span class="spacer"></span>
<input type="text" maxlength="2" class="input2" id="total_row_1" />
<input type="text" maxlength="2" class="input3" />
</fieldset>
</form>
The code above represents one single row, but several rows will be required. As for the javascript used, this is the code:
<script type="text/javascript" language="javascript">
var row = 1;
var sum = 0;
function OnChange(value) {
sum += new Number(value);
document.getElementById('total_row_'+ row).value = sum;
}
Please any help regarding this would be appreciated. I have looked for some options but I haven't been able to find anything that matches this specific situation!
I have developed a solution for you , extending your problem to that of two rows. Have made various changes in your original source which had many bugs. Have added comments which hopes makes the solution self explanatory.
The respective total of each column is shown next to the select fields, and the overall total of each row is shown in the input field below,
Javascript:-
function OnChange(node) {
var row=1;
var sum = 0;
if(node.parentNode.className=="scores_row_1"){row=1;} //Row selector
if(node.parentNode.className=="scores_row_2"){row=2;}
var value=node.value;
if(value=="X"){
value=10; //dont know what you intend to do with X value, for me i have set it as 10,make your changes in the if condition accordingly
}
if(value=="M"){
value=0; //for option M
}
//made changes to previous source, now added loop to loop through the select elements, note that you have to assign a default value to the select tags like M
for(var i=1;i<7;i++)
{ //sum is total of select elements, get each by their unique name attribute
sum+=parseInt(document.getElementsByName("score_"+row+"_"+i)[0].value);
}
document.getElementById('total_row_'+ row).value = sum; //assign sum to the input element
}
function OnChangeFinal() {
//function keeps calling on mousemove and sums total of both rows input fields and assignto the final input field. You can change the event type i just used this for demo
document.getElementById('final_row').value= parseInt(document.getElementById('total_row_1').value) + parseInt(document.getElementById('total_row_2').value);
}
HTML:-
<form method="post" action="#" onmousemove="OnChangeFinal()"> <!--assigned event to the form to call OnChangeFinal()-->
<fieldset class="scores_row_1">
<select class="input1" onchange="OnChange(this)" name="score_1_1">//assign names as score_rowNumber_scoreNumber to uniquely identify each element.
<option value=""></option>
<option value="X">X</option>
<option value="9">9</option>
<option value="7">7</option>
<option value="5">5</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="0" selected="selected">M</option>
</select>
<select class="input1" onchange="OnChange(this)" name="score_1_2">
<option value=""></option>
<option value="X">X</option>
<option value="9">9</option>
<option value="7">7</option>
<option value="5">5</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="0" selected="selected">M</option>
</select>
<select class="input1" onchange="OnChange(this)" name="score_1_3">
<option value=""></option>
<option value="X">X</option>
<option value="9">9</option>
<option value="7">7</option>
<option value="5">5</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="0" selected="selected">M</option>
</select>
<select class="input1" onchange="OnChange(this)" name="score_1_4">
<option value=""></option>
<option value="X">X</option>
<option value="9">9</option>
<option value="7">7</option>
<option value="5">5</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="0" selected="selected">M</option>
</select>
<select class="input1" onchange="OnChange(this)" name="score_1_5">
<option value=""></option>
<option value="X">X</option>
<option value="9">9</option>
<option value="7">7</option>
<option value="5">5</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="0" selected="selected">M</option>
</select>
<select class="input1" onchange="OnChange(this)" name="score_1_6">
<option value=""></option>
<option value="X">X</option>
<option value="9">9</option>
<option value="7">7</option>
<option value="5">5</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="0" selected="selected">M</option>
</select>
<span class="spacer"></span>
<input type="text" maxlength="2" class="input2" value="0" id="total_row_1" /><!--assigned default value 0 and id-->
</fieldset>
<fieldset class="scores_row_2">
<select class="input1" onchange="OnChange(this)" name="score_2_1">
<option value=""></option>
<option value="X">X</option>
<option value="9">9</option>
<option value="7">7</option>
<option value="5">5</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="0" selected="selected">M</option>
</select>
<select class="input1" onchange="OnChange(this)" name="score_2_2">
<option value=""></option>
<option value="X">X</option>
<option value="9">9</option>
<option value="7">7</option>
<option value="5">5</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="0" selected="selected">M</option>
</select>
<select class="input1" onchange="OnChange(this)" name="score_2_3">
<option value=""></option>
<option value="X">X</option>
<option value="9">9</option>
<option value="7">7</option>
<option value="5">5</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="0" selected="selected">M</option>
</select>
<select class="input1" onchange="OnChange(this)" name="score_2_4">
<option value=""></option>
<option value="X">X</option>
<option value="9">9</option>
<option value="7">7</option>
<option value="5">5</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="0" selected="selected">M</option>
</select>
<select class="input1" onchange="OnChange(this)" name="score_2_5">
<option value=""></option>
<option value="X">X</option>
<option value="9">9</option>
<option value="7">7</option>
<option value="5">5</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="0" selected="selected">M</option>
</select>
<select class="input1" onchange="OnChange(this)" name="score_2_6">
<option value=""></option>
<option value="X">X</option>
<option value="9">9</option>
<option value="7">7</option>
<option value="5">5</option>
<option value="3">3</option>
<option value="1">1</option>
<option value="0" selected="selected">M</option>
</select>
<span class="spacer"></span>
<input type="text" maxlength="2" class="input2" value="0" id="total_row_2" /><!--assigned default value 0 and id-->
<input type="text" maxlength="2" class="input3" value="0" id="final_row"/><!--The grand total appears here-->
</fieldset>
</form>
Fiddle:-http://jsfiddle.net/TRV4f/3/
Edit 1:- added comments in source
Edit 2:- As pointed out by user made changes to the previous source, which had bugs.
The function OnChange is using the global variable row to know which row is being modified. Your problems are:
You have several rows and row is always 1.
You have only a global variable (sum), but you'll need one for each row.
I suggest you to add a second paratemer to the function OnChange to let it know which the row is (just remove the global variable and add it as a parameter) and avoid the variable sum, using the current value of the fields when adding any amount:
function OnChange(value, row) {
var sum= document.getElementById('total_row_'+ row).value + new Number(value);
document.getElementById('total_row_'+ row).value = sum;
}
NOTE: Notice that this logic works when you set the value for the first time, but if there was a previous value, it won't be subtracted before the sum.
Then you can create a loop to calculate the sum of all previous rows, but I'd add an id to that text field to access it easily.