Reset select menu that is styled as <li> - javascript

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"

Related

Get textarea value from selected input by data id, from appended (jquery) elements

I was able to get the value for Description (textarea) from the first service (selected input) (which is right), for the attribute of data id, but I'm having a problem getting it from appended elements, after using the add more button
What am I missing, please?
Below is my code and I can explain further if need be.
<div class="service-box">
<div class="row">
<div class="col-md-12 service-group">
<div class="row">
<div class="form-group mb-3 col-md-6">
<label class="form-label">Service</label>
<div >
<select type="text" class="form-select" placeholder="Services" value="" name="service" id="service">
<option value="" disabled selected>Select your option</option>
#foreach ($services as $service)
<option value="{{$service->service_name}}" data-id="{{$service->description}}">{{$service->service_name}}</option>
#endforeach
</select>
</div>
</div>
<div class="form-group mb-3 col-md-6">
<label class="form-label">Amount</label>
<div >
<input type="text" class="form-control" name="amount" id="amount" placeholder="Amount">
</div>
</div>
<div class="form-group mb-3 col-md-12">
<label class="form-label">Description</label>
<textarea class="form-control" id="description" name="description" rows="6" placeholder="Content.." readonly></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<button type="button" id="addmore" class="btn btn-default">Add more</button>
<button type="button" id="remove" class="btn btn-default">Remove</button>
</div>
$("#addmore").click(function() {
var serviceGroupHTML = $('.service-group').html();
$( ".service-box" ).append(serviceGroupHTML);
});
$("#remove").on("click", function() {
$(".service-box").children().last().remove();
});
<!-- This is where the problem lies -->
const service = new Array(document.getElementById("service"));
const description = new Array(document.getElementById("description"));
service[0].addEventListener("change", function(){
description[0].value = $('#service option:selected').data('id');
})
service[1].addEventListener("change", function(){
description[1].value = $('#service option:selected').data('id');
})
As your newly created element are dynamic so you need to bind it with static element. Then, you can get the value of the data-attribute by using $(this).find("option:selected").data("id") and assign this to your textarea of that particular group .
Demo Code :
$("#addmore").click(function() {
$('.service-group:first').clone().find("input:text,textarea").val("").end()
.appendTo('.service-box');
});
$("#remove").on("click", function() {
$(".service-box").children().last().remove();
});
$("body").on("change", "select[name=service]", function() {
//get description for data-attribute
var description = $(this).find("option:selected").data("id");
//assign value
$(this).closest(".service-group").find("textarea[name=description]").val(description)
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="service-box">
<div class="row service-group">
<div class="col-md-12">
<div class="row">
<div class="form-group mb-3 col-md-6">
<label class="form-label">Service</label>
<div>
<select type="text" class="form-select" placeholder="Services" value="" name="service">
<option value="" disabled selected>Select your option</option>
<option value="1" data-id="This test">XYZ</option>
<option value="1" data-id="This test22">Z22</option>
<option value="1" data-id="This test33">YZ33</option>
</select>
</div>
</div>
<div class="form-group mb-3 col-md-6">
<label class="form-label">Amount</label>
<div>
<input type="text" class="form-control" name="amount" id="amount" placeholder="Amount">
</div>
</div>
<div class="form-group mb-3 col-md-12">
<label class="form-label">Description</label>
<textarea class="form-control" name="description" rows="6" placeholder="Content.." readonly></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<button type="button" id="addmore" class="btn btn-default">Add more</button>
<button type="button" id="remove" class="btn btn-default">Remove</button>
</div>

ng-repeat with form in angularjs

I have created dynamic forms with ng-repeat directive. I am getting form field according to userid value. Once I have filled every field in form my add user button should be enabled. As of now its not enabled. I have attached my code below.
My html code:
<div ng-app="myApp">
<div ng-controller="myCtrl">
<form role="form" name='userForm' novalidate>
<div class="container">
<div class="row" ng-repeat="myid in userid">
<div class="form-group">
<div class="col-md-3">
<label>ID</label>
<input ng-model="myid" id="myid" name="myid" placeholder="Enter bugid" type="text" required readonly disabled>
</div>
<div class="col-md-3">
<label>Comments</label>
<textarea ng-model="manualComment" id="textarea1" rows="1"></textarea>
</div>
<div class="col-md-3 ">
<label>Gender</label>
<select ng-model="gender" name="select2">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
</div>
</div>
<div class="buttonContainer text-center btn-container">
<br>
<button ng-disabled="!(myid && manualComment && gender)" type="button" id="adduser">Add user</button>
<button type="button" class="btn button--default btn--small pull-center">Close</button>
</div>
</form>
</div>
my app.js file
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
$scope.userid = [1, 2, 3]
});
How can I enable add user button once all field are filled?
Update:
If you want to convert your initial array from the server to a usage array check this fiddle
JSFiddle Demo
If you want an object which contains all the form values, please refer to the below fiddle!
JSFiddle Demo
Based on the statement below, this is my solution.
How can I enable add user button once all field are filled?
I have added the required attribute to all the input fields, the form name userForm is a variable in the scope. It has its validation variables, in my case I am using userForm.$invalid which will be true unless all the fields with required attribute are filled. The Add User is disabled by using the ng-disabled attribute, check the below JSFiddle for a demo.
JSFiddle Demo
<div ng-app="myApp">
<div ng-controller="myCtrl">
<form role="form" name='userForm' novalidate>
<div class="container">
<div class="row" ng-repeat="myid in userid">
<div class="form-group">
<div class="col-md-3">
<label>ID</label>
<input ng-model="myid" id="myid" name="myid" placeholder="Enter bugid" type="text" required readonly disabled>
</div>
<div class="col-md-3">
<label>Comments</label>
<textarea ng-model="manualComment" id="textarea1" rows="1" required></textarea>
</div>
<div class="col-md-3 ">
<label>Gender</label>
<select ng-model="gender" name="select2" required>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
</div>
</div>
<div class="buttonContainer text-center btn-container">
<br>
<button ng-disabled="userForm.$invalid" type="button" id="adduser">Add user</button>
<button type="button" class="btn button--default btn--small pull-center">Close</button>
</div>
</form>
</div>
</div>

Need help writing a Javascript to add values

I need help in writing JavaScript code for my form. I need to add the values in the text fields(credit cards, payday loans and unsecured personal loans) and if the total gets more than or equal to $10000, on submit it should take the user to page 1, else page 2. I just want to add the first three fields, it doesn't matter what the user inputs in the other fields. Here's my form:
<form action="/fsg?pageId=0bd004f9-aabc-486e-be09-bf2621555e3e&variant=b" method="POST">
<input type="hidden" name="pageId" value="0bd004f9-aabc-486e-be09-bf2621555e3e"><input type="hidden" name="pageVariant" value="b">
<fieldset class="clearfix" style="width: 297px; height: -17px;">
<div class="lp-pom-form-field clearfix" id="container_What_state_do_you_live_in">
<label for="What_state_do_you_live_in" class="main lp-form-label" id="label_What_state_do_you_live_in">
State? *</label><select id="What_state_do_you_live_in" name="What_state_do_you_live_in" class="text form_elem_What_state_do_you_live_in">
<option value="">Select a State</option>
<option value="Arizona">Arizona</option>
<option value="California">California</option>
<option value="Florida">Florida</option>
<option value="Michigan">Michigan</option>
<option value="Nevada">Nevada</option>
<option value="New York">New York</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Texas">Texas</option>
<option value="Virginia">Virginia</option>
<option value="I reside in another state.">I reside in another state.</option></select>
</div>
<div class="lp-pom-form-field clearfix" id="container_credit_cards">
<label for="credit_cards" class="main lp-form-label" id="label_credit_cards">Credit Cards</label><input type="text" id="credit_cards" name="credit_cards" class="text form_elem_credit_cards">
</div>
<div class="lp-pom-form-field clearfix" id="container_payday_loans">
<label for="payday_loans" class="main lp-form-label" id="label_payday_loans">Payday Loans</label><input type="text" id="payday_loans" name="payday_loans" class="text form_elem_payday_loans">
</div>
<div class="lp-pom-form-field clearfix" id="container_unsecured_personal_loans">
<label for="unsecured_personal_loans" class="main lp-form-label" id="label_unsecured_personal_loans">Unsecured Personal Loans</label><input type="text" id="unsecured_personal_loans" name="unsecured_personal_loans" class="text form_elem_unsecured_personal_loans">
</div>
<div class="lp-pom-form-field clearfix" id="container_student_loans">
<label for="student_loans" class="main lp-form-label" id="label_student_loans">Student Loans</label><input type="text" id="student_loans" name="student_loans" class="text form_elem_student_loans">
</div>
<div class="lp-pom-form-field clearfix" id="container_auto_loan">
<label for="auto_loan" class="main lp-form-label" id="label_auto_loan">Auto Loan</label><input type="text" id="auto_loan" name="auto_loan" class="text form_elem_auto_loan">
</div>
<div class="lp-pom-form-field clearfix" id="container_medical_bills">
<label for="medical_bills" class="main lp-form-label" id="label_medical_bills">Medical Bills</label><input type="text" id="medical_bills" name="medical_bills" class="text form_elem_medical_bills">
</div>
<input type="submit" name="submit" id="submit" value="Submit">
</form>
var total = $('#Creditcards').val() + $('#Payday').val() + $('#Unsecured').val();
$('.submit').click(function(){
if(total<10000)
{window.href.location = "x"}
else{
window.href.location = "y";
}
})

ng-submit is not working

I HAVE A FORM BUT NG SBMIT DOESNOT CALL THE FUNCTION
I dont understand why this form not submitting . i have check every thing but it not even call the alert button also
HTML
<form role="form" name="frmCashback" method="post" ng-submit="CashbackUser(frmCashback, Rates)">
<!-- Personal Details Start -->
<div class="well">
<legend> Cashback Details </legend>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="Store">Store:</label>
<select name="Store" class="form-control" ng-model="Rates.Store" ng-options="stores.StoreID as stores.StoreName for stores in StoreList" >
<option value="">Select</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="Store">Category:</label>
<select name="Category" class="form-control" ng-model="Rates.Category" ng-options="Cate.CategoryID as Cate.CategoryName for Cate in CategoryList" >
<option value="">Select</option>
</select>
</div>
<!-- Modal -->
<!---------Model End-------->
</div>
<div class="col-md-4">
<div class="form-group">
<label for="usr">Cash Back Rate:</label>
<input type="text" class="form-control" name="Cashback" id="Cashback" ng-model="Rates.Cashback" required>
</div>
</div>
</div>
<!---------Model End-------->
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary" type="submit">Add Cashback</button>
</div>
</div>
</div>
<!-- Personal Details End -->
</form>
Here is my controller
CONTROLLER
$scope.CashbackUser = function(frm, Rates) {
alert('Hi');
//query_params.Status = CheckStatus.Action;
//console.log(Rates);
}
I have check :
function is within the controller
I am figthing with this for 4 hr kindly help me.
Your template seems to be having error ,form submit will not work if your template having error think so
<!---------Model End-------->
</div>
</div>
In your form, you can use this:
ng-submit="CashbackUser()"
And in your controller:
$scope.CashbackUser = function(){
console.log($scope.frmCashback);
console.log($scope.Rates);
}

PHP Calculator form not sending results to email address

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)

Categories