Below code is about passing the value to the new tab by POST.
My question is the value selected in drop-down list needed to be validated.
As 'select' value is default value. If the default value is selected then some alert must be shown else the remaining behavior is same as below code.
<form action="send_mail.php" name="choose_aff" method="POST">
<select name="company" id="company" class="company_select" style="width:250px;">
<option value="">Select</option>
<option value="abc">abc</option>
<option value="xyz">xyz</option>
</select>
<input class="proceed_btn" type="submit" value="Proceed to mail>>" style="float:right" onclick="this.form.target='_blank';return true;">
</form>
You can validate without external libraries, just using javascript in client side (if you want) You need something like this:
<script type="text/javascript">
function myValidateFunction() {
alert("something happened!");
console.log("something happened!");
//what i want!
}
</script>
...
<form action="send_mail.php" name="choose_aff" method="POST" target="_blank">
<select name="company" id="company" class="company_select" style="width:250px;" onchange="myValidateFunction()">
<option value="">Select</option>
<option value="abc">abc</option>
<option value="xyz">xyz</option>
</select>
<input class="proceed_btn" type="submit" value="Proceed to mail" style="float:right;" />
</form>
Then you should validate the data sent in send_mail.php file
Add target="_blank" to form attributes like this
<form action="send_mail.php" name="choose_aff" method="POST" target="_blank">
I remove a button and then the send_mail.php will open only when value is changed from dropdown. Add dropdown will send value using POST
<form action="send_mail.php" name="choose_aff" method="POST">
<select name="company" id="company" class="company_select" style="width:250px;" onchange="submit()">
<option value="">Select</option>
<option value="abc">abc</option>
<option value="xyz">xyz</option>
</select>
</form>
Related
<div class="form-group mycustom-form-group mt-3">
<label for="exampleFormControlSelect1">What would you like to do:</label>
<form action="" method="POST" id="form1" onclick="mySubmit()">
<select class="form-control" id="exampleFormControlSelect1" >
<option value="1">Image Rollover</option>
<option value="2">Image Preview</option>
<option value="3">Image Slideshow</option>
</select>
<input type="submit" value = "Submit">
In my form when I select an option and submit, I would each option to allow me to do what the option entails,(open an image, create a document.write(),make an image rollover, etc). How can I create a function in each option when I select it and submit? (If my question requires more clarification, please let me know)
you need to add onchange event in select and do whatever you want to do on change of value.
<div class="form-group mycustom-form-group mt-3">
<label for="exampleFormControlSelect1">What would you like to do:</label>
<form action="" method="POST" id="form1" onclick="mySubmit()">
<select class="form-control" id="exampleFormControlSelect1" onchange="yourFunction()">
<option value="1">Image Rollover</option>
<option value="2">Image Preview</option>
<option value="3">Image Slideshow</option>
</select>
<input type="submit" value = "Submit">
Just add onchange event in select and create a function to handle it.
<div class="form-group mycustom-form-group mt-3">
<label for="exampleFormControlSelect1">What would you like to do:</label>
<form action="" method="POST" id="form1" onclick="mySubmit()">
<select class="form-control" onchange="handleSelectChange()" id="exampleFormControlSelect1" >
<option value="1">Image Rollover</option>
<option value="2">Image Preview</option>
<option value="3">Image Slideshow</option>
</select>
<input type="submit" value = "Submit">
You can refer to the document here: https://www.w3schools.com/jsref/event_onchange.asp
Hi I downloaded some html template which I am trying to readjust and I have some code form like this, is it possible that I can change the option "value" into "href" so when client select lets say "Standard Access" and click on the button Buy Now to redirect to the paypal lets say?
Here is the code :
<div class="modal-body">
<form method="POST" action="#">
<div class="form-group">
<input type="text" class="form-control" name="your-name" placeholder="Your Name">
</div>
<div class="form-group">
<input type="text" class="form-control" name="your-email" placeholder="Your Email">
</div>
<div class="form-group">
<select id="ticket-type" name="ticket-type" class="form-control" >
<option value="">-- Select Your Ticket Type --</option>
<option value="standard-access">Standard Access</option>
<option value="pro-access">Pro Access</option>
<option value="premium-access">Premium Access</option>
</select>
</div>
<div class="text-center">
<button type="submit" class="btn">Buy Now</button>
</div>
</form>
</div>
Here you have some example. Probably it's possible to make it better, but I don't know the context.
$('#confirmButton').on('click', function() {
const href = $('#redirect').val();
window.location.href = href;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="redirect">
<option value="" disabled selected>-- Select Your Ticket Type --</option>
<option value="https://www.google.com">Google</option>
<option value="https://stackoverflow.com">Stackoverflow</option>
</select>
<button type="button" id="confirmButton">Confirm</button>
You can add onsubmit listener to your form.
<form method="POST" action="#" onsubmit="myFunction()">...
</form>
<script>
myFunction(){
var x = document.getElementById("ticket-type").value;
if (x== 'standard-access') {window.location.href = "http://www.URL1.html";}
else if (x== 'pro-access') {window.location.href = "http://www.URL2.html";}
return false; // to prevent default submit
}
</script>
I ran into an issue where I have two forms on a page -
A desktop version of the form
A mobile version.
Both forms don't show to the user as it depends on their viewport or device. When the user selects "Student Loan" from the agency drop-down selection (in either form), we want the form submission's action to be /quote/quotes-sl.php instead of the form default of /quote/quotes.php.
The good news is that on the mobile-friendly form (the first form in the code below), the solution works. However, for the desktop form, it does not even though it has the same form id/name. I tried renaming the desktop form to have a different formID/name` and then add another script for that form, but that doesn't work.
Any direction or advice is greatly appreciated.
(function() {
var theForm = document.getElementById('tdhcustom-pre-1-form');
var theSelector = document.getElementById('agency');
theSelector.onchange = function() {
theForm.action = theSelector[theSelector.selectedIndex].getAttribute('data-action');
}
})();
<form id="tdhcustom-pre-1-form" accept-charset="UTF-8" action="/quote/quotes.php" method="post" name="tdhcustom-pre-1-form">
<div>
<input id="edit-lead-source-description" name="lead_source_description" type="hidden" value="1.test" />
<div id="edit-owed-wrapper" class="form-item">
<label class="edit-owed" for="edit-owed"> Tax Debt Owed: <span class="form-required" title="This field is required.">*</span></label>
<select id="edit-owed" class="form-select required" name="owed">
<option selected="selected" value="">Select...</option>
<option value="$30,000 to $39,999">$30,000 to $39,999</option>
<option value="$40,000 to $59,999">$40,000 to $59,999</option>
<option value="$60,000 to $79,999">$60,000 to $79,999</option>
<option value="$80,000 to $99,999">$80,000 to $99,999</option>
<option value="$100,000+">$100,000 +</option>
</select>
</div>
<div id="edit-agency-wrapper" class="form-item">
<label class="edit-agency" for="edit-agency"> Tax Agency: <span class="form-required" title="This field is required.">*</span></label>
<select id="agency" class="form-select required" name="agency">
<option selected="selected" value="">Select Agency...</option>
<option value="Student Loan" data-action="/quote/quotes-sl.php">Student Loan</option>
<option value="Federal" data-action="/quote/quotes.php">Federal</option>
<option value="STATE" data-action="/quote/quotes.php">State</option>
<option value="FEDERAL_AND_STATE" data-action="/quote/quotes.php">Federal and State</option>
</select>
</div>
<input id="edit-submit" class="form-submit" height="31" name="submit" src="http://www.test.com/wp-content/uploads/2009/07/form-submit-6-17-small.png" type="image" value="Submit" width="214" />
<input id="form-5ezy7kqpVIYFiVUgKIyxbp4n6MQ7ZqHuo33GJbq0QZE" name="form_build_id" type="hidden" value="form-5ezy7kqpVIYFiVUgKIyxbp4n6MQ7ZqHuo33GJbq0QZE" />
<input id="edit-tdhcustom-pre-1-form" name="form_id" type="hidden" value="tdhcustom_pre_1_form" />
</div>
</form>
<div class="mycustombanner desk-view">
<img class="wp-image-12546 size-full alignnone" src="http://www.test.com/wp-content/uploads/2009/12/top-form-irs-hardship-status.png" alt="irs hardship status" width="618" height="194" />
<form id="tdhcustom-pre-1-form" accept-charset="UTF-8" action="/quote/quotes.php" method="post" name="tdhcustom-pre-2-form">
<div>
<input id="edit-lead-source-description" name="lead_source_description" type="hidden" value="1.test-desktop" />
<div id="edit-owed-wrapper" class="form-item">
<label for="edit-owed"> Tax Debt Owed: <span class="form-required" title="This field is required.">*</span></label>
<select id="edit-owed" class="form-select required" name="owed">
<option selected="selected" value="">Select...</option>
<option value="$30,000 to $39,999">$30,000 to $39,999</option>
<option value="$40,000 to $59,999">$40,000 to $59,999</option>
<option value="$60,000 to $79,999">$60,000 to $79,999</option>
<option value="$80,000 to $99,999">$80,000 to $99,999</option>
<option value="$100,000+">$100,000 +</option>
</select>
</div>
<div id="edit-agency-wrapper" class="form-item">
<label for="edit-agency"> Tax Agency: <span class="form-required" title="This field is required.">*</span></label>
<select id="agency" class="form-select required" name="agency">
<option selected="selected" value="">Select Agency...</option>
<option value="Student Loan" data-action="/quote/quotes-sl.php">Student Loan</option>
<option value="Federal" data-action="/quote/quotes.php">Federal</option>
<option value="STATE" data-action="/quote/quotes.php">State</option>
<option value="FEDERAL_AND_STATE" data-action="/quote/quotes.php">Federal and State</option>
</select>
</div>
<input id="edit-submit" class="form-submit" height="37" name="submit" src="http://www.test.com/wp-content/uploads/2010/04/form-submit-6-17-1.png" type="image" value="Submit" width="207" />
<input id="form-5ezy7kqpVIYFiVUgKIyxbp4n6MQ7ZqHuo33GJbq0QZE" name="form_build_id" type="hidden" value="form-5ezy7kqpVIYFiVUgKIyxbp4n6MQ7ZqHuo33GJbq0QZE" />
<input id="edit-tdhcustom-pre-1-form" name="form_id" type="hidden" value="tdhcustom_pre_1_form" />
</form>
</div>
It is invalid HTML to have more than one element with the same ID in one document - that's why the selector is failing.
Try giving both forms different IDs, as well as for the select element, for example:
<form id="tdhcustom-pre-1-form1"...
<select id="agency1"...
...
...
<form id="tdhcustom-pre-1-form2"...
<select id="agency2"...
Then you could do:
[
['tdhcustom-pre-1-form1', 'agency1'],
['tdhcustom-pre-1-form2', 'agency2'],
].forEach(([formSelector, agencySelector]) => {
const form = document.getElementById(formSelector);
const agency = document.getElementById(agencySelector);
agency.addEventListener('change', () => {
form.action = agency[agency.selectedIndex].getAttribute('data-action');
});
});
Now that I've looked at your code more, I'm going to say more confidently that sharing the same id between your forms is the problem you're having. This line:
var theForm = document.getElementById('tdhcustom-pre-1-form');
...isn't going to care which form is hidden, and which form is shown. It's always going to return you the same form. Your browser must be favoring the mobile form over the desktop form.
I am trying to populate data in my fields depending on the value selected in the drop down box. I have passed the dropdown option select to the javascript function, but having problem in updating the form fields. Please check my code for the error I've committed.
This is my html code:
<div class="form-ui">
<span class="form-elements reqField">
<select class="dropdown" onchange="populateData(this.options[this.selectedIndex].value,1)">
<option value="1">Please Select</option>
<option value="2">Mrs.Jane Smith</option>
<option value="3">Mr.Junior Smith</option>
</select>
</span>
<span class="form-elements reqField">
<select id="itle1" class="dropdown">
<option value="1">Mr.</option>
<option value="2">Ms.</option>
<option value="3">Mrs.</option>
</select>
</span>
<span class="form-elements">
<input id="FirstName1" type="text" class="text" value="" />
</span>
<span class="form-elements reqField">
<input id="LastName1" type="text" class="text" value="" />
</span>
</div>
And the javascript code:
function populateData(value,person){
if(value==2){
$('#Title'+person).value=3;
$('#FirstName'+person).value="Jane";
$('#LastName'+person).value="Smith";
}
if(value==3){
}
}
jQuery uses val() to get and set values.
So your js function should be
$('#FirstName'+person).val("Jane");
$('#LastName'+person).val("Smith");
and not
$('#FirstName'+person).value="Jane";
$('#LastName'+person).value="Smith";
Also
<select class="dropdown" onchange="populateData(this.options[this.selectedIndex].value,1)">
should be
<select class="dropdown" onchange="populateData(this.value,1)">
quick answer is that I think you need to use val() not value - can't quite remember how it works with select though
http://api.jquery.com/val/
HTML ID error here <select id="itle1" class="dropdown">
Should be Title1 not itle1
Also I think the javascript should look like this
function populateData(value,person){
if(value==2){
$('#Title'+person+' option[value="3"]').attr('selected','selected');
$('#FirstName'+person).val("Jane");
$('#LastName'+person).val("Smith");
}
if(value==3){
}
}
You could use a FORM instead of a DIV, and the attribute name, instead of id.
They were designed a long time ago to manage forms.
You can use jQuery for that, but everything is already built-in in pure Javascript to handle forms.
<form class="form-ui">
<span class="form-elements reqField">
<select class="dropdown" onchange="populateData(this)">
<option value="1">Please Select</option>
<option value="2">Mrs.Jane Smith</option>
<option value="3">Mr.Junior Smith</option>
</select>
</span>
<span class="form-elements reqField">
<select name="title" class="dropdown">
<option value="1">Mr.</option>
<option value="2">Ms.</option>
<option value="3">Mrs.</option>
</select>
</span>
<span class="form-elements">
<input name="FirstName" type="text" class="text" value="" />
</span>
<span class="form-elements reqField">
<input name="LastName" type="text" class="text" value="" />
</span>
</form>
<script>
function populateData(sel){
var form = sel.form,
value = sel.options[sel.selectedIndex].value;
switch(value){
case '3':
form.FirstName.value = 'Junior';
form.LastName.value = 'Smith';
form.title.value = '1';
break;
case '2':
break;
default:
}
}
</script>
I have a form in a webpage where I would like to put the selected item in a drop down list into a testbox. The code I have till now is the following:
<form action = "">
<select name = "Cities">
<option value="----">--Select--</option>
<option value="roma">Roma</option>
<option value="torino">Torino</option>
<option value="milan">Milan</option>
</select>
<br/>
<br/>
<input type="button" value="Test">
<input type="text" name="SelectedCity" value="" />
</form>
I think I need to use javascript .... but any help? :-)
thanks
You can add JavaScript directly into the button:
<input type="button" onclick="
var s = this.form.elements['Cities'];
this.form.elements['SelectedCity'].value =
s.options[s.selectedIndex].textContent">
<script type="text/javascript">
function OnDropDownChange(dropDown) {
var selectedValue = dropDown.options[dropDown.selectedIndex].value;
document.getElementById("txtSelectedCity").value = selectedValue;
}
</script>
<form action = "">
<select name = "Cities" onChange="OnDropDownChange(this);">
<option value="----">--Select--</option>
<option value="roma">Roma</option>
<option value="torino">Torino</option>
<option value="milan">Milan</option>
</select>
<br/>
<br/>
<input type="button" value="Test">
<input type="text" id="txtSelectedCity" name="SelectedCity" value="" />
</form>
In fact you don't need any JS to do that, simply HTML can do it for you as follows:
<form action="a.php" method="post">
<select name = "Car">
<option value="BMW">BMW</option>
<option value="AUDI">AUDI</option>
</select>
<input type="submit" value="Submit">
</form>