We Keep Coding

HTML Assigning the checkbox to the form action already defined

I have the form with action targeted for the specified task. I want to have this form also sent by email. It can be the :mailto option or other.
Mailto on submit button
So When I click the Submit form, the form is submitted. However I would like to attach another action to this action, namely I would like to send this filled form to the email by checking the ckeckbox.
So far I saw, that sending the form by checkbox is possible:
submitting a form when a checkbox is checked
but the pivot thing here is assigning the other form action to my form...
HTML form with multiple "actions"
I tried something like this:
<form id="c_form" action="default_url_when_press_enter" method="get" onsubmit="return validate(this);" target="_blank" >
....
<input type="checkbox" action="mailto:mk#gmail.com" id="cfemail" name="email">
<input class="btn" action="c_form.html" type="submit" id="cfsubmit" value="Submit form">
but it didn't work unfortunately as well as with the code applied below:
document.getElementById("cfsubmit").addEventListener("click", function(){
document.getElementById("c_form").className="submitted";
});
How can I send email along with the form submission when my box is checked?
The full code is available here:
https://jsfiddle.net/ptgbvfen/

So far if I understand your problem correctly, you want to submit the form normally. But if the checkbox is checked you want to perform a mailto function as well.
HTML:
<form id="c_form" onsubmit="return validate(this);" target="_self" >
....
<input type="checkbox" id="openmail" name="email">
<input class="btn" type="button" id="cfsubmit" value="Submit form">
Javascript
document.getElementById("cfsubmit").addEventListener("click", function() {
var check = document.getElementById("opemail"); // Get checkbox element
var mainForm = document.getElementById("c_form"); // Get form element
if (check.checked == true) { // If checked then fire
let link=document.createElement("a"); // Creates <a> element in DOM
link.href = "mailto:mk#gmail.com"; // Adds mailto link to <a>
link.click(); // Clicks the <a> and open default mail app
link.remove();
}
mainForm.submit(); // Submits the form
});
Updated___
Removed the action attribute from form element, because you do not need it when you want the form to submit on the current page. Also changed the target attribute to _self so that it will not open new tab whenever you submit the form.
Updated V2_
Made mailto autofill the email content when checkbox checked and form is submitted, as requested. If you find it helpful then kindly upvote, and if you are facing more issue then comment down below. Thanks.
Demo: https://jsfiddle.net/rzos1bwt/
HTML
<form id="c_form" onsubmit="return false;">
<div id="Page1">
<h2 class="property">Property information</h2>
<fieldset>
<figure class="property_information">
<figure class="fig">
<label>
<div class="order">A</div>
<p>Proposed Cable Route<span class="asterisk">*</span></p>
</label>
<br>
<select name="proposed_cable_route" id="cf_proposed_cable_route">
<option value="" disabled selected>-Select your answer-</option>
<option value="External">External</option>
<option value="Internal">Internal</option>
<option value="Combination">PIA</option>
</select>
</figure>
<figure class="fig" id="cf_building_post_2000">
<label>
<div class="order">B</div>
<p>Is the building post 2000?
<span class="asterisk">*</span>
</p>
</label>
<br>
<input name="building_post_2000" type="radio" value="Yes" selected>Yes
<input name="building_post_2000" type="radio" value="No">No
<br>
</figure>
<figure class="fig" id="cfasbestos">
<label>
<div class="order">C</div>
<p>Do you have asbestos report?
<span class="asterisk">*</span>
</p>
</label>
<br>
<input name="asbestos_report" type="radio" value="Yes" selected>Yes
<input name="asbestos_report" type="radio" value="No">No
<br>
<h3 class="alert">Please contact your team leader for advice!</h3>
</figure>
</figure>
<figure class="fig">
<label>
<div class="order">9</div>
<p>Surveyor<span class="asterisk">*</span></p>
</label>
<br>
<input type="text" name="surveyor" placeholder="Surveyor's name">
<input type="email" name="surveyor_email" placeholder="Email">
<br>
</figure>
<div class="emailreceipt">
<input type="checkbox" id="opemail" name="email">
<label for="opemail">Send me an email receipt of my responses</label>
</div>
<input class="btn" type="submit" id="cfsubmit" value="Submit form">
</fieldset>
</div>
</form>
Javascript
document.getElementById("cfsubmit").addEventListener("click", function() {
var check = document.getElementById("opemail"); // Get checkbox element
var formEl = document.forms.c_form; // Get the form
var formData = new FormData(formEl); // Creates form object
// Get all form data values
var cableRoute = formData.get('proposed_cable_route');
var buildingPost = formData.get('building_post_2000');
var asbestosReport = formData.get('asbestos_report');
var surveyorName = formData.get('surveyor');
var surveyorEmail = formData.get('surveyor_email');
// This will create the subject of form
var subject = "Submission from " + surveyorName;
// This will create body with filled data
var body = 'My name is ' + surveyorName + '\n' + 'My email is ' + surveyorEmail + '\n' + 'Proposed Cable Route: ' + cableRoute + '\n' + 'Is the building post 2000: ' + buildingPost + '\n' + 'Do you have asbestos report: ' + asbestosReport;
// Making the mailto link with urlencoding
var mailTo = "mailto:mk#gmail.com?subject="+encodeURI(subject)+"&body="+encodeURI(body);
if (check.checked == true) { // If checked then fire
let link=document.createElement("a"); // Creates <a> element in DOM
link.href = mailTo; // Adds mailto link to <a>
link.click(); // Clicks the <a> and open default mail app
link.remove();
}
//console.log("mailTo => ", mailTo)
mainForm.submit(); // Submits the form
});

How would I make data disappear when successfully submitted

I want user inserted data to disappear from the input field when it is submitted successfully and it should be in the field if it fails to submit e.g. such as duplicate of data.
I have a form that will accept user input and submit it to the database and I use JavaScript to communicate with my form and PHP Script, so now I want when data is successfully submitted it should disappear and when it fails it should be there.
This is the HTML code
<form role="form">
<div class="box-body">
<div class="form-group">
<label for="inputClass">Class Title</label>
<input type="class" class="form-control" id="inputClass" placeholder="Class Title">
</div>
<div class="form-group">
<label for="selectSection">Class Section</label>
<select name="selectSection" id="selectSection" class="form-control" required="required">
<option selected disabled>Class Section</option>
<?php echo(getSection()); ?>
</select>
</div>
<span id="loading"><img src="../assets/images/loading.gif" height="40px" width="100%" alt="Ajax Indicator" /></span>
</div>
<!-- /.box-body -->
<div class="box-footer">
<button type="submit" class="btn btn-primary" id="registerClass">Submit</button>
</div>
</form>
And the JavaScript code is
<script type="text/javascript">
$(document).ready(function() {
$('#loading').hide();
$('#registerClass').click(function(){
$('#loading').show();
$.post("check-class.php", {
inputClass: $('#inputClass').val(),
selectSection: $('#selectSection').val()
}, function(response){
$('#resultInfo').fadeOut();
setTimeout("finishAjax('resultInfo', '"+escape(response)+"')", 2000);
});
return false;
});
});
function finishAjax(id, response) {
$('#loading').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
</script>
I expected to disappear when successfully but unfortunately it is still there

Add id attribute in form tag and use that id to reset form data in finishAjax function like:
document.getElementById(' ID THAT MENTIONED IN FORM TAG ').reset();

You should reset the from by adding an Id to from like
<form role="form" id ="myFrom">
and then reset from, once you received response from server and want to clear the form values
document.getElementById('myFrom').reset();
You can add this reset logic in finishAjax function
function finishAjax(id, response) {
$('#loading').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
document.getElementById('myFrom').reset();
}

how to give the country,state list is dynamically in input text field using j query for editing

My question is how to get drop down list without using select tag in input text field. I am getting the dynamical country and state list in json but i am struggling how to display the list in jsp form ,please help.
< script >
$(document).ready(function() {
$.getJSON("<c:url value='/user/getUserProfileDetails'/>", {
ajax: 'true'
}, function(data) {
var profileDetails = data;
$("#ucountry").val(data.getProfileDetails[0].country);
$("#ustate").val(data.getProfileDetails[0].state);
});
}); <
/script>
<div class="form-group">
<label for="country"><span class="req"> </span> Country: </label>
<input required type="text" name="ucountry" id="ucountry" class="form-control ucountry" placeholder="country" />
</div>
<div class="form-group">
<label for="state"><span class="req"> </span> State: </label>
<input required type="text" name="ustate" id="ustate" class="form-control ustate" placeholder="state" />
</div>
As the picture shown, my output is coming but i want to put it in input text field drop down list. I am not familiar how to write this code.

form action change based on radio button selection in angular js

Now i have a form and two radio buttons.
Based on which radio button is selected I have to change my forms action.
here is the code
<form action={{action}} name="payform" method="post">
<div class="form-group">
<div class="radio radio-text">
<label>
<input type="radio" ng-model="cash" ng-click="paymethod('cash')" name="payment" value="cash">Cash
</label>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<div class="radio radio-text">
<label>
<input type="radio" ng-model="online" ng-click="paymethod('online')" name="payment" value="online">Online
</label>
</div>
</div>
<button class="btn btn-success" name="submit" type="submit">Submit</button>
</form>
And here is the controller code
$scope.paymethod = function(ptype){
alert("hi");
if(ptype=="cash"){
$scope.action = "food.php";
}
else if(ptype=="online"){
$scope.action = "online.php";
}
}
I used alert in the function to check if the function is being called or not. And alert is working it means function is being called but when i click submit nothing happens.

Not exactly what you asked for, but it solves your problem:
Prepend your form fields ng-models with formData.
Add ng-submit to your form
Use that function to place an $http request
Very basic example:
HTML:
<form name="payform" ng-submit="submitForm()">
<input ng-model="formData.value1" />
<input ng-model="formData.value2" />
<button type="submit"></submit>
</form>
JS:
$scope.submitForm = function submitForm() {
$http.post($scope.ptype + '.php', $scope.formData).then(
function success(response) {
// do something
},
function error(response) {
// not good
}
};
Because of prefixing your form ng-model attributes with formData, you have all fields contained in one object, which you can easily use when placing a POST request.

How to get the value of Text box that is triggered by the radio button using jquery in the following code

In my test case the user is given two options i.e ielts or toefl. If the user selects ielts then an input box opens and he enters his ielts score. What I'm looking for is to capture that value that is entered in the input box. Below is my code:
<div id='show-me' style='display:none' class="ds">
<label for="number" id="uel">IELTS:</label>
<input type="text" class="form-control" placeholder="Example:6.5" id="ranju" name="toefl" reuqired/>
</div>
<div id='touch-me' style='display:none'>
<label for="number" id="uel">TOFEL:</label>
<input type="text" class="form-control" name="fle" placeholder="Example:90" id="ranju" required/>
</div>
<script>
$('input[type=submit]').click(function () {
if (($('input[name=cgpa]').val() != '') && $('input[name=gre]').val() != '')) {
jQuery.noConflict();
$("#myModel").modal('show');
console.log($("input[name=test]:checked").val());
} else {
alert("Enter details");
}
});
</script>
Here is how it should work:
step 1: User clicks on one of the radio buttons
step 2: A text box
related to the radio button opens
step 3: The user enters a value
step 4: console.log(-----) should print the captured value

Recreate your html code:
<input type="radio" name="type" value="ielts"/> IELTS <input type="radio" name="type" value="tofel"/> TOFEL
<div id='show-ielts' style='display:none'>
<label for ="number" id="uel">IELTS:</label>
<input type="text" class="form-control" placeholder="Example:6.5" name="ielts" reuqired/>
</div>
<div id ='show-tofel' style='display:none'>
<label for ="number" id="uel">TOFEL:</label>
<input type="text" class="form-control" name="tofel" placeholder="Example:90" required/>
</div>
<br/>
<input type="submit" value="submit"/>
And then the javascript code:
$(document).ready(function() {
// listen the radio button changed event and display the target field.
$('input[name="type"]').change(function() {
$('#show-ielts, #show-tofel').hide();
$('#show-' + $(this).val()).show();
});
// when submit
$('input[type="submit"]').click(function() {
var target_field = $('input[type="radio"]:checked').val();
// console your target field value
console.log(target_field + ' value is: ' + $('input[name="' + target_field + '"]').val());
});
});