PHP Calculator form not sending results to email address - javascript

I have a calculator form and i want to send the results to my email address. It's posting the right data, but the response is just showing the full php code instead of "email sent"
Here is a working example:
http://www.blackcatcoding.co.uk/calculator/calculator.php
and here is the php code behind it:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
function propType(id)
{
var pprice = document.getElementById('pur_price').value;
var rate1 = document.getElementById('select2').value;
var refurb = document.getElementById('refurb').value;;
document.getElementById('avg_claim_rate').value=id;
var result1 = +pprice + + refurb;
var result2 = result1 * rate1;
document.getElementById('amount_claim').value=result2;
}
function calculate()
{
var tax_rate=document.getElementById('tax_rate').value;
var amount_claim=document.getElementById('amount_claim').value;
var client_benefit=amount_claim*tax_rate;
var cash_reclaim=client_benefit*0.36;
var future_tax_rel=client_benefit-cash_reclaim;
//$('#future_tax_rel').text(future_tax_rel);
document.getElementById('future_tax_rel').value=future_tax_rel;
document.getElementById('client_benefit').value=client_benefit;
document.getElementById('cash_reclaim').value=cash_reclaim;
return false;
}
</script>
<div class="main_box">
<div class="clear"></div>
<div class="clear"></div>
<?php
$action=$_REQUEST['action'];
if ($action=="") /* display the contact form */
{
?>
<form action="" method="POST" enctype="multipart/form-data">
<div class="main_col">
<div class="main_col_left"><strong>BUSINESS NAME:</strong></div>
<div class="main_col_right">
<input type="text" name="business" id="business" value="" />
</div>
</div>
<div class="main_col">
<div class="main_col_left"><strong>EMAIL ADDRESS:</strong></div>
<div class="main_col_right">
<input type="text" name="email" id="email" value="" />
</div>
</div>
<div class="main_col">
<div class="main_col_left"><strong>PROPERTY PURCHASE PRICE:</strong><span><strong>£</strong></span></div>
<div class="main_col_right">
<input type="text" name="pur_price" id="pur_price" value="" />
</div>
</div>
<div class="main_col">
<div class="main_col_left"><strong>REFURB COST:</strong><span><strong>£</strong></span></div>
<div class="main_col_right">
<input type="text" name="refurb" id="refurb" value="" />
</div>
</div>
<div class="main_col">
<div class="main_col_left"><strong>Property Type :</strong></div>
<div class="main_col_right">
<select name="select2" id="select2" onChange="propType(this.value);">
<option value="">Select Property Type</option>
<option value="0.3">Car Showroom</option>
<option value="0.4">Care/Nursing Home</option>
<option value="0.25">Dental Surgery</option>
<option value="0.3">Department Store</option>
<option value="0.3">Distribution Centre</option>
<option value="0.3">FHL Apartment</option>
<option value="0.3">FHL House</option>
<option value="0.3">FHL Villa</option>
</select>
</div>
</div>
<div class="main_col" style="display:none">
<div class="main_col_left"><strong>AVERAGE CLAIM RATE :</strong><span><strong>£</strong></span></div>
<div class="main_col_right">
<input type="text" name="avg_claim_rate" id="avg_claim_rate" value="" />
</div>
</div>
<div class="main_col">
<div class="main_col_left"><strong>AMOUNT CLAIMABLE :</strong><span><strong>£</strong></span></div>
<div class="main_col_right">
<input type="text" name="amount_claim" id="amount_claim" value="" />
</div>
</div>
<div class="main_col">
<div class="main_col_left"><strong> YOUR TAX RATE :</strong></div>
<div class="main_col_right">
<select name="tax_rate" id="tax_rate">
<option value=".24">24%</option>
<option value=".4">40%</option>
</select>
</div>
</div>
<div class="clear"></div>
<hr />
<div class="clear"></div>
<div class="main_col">
<div class="main_col_left"><strong>CLIENT TAX BENEFIT :</strong><span><strong>£</strong></span></div>
<div class="main_col_right">
<input type="text" name="client_benefit" id="client_benefit" value="" />
</div>
</div>
<div class="main_col">
<div class="main_col_left"><strong>INSTANT CASH RECLAIM:</strong><span><strong>£</strong></span></div>
<div class="main_col_right">
<input type="text" name="cash_reclaim" id="cash_reclaim" value="" />
</div>
</div>
<div class="main_col">
<div class="main_col_left"><strong>FUTURE TAX RELIEF :</strong><span><strong>£</strong></span></div>
<div class="main_col_right"><!--<span id="future_tax_rel"></span>-->
<input type="text" name="future_tax_rel" id="future_tax_rel" value="" />
</div>
</div>
<div class="clear"></div>
<hr />
<div class="clear"></div>
<p style="line-height:20px;">Note : These figures are estimates and the final figures may very depending upon the property and full circusstances</p>
<div class="clear"></div>
<div class="clear"></div>
<div class="main_col">
<div class="main_col_left"> </div>
<div class="main_col_right">
<button onClick="calculate();">Calculate</button>
</div>
</div>
</form>
<?php
}
else /* send the submitted data */
{
$name=$_REQUEST['business'];
$email=$_REQUEST['email'];
$pur_price=$_REQUEST['pur_price'];
$refurb=$_REQUEST['refurb'];
$select2=$_REQUEST['select2'];
$select=$_REQUEST['select'];
if (($name=="")||($email==""))
{
echo "Please enter business name & email";
}
else{
$from="From: $name<$email>\r\nReturn-path: $email";
$subject="Message sent using your contact form";
mail("carladessi#hotmail.com", $subject, $from);
echo "Email sent!";
}
}
?>
<div class="clear"></div>
<div class="clear"></div>
</div>

I don't see anything defining "action" that you check in $_REQUEST['action'];
The <form action=""> won't do it. You may want to include an hidden input <input type="hidden" name="action" value="post" /> or change the way you're checking the data.
FYI you should also sticks to $_POST in your case (and use $_REQUEST only when needed)

Related

How to write a js script that verifies input on html

I am trying to add validation to a html form that looks like this:
<div id="container">
<header>
<h1>Production Form</h1>
</header>
</br>
<div class="content">
<div class="row">
<article class="col-xs-12">
<form id="cf-task-form">
<section>
<br><br>
<div class="row form-group">
<div class="col-xs-3">
<label for="link">Link</label>
<input type="url" id="link" class="form-control" name="output[link]">
</div>
<div class="col-xs-3">
<label for="address">Address</label>
<input id="address" class="form-control" name="output[address]">
</div>
<div class="col-xs-3">
<label for="research">Research</label>
<select id="research" name="output[research]">
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
</section>
<div class="col-xs-offset-6 col-xs-6">
<input type="button" class="btn sub-btn pull-right" id="submit-btn" value="Submit" tabindex="10">
</div>
</form>
</article>
</div>
<div class="clear"></div>
</div>
</div>
However the code is not picking validation when I use the required attribute, how can I add validation for this within a js script that will check against the values in this html form before submitting
I think maybe you get the errors because the HTML tags were not opened and closed in the correct order, and you had an opened div that needed to be closed. Try validating the HTML code. I think it can cause problems if your html is not valid.
I added these attributes to your HTML (and validated it), and also some CSS to see the validation result.
<input type="text" id="link" class="form-control" name="output[link]" required="true" pattern="^http.*">
<input id="address" class="form-control" name="output[address]" required="true" pattern=".*street.*">
and
:invalid {
border: 1px solid red;
}
This works and validates as expected.
:invalid {
border: 1px solid red;
}
input {
margin: 1em
}
<div id="container">
<header>
<h1>Production Form</h1>
</header>
<div class="content">
<div class="row">
<article class="col-xs-12">
<form id="cf-task-form">
<section>
<div class="row form-group">
<div class="col-xs-3">
<label for="link">Link</label>
<input type="text" id="link" class="form-control" name="output[link]" required="true" pattern="^http.*">
</div>
<div class="col-xs-3">
<label for="address">Address</label>
<input id="address" class="form-control" name="output[address]" required="true" pattern=".*street.*">
</div>
<div class="col-xs-3">
<label for="research">Research</label>
<select id="research" name="output[research]">
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
<div class="col-xs-offset-6 col-xs-6">
<input type="button" class="btn sub-btn pull-right" id="submit-btn" value="Submit" tabindex="10">
</div>
</div>
</section>
</form>
</article>
</div>
<div class="clear"></div>
</div>
</div>
Note that the validation patterns are only for testing and not real patterns that should be used!
I used this page as reference: https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
If you want the required attribute to work, I think you need to change your last input type to "submit" :
<input type="submit" class="btn sub-btn pull-right" id="submit-btn" value="Submit" tabindex="10">
But I agree that it would be great to add some JS if you want to do proper form validation. I see some people shared useful links on the subject.
<form id="cf-task-form" onsubmit="return validateForm()">
const link = document.querySelector("#link").value
const Address = document.querySelector("#Address").value
const research = document.querySelector("#research").value
function validateForm() {
if (link == '') {
alert("filled out url");
return false;
}
else if (Address == '') {
alert("filled out Address");
return false;
}
else if (research == '') {
alert("filled out research");
return false;
}
}

How to dynamically change the price of paypal smartbutton according to the PHP cart value?

I am not able to assign the value of my shopping cart to the Paypal button in order for the user to be able to pay the correct amount.
The total price of the cart is stored as a variable $total_price:
<span class="metadata" id="totalprice" value="<?php echo $total_price ?>" > </span>
This is done to change it to something callable in Javascript.
Paypal's code from their developer website is as such:
<script>
var num = document.getElementById("totalprice").value;
// Render the PayPal button into #paypal-button-container
paypal.Buttons({
// Set up the transaction
createOrder: function (data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: num
}
}]
});
},
// Finalize the transaction
onApprove: function (data, actions) {
return actions.order.capture().then(function (details) {
// Show a success message to the buyer
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
}
}).render('#paypal-button-container');
</script>
However by adding my variable as the value (as shown in the code above) every time I run the payment, the Paypal pop up briefly opens and then crashes.
I have also tried to create a Javascript variable containing the PHP variable and then setting value to that, but it had no effect.
Is there any way to solve this?
EDIT (this is my PHP code)
$cart_total=0;
if(isset($_POST['submit'])){
$address=obtain_values($connection,$_POST['address']);
$city=obtain_values($connection,$_POST['city']);
$pincode=obtain_values($connection,$_POST['pincode']);
$payment_type=obtain_values($connection,$_POST['payment_type']);
$user_id=$_SESSION['USER_ID'];
foreach($_SESSION['cart'] as $key=>$val){
$productArr=get_product($connection,'','',$key);
$price=$productArr[0]['price'];
$quantity=$val['qty'];
$cart_total=$cart_total+($price*$quantity);
}
$total_price=floatval($cart_total);
$payment_status='pending';
if($payment_type=='cod'){
$payment_status='success';
}
$order_status='2';
$added_on=date('Y-m-d h:i:s');
$txnid = substr(hash('', mt_rand() . microtime()), 0, 20);
mysqli_query($connection,"INSERT INTO order(user_id,address,city,pincode,payment_type,total_price,payment_status,order_status,added_on,txnid) VALUES('$user_id','$address','$city','$pincode','$payment_type','$total_price','$payment_status','$order_status','$added_on','$txnid')");
$order_id=mysqli_insert_id($connection);
foreach($_SESSION['cart'] as $key=>$val){
$productArr=get_product($connection,'','',$key);
$price=$productArr[0]['price'];
$quantity=$val['qty'];
mysqli_query($connection,"insert into `order_detail`(order_id,product_id,qty,price) values('$order_id','$key','$quantity','$price')");
echo "insert";
}
unset($_SESSION['cart']);
?>
<script>
window.location.href='thank_you.php';
</script>
<?php
}
?>
EDIT 2
<span class="metadata" id="totalprice" value="<?php echo ($total_price) ?>" > </span>
<div class="ht__bradcaump__area" style="background: rgba(0, 0, 0, 0) url(images/bg/ali1.png) no-repeat scroll center center / cover ;">
<div class="ht__bradcaump__wrap">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="bradcaump__inner">
<nav class="bradcaump-inner">
<a class="breadcrumb-item" href="index.html">Home</a>
<span class="brd-separetor"><i class="zmdi zmdi-chevron-right"></i></span>
<span class="breadcrumb-item active">checkout</span>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Bradcaump area -->
<!-- cart-main-area start -->
<div class="checkout-wrap ptb--100">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="checkout__inner">
<div class="accordion-list">
<div class="accordion">
<?php
$accordion_class='accordion__title';
if(!isset($_SESSION['USER_LOGIN'])){
$accordion_class='accordion__hide';
?>
<div class="accordion__title">
Checkout Method
</div>
<div class="accordion__body">
<div class="accordion__body__form">
<div class="row">
<div class="col-md-6">
<div class="checkout-method__login">
<form id="login-form" method="post">
<h5 class="checkout-method__title">Login</h5>
<div class="single-input">
<input type="text" name="login_email" id="login_email" placeholder="Your Email*" style="width:100%">
<span class="field_error" id="login_email_error"></span>
</div>
<div class="single-input">
<input type="password" name="login_password" id="login_password" placeholder="Your Password*" style="width:100%">
<span class="field_error" id="login_password_error"></span>
</div>
<p class="require">* Required fields</p>
<div class="dark-btn">
<button type="button" class="fv-btn" onclick="user_login()">Login</button>
</div>
<div class="form-output login_msg">
<p class="form-messege field_error"></p>
</div>
</form>
</div>
</div>
<div class="col-md-6">
<div class="checkout-method__login">
<form action="#">
<h5 class="checkout-method__title">Register</h5>
<div class="single-input">
<input type="text" name="name" id="name" placeholder="Your Name*" style="width:100%">
<span class="field_error" id="name_error"></span>
</div>
<div class="single-input">
<input type="text" name="email" id="email" placeholder="Your Email*" style="width:100%">
<span class="field_error" id="email_error"></span>
</div>
<div class="single-input">
<input type="text" name="mobile" id="mobile" placeholder="Your Mobile*" style="width:100%">
<span class="field_error" id="mobile_error"></span>
</div>
<div class="single-input">
<input type="password" name="password" id="password" placeholder="Your Password*" style="width:100%">
<span class="field_error" id="password_error"></span>
</div>
<div class="dark-btn">
<button type="button" class="fv-btn" onclick="user_register()">Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
<div class="<?php echo $accordion_class?>">
Address Information
</div>
<form method="post">
<div class="accordion__body">
<div class="bilinfo">
<div class="row">
<div class="col-md-12">
<div class="single-input">
<input type="text" name="address" placeholder="Street Address" required>
</div>
</div>
<div class="col-md-6">
<div class="single-input">
<input type="text" name="city" placeholder="City/State" required>
</div>
</div>
<div class="col-md-6">
<div class="single-input">
<input type="text" name="pincode" placeholder="Post code/ zip" required>
</div>
</div>
</div>
</div>
</div>
<div class="<?php echo $accordion_class?>">
payment information
</div>
<div class="accordion__body">
<div class="paymentinfo">
<div class="single-method">
COD <input type="radio" name="payment_type" value="COD" required/>
PayPal <input type="radio" name="payment_type" value="paypal" onclick="showButton()" required/>
</div>
<!-- Set up a container element for the button -->
<div id="paypal-button-container"></div>
<!-- Include the PayPal JavaScript SDK -->
<script src="https://www.paypal.com/sdk/js?client-id=ASCkJmx1-2CeTlk1ABMrnC4xJbalWvyLbv-mIx76k9644aZb49wX82Qrgcn6W15Y3Yvm6GrrfpehN_ib&currency=USD"></script>
<script>
document.getElementById("paypal-button-container").style.display = "none";
function showButton() {
var x = document.getElementById("paypal-button-container");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<script>
var num = document.getElementById("totalprice").value;
// Render the PayPal button into #paypal-button-container
paypal.Buttons({
// Set up the transaction
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: num
}
}]
});
},
// Finalize the transaction
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
// Show a success message to the buyer
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
}
}).render('#paypal-button-container');
</script>
<div class="single-method">
</div>
</div>
</div>
<input type="submit" name="submit"/>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="order-details">
<h5 class="order-details__title">Your Order</h5>
<div class="order-details__item">
<?php
$cart_total=0;
foreach($_SESSION['cart'] as $key=>$val){
$productArr=get_product($connection,'','',$key);
$pname=$productArr[0]['name'];
$mrp=$productArr[0]['mrp'];
$price=$productArr[0]['price'];
$image=$productArr[0]['image'];
$quantity=$val['qty'];
$cart_total=$cart_total+($price*$quantity);
?>
<div class="single-item">
<div class="single-item__thumb">
<img src="media/product/<?php echo $image?>" />
</div>
<div class="single-item__content">
<?php echo $pname?>
<span class="price"><?php echo $price*$quantity?></span>
</div>
<div class="single-item__remove">
<i class="icon-trash icons"></i>
</div>
</div>
<?php } ?>
</div>
<div class="ordre-details__total">
<h5>Order total</h5>
<span class="price"><?php echo $cart_total?></span>
</div>
</div>
</div>
</div>
</div>
</div>
<?php require('footer.php')?>

How to print a form value using jquery in html

Suppose I have a form with some input values(name, mobile_number, age and gender).
After fill up the form while I clicked submit button, I want to print the form values.
I have already tried with jQuery but not get the exact result.
Here is my result
But I want to print the form data like this
Name : Raff
Mobile Number : 016*******
Age : **
Gender : Male
Here is my form
<form action="{{url('/add-prescription')}}" method="post" id="new_prescription_form">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="row clearfix">
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-8">
<div class="card">
<div class="body">
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-group">
<div class="form-line">
<b>Name: </b>
<input type="text" id="name" class="form-control" placeholder="" name="name" required/>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="form-line">
<b>Mobile Number: </b>
<input type="text" id="mobile_number" class="form-control" placeholder="" name="mobile_number" required/>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-group">
<div class="form-line">
<b>Age: </b>
<input type="text" id="age" class="form-control" placeholder="" name="age" required/>
</div>
</div>
</div>
<div class= "col-sm-6">
<b>Gender: </b>
<select id="gender" class="form-control show-tick" name="gender" required>
<option value="">-- Please select --</option>
<option value="1">Male</option>
<option value="2">Female</option>
<option value="3">Others</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="form-group">
<button type="submit" class="btn btn-primary m-t-15 waves-effect" value="print" onclick="PrintElem()">SUBMIT</button>
</div>
</div>
</form>
jQuery
function PrintElem()
{
var divToPrint=document.getElementById('new_prescription_form');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
How to solve this ? Anybody help please.
You have to get the values of input fields and add those into the print HTML, this can be achieved using JavaScript , you don't need JQuery for this.
Update your PrintElem function with this and check
function PrintElem()
{
var name = document.getElementById('name').value;
var mobile_number = document.getElementById('mobile_number').value;
var age = document.getElementById('age').value;
var gender = document.getElementById('gender').value;
var divToPrint=document.getElementById('new_prescription_form');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()"><div><p><lable>Name :</lable><span>'+name+'</span></p><p><lable>Mobile Number :</lable><span>'+mobile_number+'</span></p><p><lable>Age:</lable><span>'+age+'</span></p><p><lable>Gender</lable><span>'+gender+'</span></p></div></body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
Hope this works for you
<html>
<head>
<title>jQuery example</title>
<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
type="text/javascript">
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#InputText').keyup(function() {
$('#OutputText').val($(this).val());
$('#DIVTag').html('<b>' + $(this).val() + '</b>');
});
});
</script>
</head>
<body>
<div id="JQDiv">
<form id="JQForm" action="">
<p>
<label for="InputText">
Enter Name :
</label><br />
<input id="InputText" type="text" name="inputBox" />
</p>
<p>
<label for="OutputText">
Output in box
</label><br/>
<input id="OutputText" type="text" name="outputBox" readonly="readonly" />
</p>
<p>
Output in div
</p>
<div id="DIVTag"></div>
</form>
</div>
</body>
</html>
Similarly you can do it for other form fields.
Also use angularjs to achieve same functionalities you can
This is what you are looking for?
Let me know.

Reset select menu that is styled as <li>

once I submit a form I want to reset it. Everything is resetting except the select menu. I have tried this:
const catDrop = document.getElementById('category');
catDrop.selectedIndex = 0;
In the code, it looks like a normal option:
<form id="add-listing">
<div class="col-lg-12">
<div id="add-listing">
<div class="add-listing-section">
<div class="add-listing-headline">
<h3>Basic Information</h3>
</div>
<div class="row with-forms">
<div class="col-md-12">
<h5>Item Name <i class="tip" data-tip-content=""></i></h5>
<input class="search-field" type="text" name="title" id="title" />
</div>
</div>
<div class="row with-forms">
<div class="col-md-12">
<h5>Category</h5>
<select class="chosen-select-no-single" name="category" id="category">
<option value="0">Select Category</option>
<% for (const categories of cats) { %>
<option value="<%= categories.catName %>">
<%= categories.catName %>
</option>
<% } %>
</select>
</div>
</div>
<div class="row with-forms">
<input type="file" name="files" id="image" data-fileuploader-limit="3" data-fileuploader-maxSize="5" data-fileuploader-extensions="jpg, png, jpeg">
</div>
<div class="row with-forms">
<div class="col-md-12">
<h5>Description</h5>
<textarea class="WYSIWYG" name="description" cols="40" rows="3" id="description"
spellcheck="true"></textarea>
</div>
</div>
</div>
<input type="hidden" name="_csrf" value="<%= csrfToken %>" id="csrf">
<button type="submit" class="button preview addItem">Add Item <i class="fa fa-arrow-circle-right"></i></button>
<div class="error"></div>
<div class="successmsg"></div>
</div>
</div>
</form>
But it does not reset the select menu. When taking a look in console what it looks like, it seems that it is styled as an unordered list with list items like this:
<select class="chosen-select-no-single" name="category" id="category" style="display: none;">
<option value="0">Select Category</option>
<option value="Stuff">
Stuff
</option>
</select>
<div
class="chosen-container chosen-container-single chosen-container-single-nosearch chosen-container-active"
style="width: 100%;"
title=""
id="category_chosen"
>
<div class="chosen-drop">
<div class="chosen-search">
<input type="text" autocomplete="off" readonly="" />
</div>
<ul class="chosen-results">
<li class="active-result" data-option-array-index="0" style="">
Select Category
</li>
<li class="active-result" data-option-array-index="11" style="">
Stuff
</li>
</ul>
</div>
</div>
This is the item I want to set it back to once the form has submitted.
The problem seems to be here
<form id="add-listing">
<div class="col-lg-12">
<div id="add-listing">
You have two dom elements with same id, which always need to be unique. Change the id of the form or divand then insidethencall thereset` function
Also you need to pass a string to selectedIndex
document.getElementById('category').selectedIndex = "0"

display two different forms using value from dropdown

I want to display form 1 if drop down value selected is one and similarly display form 2 if drop down value selected is two .
I am using JS to do this. Here is the code .please HELP ME.
I am not aware of JQuery so please help me from basics if the solution is in JQuery
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="asset_sim.css">
<script>
$('p select[name=asset_sim]').change(function () {
if ($(this).val() == 'asset') {
$('#asset_form').show();
} else {
$('#sim_form').show();
}
});
$('p select[name=asset_sim]').change(function () {
if ($(this).val() == 'sim') {
$('#sim_form').show();
} else {
$('#asset_form').hide();
}
});
</script>
</head>
<body>
<?php
include 'header.php';
include 'footer.php';
include 'config.php';
//
//if (isset($_POST['sub'])) {
// $username = filter_input(INPUT_POST, 'User_name');
// $fullname = filter_input(INPUT_POST, 'Full_name');
// $email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
// $roll = filter_input(INPUT_POST, 'role');
// $contact = filter_input(INPUT_POST, 'contact_no');
//
//
// if (($sql = $conn->prepare("insert into tmtool.user_master (Username,Full_name,Email,Role,Contact_no)"
// . "values (?,?,?,?,?)")) == FALSE) {
// echo "false";
// }
// $sql->bind_param('sssss', $username, $fullname, $email, $roll, $contact);
//
// // 2nd query for execution
//
// if (($sql1 = $conn->prepare("insert into tmtool.login (Username,Password) values (?,?)")) == FALSE) {
// echo "false";
// }
// $sql1->bind_param('ss', $username, $tmppass);
//
//inserting userdetails into database
}
?>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Assets and SIM Management</h1>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<label>Enter Asset Details</label>
</div>
<div class="panel-body">
<p>Asset or Sim details :
<select name="asset_sim" required="required">
<option value="">-- Select an Option --</option>
<option value="asset">Enter Asset Details</option>
<option value="sim">Enter SIM Details</option>
</select>
</p>
<div class="dataTable_wrapper">
<div id="asset_form">
<form action="AssetMaster.php" method="POST" role="form">
<div class="col-lg-6">
<div class="form-group">
<label>Device Name</label>
<select name="device_name">
<option>Laptop</option>
<option>Mobile</option>
<option>Data Card</option>
</select>
</div>
<div class="form-group">
<label>Company name</label>
<input class="form-control" name="company_name" type="text" id="company_name" required="required" placeholder="Enetr Company name" title="Please Enetr company name of Device">
</div>
<div class="form-group">
<label>Model Number</label>
<input class="form-control" name="Model_number" type="text" id="model_number" required="required" placeholder="Enetr Model number" title="Enter model number of Your Device ">
</div>
<div class="form-group">
<label>OS version</label>
<input class="form-control" name="OS_version" required="required" id="Os-versionid" placeholder="Enter OS version detail" oninvalid="setCustomValidity('Enter OS version details')" onchange="try {
setCustomValidity('')
} catch (e) {
}"/>
</div>
</div>
<div class="col-lg-12">
<button type="submit" class="btn btn-primary" id="submit" name="sub" data-toggle="modal" data-target="#myModal">Submit</button>
<button type="reset" class="btn btn-primary">Reset</button>
</div>
</form>
</div>
</div>
<div class="dataTable_wrapper">
<div id="sim_form">
<form action="AssetMaster.php" method="POST" role="form">
<div class="col-lg-6">
<div class="form-group">
<label>Type</label>
<select name="sim_type">
<option>Prepaid</option>
<option>Postpaid</option>
</select>
</div>
<div class="form-group">
<label>Simcard Number</label>
<input class="form-control" name="simcard_no" type="text" id="simcard_name" required="required" placeholder="Enetr Simcard Number" title="Please Enter Simcard Number">
</div>
<div class="form-group">
<label>Service Provider</label>
<input class="form-control" name="service_provider" type="text" id="service_provider" required="required" placeholder="Enter Service provider name" title="Enter Service provider name ">
</div>
</div>
<div class="col-lg-12">
<button type="submit" class="btn btn-primary" id="submit" name="sub" data-toggle="modal" data-target="#myModal">Submit</button>
<button type="reset" class="btn btn-primary">Reset</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<!--<script src="../bower_components/jquery/dist/jquery.min.js"></script>-->
<!-- Bootstrap Core JavaScript -->
<!--<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>-->
<!-- Metis Menu Plugin JavaScript -->
<script src="../../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- DataTables JavaScript -->
<script src="../../bower_components/DataTables/media/js/jquery.dataTables.min.js"></script>
<script src="../../bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../../dist/js/sb-admin-2.js"></script>
<!-- Page-Level Demo Scripts - Tables - Use for reference -->
<script>
$(document).ready(function () {
$('#dataTables-example').DataTable({
responsive: true
});
});
</script>
</body>
</html>
Here you can see a working snippet:
$(document).ready(function(){
var selector = $("#form_selector");
var last = null;
function update(){
var selected = selector.val();
if (last)
$("#form_" + last).css('display', 'none');
$("#form_" + selected).css('display', 'block');
last = selected;
}
update();
selector.on("change", update);
});
form {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="form_selector">
<option value="1">1</option>
<option value="2">2</option>
</select>
<hr>
<form name="form" id="form_1">
<input type="text" name="username" placeholder="Your Username"></input><br>
<input type="submit" value="Submit Form 1"></input><br>
</form>
<form name="form" id="form_2">
<input type="email" name="email" placeholder="Your Email"></input><br>
<input type="submit" value="Submit Form 2"></input><br>
</form>

Categories