JQuery populate form depending on select option selected - javascript

I am trying to add some form content depending on the option selected by a user.
For example if the user selects form 1 option the form is populated with different content that if the user selects option 2
<select>
<option>Form 1</option>
<option>Form 2</option>
</select>
<form>
Here we get either form 1 content or form 2 content depending on the select option selected by user.
</form>
//Form 1 content
<input type="text" value="something" />
<input type hidden="something here" />
//Form 2 content
<input type="text" value="something else here" />
<input type hidden="something else here" />
How can I do this using jquery?

Try this: http://jsfiddle.net/QUbEE/1/
$('select').change(function () {
if ($('option:selected', this).val() == 1) {
//$('form').hide();
$('#form-1').html($('<input />').attr({
'id': 'textBox1',
'value': 'Something is here'
}));
} else {
$('#form-1').html($('<input />').attr({
'id': 'textBox2',
'value': 'Something ELSE is here'
}));
}
});
Create elems depends on the change event and then just replace the html of the form with the new input with new values.

As you mentioned in your comment that the content can be hard-coded then you may write both the forms and place that forms in different divs and toggle the visibility of the div depending upon the selection made from the drop-down list
For example, say your form 1 is in div1
<div id="div1" class="formDiv">
<input type="text" id="form1" value="something" />
<input type hidden="something here" />
</div>
And your form2 is in div2
<div id="div2" class="formDiv">
<input type="text" id="form2" value="something" />
<input type hidden="something here" />
</div>
In your CSS hide both the div (using class -- as example)
.formDiv {
display: none;
}
Say your drop-down looks like this
<select id="selectForm">
<option value="div1">Form 1</option>
<option value="div2">Form 2</option>
</select>
Now when the user select from the drop-down list at that point change the visibility of the divs
$('#selectForm').on('change',function(){
$('.formDiv').hide();
var formID = $('#selectForm').val();
$(formID).css('display', 'block');
});
This is just an example, you can give your own IDs and CLASSes as per the feasibility and efficiency.
Hope this helps

I would suggest you to keep it with two separated forms. And leave them visible! So then with javascript you can hide both forms and show the relevant one. This way if the browser does not support javascript the forms will still be usable:
<select id="toggle-forms">
<option value="1">Form 1</option>
<option value="2">Form 2</option>
</select>
<form id="form-1" class="form-to-toggle" acvtion="" method="">
<input type="text" value="something" />
<input type hidden="something here" />
<input type="submit" value="submit form 1"/>
</form>
<form id="form-2" class="form-to-toggle" acvtion="" method="">
<input type="text" value="something" />
<input type hidden="something here" />
<input type="submit" value="submit form 2"/>
</form>
<script>
$('#toggle-forms').on('change', function() {
$('.form-to-toggle').hide();
$('#form-'+this.value).show();
}).change();
</script>
See it in action: http://jsbin.com/iwocid/1

Something like this? When you chose option form 2 you will add testing to the input in form 2
<select>
<option value="1">Form 1</option>
<option value="2">Form 2</option>
</select>
//Form 1 content
<input type="text" id="form1" value="something" />
<input type hidden="something here" />
$('select').on('change',function(){
$('input#form'+this.value).val('testing');
});

Add an id to form. THen use document.getElementById('idname').innerHTML to fill value

I would suggest this(as discussed with u)
<select id='this'>
<option value="Form_1">Form 1</option>
<option value="Form_2">Form 2</option>
</select>
<form id='Form_1' style='display:none'>
form1 content
</form>
<form id='Form_2' style='display:none'>
form2 content
</form>
and js
$(document).ready(function() {
$('#this').change(function () {
var form = $('#this').val();
$('#'+form).show();
});
});

Related

Redirect on submit based on search query and location

I am trying to add a search feature based on a text input and a drop-down.
So I am trying to make it work with the following form fields:
Text input {text_1}
Drop-down (2 options)
Submit button
If first option is selected in the drop-down the form should be submitted to https://url1/?={text_1}, if second option is selected it should be submitted to https://url2/?={text_1}.
I have written so far:
<form>
<input type="text" id="text_1" name="text_1" value="test" data-alias="" class="form-control">
<select id="selectlist_1" name="selectlist_1" data-alias="" class="form-control">
<option value="option_1" >Option_1</option>
<option value="option_2" >Option_2</option>
</select>
<button type="submit" id="button_1" name="button_1" class="btn btn-primary" >Submit</button>
</form>
Otherwise, there is also this example: https://hii.com/careers/
I give you an example:
<script>
function go(v){
if (v.url.value===1){
v.action="http://www.google.com"
}else {
v.action="http://www.apple.com"
}
}
</script>
<form onsubmit="go(this)">
<input type="text" name="text_1" value="txt">
<select name="url">
<option value="1">Google</option>
<option value="2">Apple</option>
</select>
<input type="submit" value="submit">
</form>
Augment a simple form with the controls you want, with a script that sets up a behaviour where the form's action attribute value changes with the selection in the drop-down control:
<form>
<input name="foobar" />
<select name="fruit">
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
</select>
<script>
(script => {
const fruit_control = script.closest("form").elements.fruit;
fruit_control.addEventListener("change", ev => {
ev.target.form.action = ({
"apples": "https://url_1",
"oranges": "https://url_2"
})[ev.target.value];
});
})(document.currentScript);
</script>
</form>
The value of the text input control will be sent with the query string, i.e. as ?foobar=... at the end of the URL, as the form is submitted, to the URL that's correspondent with the option selected in the drop-down.
Whether you have a submit button at the end of the form, or not, makes no difference to the behaviour of the form because a form may be submitted even without a submit button.
I found a working solution after doing some searches.
Here is solution in case anyone need it.
jQuery('#search_page_form').submit(function() {
// get all the inputs into an array.
var stext = jQuery('#search_page_form #looking-for').val();
var cars = jQuery('#search_page_form #cars').val();
var url = '';
if(cars == 'nns'){
var url = 'https://careers.huntingtoningalls.com/search/?searchby=location&createNewAlert=false&q='+stext;
}else if(cars == 'mt'){
var url = 'https://tsd-careers.hii.com/en-US/search?keywords='+stext;
}else if(cars == 'is'){
var url = 'https://careers.huntingtoningalls.com/search/?searchby=location&createNewAlert=false&q='+stext+'&locationsearch=Pascagoula%2C+MS&geolocation=';
}else if(cars == 'ch'){
var url = 'https://careers.huntingtoningalls.com/search/?searchby=location&createNewAlert=false&q='+stext+'&locationsearch=Newport+News%2C+VA&geolocation=';
}
if(url != ''){
window.open(url, '_blank');
}else{
alert('Please select Division');
}
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="search_page_form" onsubmit="return false;">
<div class="form-group">
<label for="looking-for">What are you looking for ?</label>
<input type="text" id="looking-for" name="looking-for" class="form-control" placeholder="Enter keywords....">
</div>
<div class="form-group">
<select id="cars" name="cars" class="form-control nice-select">
<option selected="" value="">Division</option>
<option value="nns">NEWPORT NEWS SHIPBUILDING</option>
<option value="mt">MISSION TECHNOLOGIES</option>
<option value="is">INGALLS SHIPBUILDING</option>
<option value="ch">CORPORATE HEADQUARTERS</option>
</select>
</div>
<div class="form-group">
<input type="submit" value="SEARCH" class="btn white-btn search_btn">
</div>
</form>

Opening URL from select list and passing all variables on submit

I have a pretty basic form consisting of 3 elements – 2 text input boxes and a select drop-down list. What I’m looking to achieve when hitting the submit button is to open the page that is listed at the value for the drop-down option and also pass through the values/data entered into the 2 text boxes.
I can get the form to open the correct url from the selected drop-down item, however the two text inputs are not carried through to the opened page.
Can this be done? Any helps would be greatly be appreciated.
<p align="center">
<form method="POST" name="jump" class="center">
Start Time : <INPUT TYPE="TEXT" name="stime" SIZE="10" /><br>
End Time : <INPUT TYPE="TEXT" name="etime" SIZE="10" /><br>
<select name="menu">
<option value="#">Select a Device</option>
<option value="rep-fire.php">Firewall</option>
<option value="rep-wap.php">WAP</option>
.....
</select>
<input type="button" onClick="window.open(document.jump.menu.options[document.jump.menu.selectedIndex].value);" value="GO">
</form>
</p>
I would use url.searchParams and eventListeners
Note I changed name to ID
window.addEventListener("load", function() { // on page load
document.getElementById("jump").addEventListener("submit", function(e) {
e.preventDefault(); // stop submission
const path = document.getElementById("menu").value;
if (path) {
let url = new URL(location.href);
url.pathname = path;
let parms = url.searchParams;
parms.set("stime", document.getElementById("stime").value)
parms.set("etime", document.getElementById("etime").value)
console.log(url.toString());
// window.open(url.toString()); // uncomment when tested
}
})
})
<form method="POST" id="jump" class="center">
Start Time :
<input type="text" id="stime" size="10" /><br> End Time :
<input type="text" id="etime" size="10" /><br>
<select id="menu">
<option value="">Select a Device</option>
<option value="rep-fire.php">Firewall</option>
<option value="rep-wap.php">WAP</option>
</select>
<input type="submit" value="GO">
</form>

How to select from a drop down list AND type in text

I am making form with a select drop down that lists people's names.
I would also like the form to give you the option to select 'Other' and then actually type in someones name (like a normal text input box) if that person is not available from the list.
I don't want the text input part to appear in a separate box underneath the drop down list, I would like it all within the same box.
Is it possible to do with this in vanilla javascript and no jquery plugin?
<form action="" method="post">
<br>
List of people:
<select>
<option>John Doe</option>
<option>Jane Doe</option>
<option>Richard Doe</option>
<option>Other (type name here)</option>
</select>
<br><br>
<input type="submit" value="Submit">
<br><br>
</form>
You could do something like the code below. It's fully adjustable to your likings.
let list = document.getElementById("list");
let other = document.getElementById("other");
function checkValue() {
if (list.value === "Other (type name here)") {
other.style.visibility = "visible";
list.style.display = "none"
} else {
other.style.visibility = "hidden";
}
}
<form action="" method="post">
<br />
List of people:
<select id="list" onchange="checkValue()">
<option>John Doe</option>
<option>Jane Doe</option>
<option>Richard Doe</option>
<option>Other (type name here)</option>
</select>
<input type="text" style="visibility: hidden" id="other" />
<br /><br />
<input type="submit" value="Submit">
<br /><br />
</form>

Change form action based on form select field

I can't get the form action to change based on a user's drop-down selection. What I want to do is have the form redirect to a different page, then the default for the form if a user selects "Student Loans" from the select field named "agency".
In other words, what I want to do is that if someone select "student loans" for the agency, I want the page to submit to /quote/quotes-sl.php instead of quote/quotes.php (the default of the form).
Here is my form code:
<form id="tdhcustom-pre-1-form" accept-charset="UTF-8" onsubmit="submit_function(this)" action="/quote/quotes.php" method="post" name="tdhcustom-pre-1-form">
<input id="edit-lead-source-description" name="lead_source_description" type="hidden" value="test" />
<label class="edit-owed" for="edit-owed"> Amount Owed: <span class="form-required" title="This field is required.">*</span>
</label><select id="owed" class="form-select required" name="owed">
<option selected="selected" value="">Select...</option>
<option value="$10,000 to $14,999">$10,000 to $14,999</option>
<option value="$15,000+">$15,000+</option>
</select>
<label class="edit-agency" for="edit-agency"> Problem With: <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">Federal Taxes</option>
<option value="STATE">State Taxes</option>
</select></div>
<input id="edit-submit" class="form-submit" height="31" name="submit" src="test.com/test.jpg" 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" />
</form>
Here is the javascript:
<script>
function submit_function(form) {
var selected = document.getElementById('Agency');
var dataset = selected[selected.selectedIndex].dataset;
if (dataset.action) {
form.action = dataset.action;
}
return true;
};
</script>
Add trigger on selected option val = "Student Loan" , then change attribute "action" form to url "/quote/quotes-sl.php"
$('#agency').on('change',function(){
var selected = $(this).val();
if(selected == "Student Loan")
$('#tdhcustom-pre-1-form').prop('action',"/quote/quotes-sl.php");
});
CMIIW :D
You want to change the form action based on an onchange event from your <select> ... but you'll also want to remove the onsubmit attribute from your form, like so:
<form id="tdhcustom-pre-1-form" accept-charset="UTF-8" action="/quote/quotes.php" method="post" name="tdhcustom-pre-1-form">
Assuming you're going to have data attributes on all the options like this:
<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-s2.php">Federal Taxes</option>
<option value="STATE" data-action="/quote/quotes-s3.php">State Taxes</option>
</select>
You can just replace your <script> block with:
<script>
(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');
}
})();
</script>
That's pure JavaScript - so without jQuery (or any other framework).

How to bring on second condition input form when selected dropdown item in PHP

Task:
To create a dropdown list for option values:"Name1...Name2...Name3...Others". Hence, when a user were to click on the option 'Others', it will generate an additional form fields for the user to enter and they are: "Name, Rego No., Address".
What has been done:
I have created the following dropdown list as shown:
<p>
<!--Input select box with options: Name1...Name2...Name3...Others-->
<select name ="Name" id="NameDetails">
<option value ="0" selected = "selected"> Select Name..</option>
<option value ="Name 1"> Name1</option>
<option value ="Name 2"> Name2</option>
<option value ="Name 3"> Name3</option>
<option value = "Others"> Others</option>
</select>
</p>
Hence, the dropdown list is able to be shown. Furthermore, I have also created the html version for the 3 additional fields as shown below:
<p>
<input type="text" name="Name" id="Name" value="Name" title="Name" class="defaultValue required" tabindex="7" />
<div id="searchNameResultsContainer"></div>
<div id="errorSearchNameResultsContainer" class="rounded errorSearchResultsContainer yui-ac-container"></div>
</p>
<p>
<input type="text" name="Rego No." id="Rego No." value="Reg No." title="Reg No." class="leftCol defaultValue required validateInput formatNumber" tabindex="8" />
</p>
....(Identical for "Address" field)
Issue:
At this point, I am stuck at how to call the additional 3 fields when users select 'Others' from the dropdown list. I have tried to use the "if..else" condition but am stuck when I tried to input the above code within if statement.
Hence, could anyone please help? Thanks.
code edit:
<div>
<p>
<!--Input selectbox with options: Name1...Name2...Name3...Others-->
<select name ="Name" id="NameDetails" onchange = "return val(this.value);">
<option value ="0" selected = "selected"> Select Agency..</option>
<option value ="Name 1"> Name1</option>
<option value ="Name 2"> Name2</option>
<option value ="Name 3"> Name3</option>
<option value = "Others"> Others</option>
</select>
</p>
<!-- Set Conditional check, if user clicks Others, direct to input field: Name, Registration Number, Address-->
<div id = "extradiv" style ="display:none">
<p>
<input type="text" name="Name" id="Name" value="Name" title="Name" class="defaultValue required" tabindex="7" />
<div id="searchNameResultsContainer"></div>
<div id="errorNameCompanyResultsContainer" class="rounded errorSearchResultsContainer yui-ac-container"></div>
</p>
<p>
<input type="text" name="RegistrationNum" id="RegistrationNum" value="Registration Num" title="Registration Num" class="leftCol defaultValue required validateInput formatNumber" tabindex="8" />
</p>
<p>
<input type="text" name="Address" id="Address" value="Address" title="Address" class="defaultValue required signupinput_txt" tabindex="9" />
<div id="searchAddressResultsContainer" class="hide searchResultsContainer"></div>
<div id="errorSearchAddressResultsContainer" class="rounded errorSearchResultsContainer yui-ac-container"></div>
</p>
</div>
</div>
<script>
function val(x)
{
if (x =="Others" )
{
document.getElementById("extradiv").style.display ="block";
}else
{
document.getElementById("extradiv").style.display = "none";
}
}
</script>
Use Jquery, put those 3 extra field in a div with id #extradiv and set its style as display:none to keep is hidden on load.
<div id="extradiv" style="display:none">
<!-- 3 extra fields -->
</div>
<script type="text/javascript">
$('#NameDetails').on('change',function(){
$('#extradiv").hide();
var changeVal = $("#NameDetails").val();
if(changeVal == "Others){
$("#extradiv").show();
});
</script>
You have to use javascript or jquery.
Just wrap your additional form elements under div and give it id e.g other_ele and also made that div display:none by default using css.
Just try that code below i have used javascript for this
First on your select tag use onchange like:
<select name ="Name" id="NameDetails" onchange="return val(this.value);">
This onchange will call val function
And writ your script like that
<script>
function val(x)
{
if(x == "Others")
{
document.getElementById("other_ele").style.display = "block";
}
else
{
document.getElementById("other_ele").style.display = "none";
}
}
</script>
Note other_ele is id of your div in which you have wrapped your additional form elements.
Hope this will work for you

Categories