Html form error - html

This is my form but when I click submit button it shows some error in the form. I am not able to identify it.
<div class="status alert alert-success" style="display: none"></div>
<form name="contactform" method="post" action="email.php">
<div class="row" style=" font-weight: lighter;">
<div class="col-lg-4" style="color:#000;">
First Name:<br><br><input type="text" name="firstname" value="">
</div>
<div class="col-lg-4" style="color:#000;">
Last Name:<br><br><input type="text" name="last" value="">
</div>
<div class="col-lg-4" style="color:#000;">
Email:<br><br><input type="text" name="email" value="">
</div>
</div>
<br>
<br>
<div class="row" style=" font-weight: lighter;">
<div class="col-lg-8" style="color:#000;">
Your Interest*<br><br><select name="interest">
<option selected disabled hidden style='display: none' value=''></option>
<option value="Individual">Individual</option>
<option value="Company">Company</option>
</select>
</div>
<div class="col-lg-4" style="color:#000;">
Phone*<br><br><input type="text" name="phone" value="">
</div>
</div>
<br>
<br>
<div class="row" style=" font-weight: lighter;">
<div class="col-lg-8" style="color:#000;">
Module Categoey*<br><br><select name="module">
<option selected disabled hidden style='display: none' value=''></option>
<option value="Accessory">Accessory</option>
<option value="Audio">Audio</option>
</select>
</div>
<div class="col-lg-4" style="color:#000;">
Role*<br><br><select name="role">
<option selected disabled hidden style='display: none' value=''></option>
<option value="Individual">Individual</option>
<option value="Company">Company</option>
</select>
</div>
</div>
<br>
<br>
<div class="row" style=" font-weight: lighter;">
<div class="col-lg-12" style="color:#000;">
Tell us about yourself:<br><br><textarea id="description" name="description"></textarea>
</div>
</div>
<br>
<br>
<div class="row" style=" font-weight: lighter;">
<div class="col-lg-12" style="color:#000;">
<div class="checkbox">
<label><input type="checkbox" value="">I accept the Terms and Conditions and acknowledge that my information will be used in accordance with Google Privacy Policy*</label>
</div>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-lg-12" style="color:#000;">
<!--<button type="button" class="btn btn-primary " style="color:#000;" aria-label="Play">Submit<i></i></button>-->
<input type="submit" class="btn btn-primary " style="color:#000;" value="Submit">
</div>
</div>
</form>
Help to identify the error. it shows "We are very sorry, but there were error(s) found with the form you submitted. These errors appear below.
We are sorry, but there appears to be a problem with the form you submitted.
Please go back and fix these errors. "
This is my php file email.php
<?php
header('Content-type: application/json');
$status = array(
'type'=>'success',
'message'=>'Email sent!'
);
$name = #trim(stripslashes($_POST['firstname']));
$email = #trim(stripslashes($_POST['email']));
$subject = #trim(stripslashes($_POST['interest']));
$message = #trim(stripslashes($_POST['module']));
$email_from = $email;
$email_to = 'pravakar#mrwebsiter.com';
$body = 'Name: ' . $name . "\n\n" . 'Email: ' . $email . "\n\n" . 'Subject: ' . $subject . "\n\n" . 'Message: ' . $message;
$success = #mail($email_to, $subject, $body, 'From: <'.$email_from.'>');
echo json_encode($status);
die;
?>

See if you fields in the form match your conditions here:
if(!isset($_POST['firstname']) ||
!isset($_POST['lastname']) ||
!isset($_POST['email']) ||
!isset($_POST['interest']) ||
!isset($_POST['phone']) ||
!isset($_POST['module']) ||
!isset($_POST['role']) ||
!isset($_POST['description'])) {
died('We are sorry, but there appears to be a problem with the form you submitted.');
}
You can make error message better if you test each field separately.

Related

Changing position of setCustomValidity warning in CSS

Below is part of my CSS code for HTML. I want all the inputs to be filled when the button "register" is pressed. If I don't have an address, a little pop-up warning comes right up to the input field. I would like the same with a drop-down menu. I know the code gives you the warning when the button "register" is pressed because of the JavaScript code. But I am wondering: is it possible to change the location of that warning from the "register" button to the drop-down menu?
Thank you for all your help.
<html lang="en">
<body>
<div class="container">
<form class="form-signin" role="form" method="post" action=".">
<div class="form-group">
<label for="adress" class="form-text">Adress</label>
<input type="text" class="form-control" id="adress" placeholder="Rainbow 3" name="adress" required>
</div>
<div class="form-row">
<div class="form-group col-md-8" style="height:70px">
<label for="inputState" class="form-text">State</label>
<select id="inputState" class="form-control" name="state" required>
<option selected disabled value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div>
<button href="/oglasi/" type="submit" class="btn btn-outline-secondary" role="button" aria-pressed="true" onclick="check(this)">Register</button>
</div>
<script language='javascript' type='text/javascript'>
function check(input) {
if (document.getElementById('inputState').value == "0") {
input.setCustomValidity('Choose state.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>
<br>
</form>
</div>
</body>
</html>
you need setCustomValidity to select element
function check(input) {
const inputStateElm = document.getElementById('inputState');
if (inputStateElm.value == "0") {
inputStateElm.setCustomValidity('Choose state.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
--
Full code
<html lang="en">
<body>
<div class="container">
<form class="form-signin" role="form" method="post" action=".">
<div class="form-group">
<label for="adress" class="form-text">Adress</label>
<input type="text" class="form-control" id="adress" placeholder="Rainbow 3" name="adress" required>
</div>
<div class="form-row">
<div class="form-group col-md-8" style="height:70px">
<label for="inputState" class="form-text">State</label>
<select id="inputState" class="form-control" name="state" required>
<option selected disabled value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div>
<button href="/oglasi/" type="submit" class="btn btn-outline-secondary" role="button" aria-pressed="true" onclick="check(this)">Register</button>
</div>
<script language='javascript' type='text/javascript'>
function check(input) {
const inputStateElm = document.getElementById('inputState');
if (inputStateElm.value == "0") {
debugger;
inputStateElm.setCustomValidity('Choose state.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>
<br>
</form>
</div>
</body>
</html>

AngularJs validation for particular select

I have a dropdown in which when I select 'one' only then my input appears. That input is required field. What I want is when user select 'one' only then validation on the input works and hence on save button it shows error but if it selects other values or no value then on save it doesn't show validation error.
<form name="myForm" data-ng-submit="save(myForm.$valid)"novalidate="novalidate">
<div class="form-group">
<label class="col-md-6">Select:</label>
<select class="col-md-2" ng-model="val.value">
<option value="1" selected>one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
<div ng-show="val.value=='1'">
<label class="col-md-3">one:</label>
<input type="number" class="col-md-4" ng-model="val.one" name="valOne" data-ng-class="{'has-error':myForm.valOne.$dirty && myForm.valOne.$invalid }" required="required"/>
<div class="col-md-2" data-ng-messages="myForm.valOne.$error"
data-ng-show="myForm.valOne.$touched ||myForm.$submitted">
<div class="error-message" data-ng-message="required">Please enter Value
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-warning"><i class="fa fa-save"></i>
Save</button>
</form>
Please recommend something.
You can use ng-required:
<input type="number" class="col-md-4" ng-model="val.one" name="valOne" data-ng-class="{'has-error':myForm.valOne.$dirty && myForm.valOne.$invalid }" ng-required="val.value == 1"/>

jquery datalist show labels

How to show the data list labels but submit the actual value to the database?
<div class="form-group">
<label for="reg_input">Parent Name</label>
<input list="parentName" name="parentsName" id="parentsName" class="form-control">
<datalist style="color: #FFF" id="parentName">
<?php
$pa="select * from parents";
$par=mysql_query($pa);
while ($childrens=mysql_fetch_array($par)) {
?>
<option value="<?php echo $childrens['UserName'];?>" data-value="<?php echo $childrens['UserID'] ?>"></option>
<?php
}
?>
</datalist>
</div>

Record data: SyntaxError: Unexpected end of JSON input

I can record data in my db but ajax loading doesn't inter in success method. What's the problem?
error: "SyntaxError: Unexpected end of JSON input
at Object.parse (native)
at n.parseJSON "
record_data.php
<?php
$type=getPar_empty("type",$_GET,"");
$new_nome=$_GET['new_nome'];
$new_cognome=$_GET['new_cognome'];
$new_email=$_GET['new_email'];
$new_lingua=$_GET['new_lingua'];
if ($type=="add_user"){
$stmt=null;
$stmt=$db->prepare("INSERT INTO newsletter_utenti(email,abilitato,nome,cognome,lingua,lista,data_creazione,unsubscribe) VALUES('$new_email',1,'$new_nome','$new_cognome','$new_lingua','manual',now(),0)");
if (!$stmt) {
log_msg($db->error);
die();
}
$stmt->execute();
$stmt->close();
$db->close();
}
?>
script
$("#salvaBtn").click(function(){
var nome = $('#nome').val();
var cognome = $('#cognome').val();
var email = $('#email').val();
var lingua = $('#lingua').val();
var dataString = 'nome='+nome+'&cognome='+cognome+'&email='+email+'&lingua='+lingua+'&type=add_user';
$.ajax({
type:'GET',
data:dataString,
url:"record_data.php",
success:function(result) {
$("#status_text").html(result);
$('#nome').val('');
$('#cognome').val('');
$('#email').val('');
},
error:function(xhr,status,error) {
console.log(error);
}
});
});
$('#adduser').submit(function (){
return false;
});
form
<form name="adduser" id="adduser" method="GET" action="#">
<div class="col-md-3">
<div class="form-group m-b-30">
<p>E-mail</p>
<input class="form-control" type="email" id="email" name="email" placeholder="indirizzo e-mail" email required>
</div>
</div>
<div class="col-md-3">
<div class="form-group m-b-30">
<p>Nome</p>
<input class="form-control" type="text" id="nome" name="nome" placeholder="nome">
</div>
</div>
<div class="col-md-3">
<div class="form-group m-b-30">
<p>Cognome</p>
<input class="form-control" type="text" id="cognome" name="cognome" placeholder="cognome">
</div>
</div>
<div class="col-md-3">
<div class="form-group m-b-30">
<p>Lingua</p>
<select class="form-control" id="lingua" name="lingua">
<option value="it">IT</option>
<option value="en">EN</option>
</select>
</div>
<input type="submit" class="btn btn-embossed btn-primary m-r-20" id="salvaBtn" value="Aggiungi utente"></input>
<div id="status_text" /></div>
</div>
</form>
Your ajax method is POST, but you try to recive values from GET, could be this.
Another way is to use json_decode, from PHP.
$vars = json_decode($_POST['data']);
tell us, these changes will clear your code input.
thanks

Forms: Using 1 input box with 2 names

my first post here so hope its not too dumb a question. Im including a search box in my nav bar and I want it to search by product title OR description, is this possible ? The code I have so far is as follows which works fine to search by one field but not two
<div class="search_box">
<form method="post" name="search" id="search" action="../admin/search_box.php">
<input type="submit" name="submit" value="Find" style="float: right" />
<div style="overflow: hidden; padding-right: .5em;">
<input type="text" name="description" style="width:100%;" />
</div>
</form>
</div>
and then for the data processing
<?php
require ('dbconnection.php');
$title = filter_var($_POST["title"], FILTER_SANITIZE_STRING);
$description = filter_var($_POST["description"], FILTER_SANITIZE_STRING);
if (isset($_POST['submit'])) // waits for user to enter data into the form
{
$sql_search_lookup = "SELECT * FROM item WHERE item.description LIKE '%$description%'";
$result=mysqli_query ($link, $sql_search_lookup) or die ('Problem:'.$sql_search_lookup);
if (mysqli_num_rows($result) > 0)
{
while ($row=mysqli_fetch_array($result))
{
?>
<div style="float: left; width: 98%; margin: 10px">
<p>
<div style="float:left; width: 20%;">
<a href="/products_detail.php?itemID=<?php print $row["itemID"]?>">
<img src="../images/products/<?php print $row['img_file_path'];?> " width="150" height="120">
</a>
</div>
<div style="float:left;width: 75%;vertical-align:middle; font-size:14px; padding:1%;">
<?php echo "Title: ". $row['title']?><br>
<?php echo "Description: ".$row['description']?>
</div>
</p>
</div>
<?php }
}
else
{
echo "We cant find what you're looking for sorry";
}
}
?>
Your HTML should be:
<div class="search_box">
<form method="post" name="search" id="search" action="../admin/search_box.php">
<input type="submit" name="submit" value="Find" style="float: right" />
<div style="overflow: hidden; padding-right: .5em;">
<input type="text" name="description" style="width:100%;" />
</div>
</form>
</div>
Your mysql query should be something like:
$sql_search_lookup = "SELECT * FROM item WHERE item.description LIKE '%"+$description+"%' or item.title LIKE '%"+$description+"%'";