Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I created this simple form with a text box, check box, select option list and a Submit button using html. By default submit button is disable. After user fills all the text box and select a option from the select box and check the check box, submit button must be enable. How can I do with java script. Thank you.
Here is my code,
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<input type="text" id="u-name" name="username" placeholder="Username" /><br/><br>
<input type="text" id="u-age" name="age" placeholder="Age" /><br/><br>
<select id="u-type">
<option>Choose</option>
<option>Type 1</option>
<option>Type 2</option>
<option>Type 3</option>
</select> <br> <br>
<label class='checkbox-inline'>
<input type='checkbox' name='c-box' id='c-box'>Check Me
</label>
<br>
<input type="submit" id="Save" value="Save" disabled />
</form>
</body>
</html>
You'd have to track the state of each of the inputs. When all the inputs are filled out with valid data, the submit button will be enabled.
Like this:
const submitBtn = document.getElementById('Save')
const uName = document.getElementById('u-name')
const uAge = document.getElementById('u-age')
const uType = document.getElementById('u-type')
const cBox = document.getElementById('c-box')
// run this function whenever the values of any of the above 4 inputs change.
// this is to check if the input for all 4 is valid. if so, enable submitBtn.
// otherwise, disable it.
const checkEnableButton = () => {
submitBtn.disabled = !(
uName.value &&
uAge.value &&
cBox.checked &&
uType.value !== 'Choose'
)
}
uName.addEventListener('change', checkEnableButton)
uAge.addEventListener('change', checkEnableButton)
uType.addEventListener('change', checkEnableButton)
cBox.addEventListener('change', checkEnableButton)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<input type="text" id="u-name" name="username" placeholder="Username" />
<br><br>
<input type="text" id="u-age" name="age" placeholder="Age" /><br/><br>
<select id="u-type">
<option>Choose</option>
<option>Type 1</option>
<option>Type 2</option>
<option>Type 3</option>
</select>
<br><br>
<label class='checkbox-inline'>
<input type='checkbox' name='c-box' id='c-box'>Check Me
</label>
<br>
<input type="submit" id="Save" value="Save" disabled />
</form>
</body>
</html>
Related
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>
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>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm looking to create an online quote based on two variables.
The user needs to enter a postcode, and then select an item from a dropdown (1, 2 or 3). Each drop down has a different cost (£10.00, £20.00 and £30.00).
The user must enter their postcode, select 1/2/3 and then press "Get Quote".
If their postcode does not start with a B followed by a number, then text must appear informing that we do not deliver to this area. If the postcode is within B1-B99 then text must appear saying the cost is £10/£20/£30 dependent on which dropdown item they have selected.
I have managed to get the drop down and price alert to work but I am unsure how you integrate the postcode function above this (also I don't want an alert I want the cost to appear underneath the button).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="quote" style="padding:5%;">
Gain an online quotation for your skip!</center>
<form name="priceCalc" action="">
<input class="form-control input-box" id="postcode1" type="text" name="postcode" placeholder="">
<select name="Product">
<option value="Please Select">Please Select</option>
<option value="10">1</option>
<option value="20" >2</option>
<option value="30">3</option>
</select>
<input type="button" value="Get Quote" onclick="price();"><br>
</form>
<script>
function price() {
var Amt = document.priceCalc.Product;
var price = Amt.value;
alert(price);
}
</script>
</body>
</html>
Any help would be greatly appreciated, I am no Javascript expert but this one is bugging me! Thanks
You can use a regular expression to check the postcode.
/[B][1-9]-[B][0-99]/
Something like this:
<div id="quote" style="padding:5%;">
Gain an online quotation for your skip!
<form name="priceCalc" action="">
<input class="form-control input-box" id="postcode1" type="text" name="postcode" placeholder="">
<select name="Product">
<option value="Please Select">Please Select</option>
<option value="10">1</option>
<option value="20">2</option>
<option value="30">3</option>
</select>
<input type="button" value="Get Quote" onclick="price()" /><span id="priceOut"></span>
<br/>
</form>
</div>
<script>
function price() {
var postcode = document.priceCalc.postcode;
var Amt = document.priceCalc.Product;
var price = Amt.value;
var regex = /[B][1-9]-[B][0-99]/;
if (!isNaN(price)) {
if (postcode.value.match(regex) !== null) {
document.getElementById('priceOut').innerHTML = "£" + price;
} else {
document.getElementById('priceOut').innerHTML = "We do not deliver to this area.";
}
} else {
document.getElementById('priceOut').innerHTML = price;
}
}
</script>
Your question is not precise enough, but here is what I've understood, you can use this code :
<div id="quote" style="padding:5%;">
Gain an online quotation for your skip!
<form name="priceCalc" action="">
<input class="form-control input-box" id="postcode1" type="text" name="postcode" placeholder="">
<select name="Product">
<option value="Please Select">Please Select</option>
<option value="10">1</option>
<option value="20" >2</option>
<option value="30">3</option>
</select>
<input type="button" value="Get Quote" onclick="price()" /><span id="priceOut"></span><br/>
</form>
</div>
<script>
function price() {
var Amt = document.priceCalc.Product;
var price = Amt.value;
document.getElementById('priceOut').innerHTML = price;
}
</script>
The price will be displayed next to the button (what does underneath means exactly?)
You can move the #priceOut div to place the price wherever you want.
I am very new to HTML and JavaScript...
I need your help to construct a website URL based on TextBox inputs in HTML/JavaScript?
I am looking for a HTML/JavaScript code to allow user to
1) Select an Option from Dropdown list
2) Enter a number
using which a URL should be generated
For example:
Drop down list has #Years to select and user select year 2014
and in text box user gives input a number as 1234
Below is the peace of code I have, but not able to get the desired result :(
<select name="SelectYear">
<option value="13" ID="13">2013</option>
<option value="12" ID="12">2012</option>
</select>
<select name="SelectMonth">
<option value="J" ID="J">June</option>
<option value="D" ID="D">December</option>
</select>
<input type="text" name="EnterRollNum" ID="EnterRollNum">
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
var iYear = $("select#SelectYear").val()
var iMonth = $("select#SelectMonth").val()
var iRollNum = $("select#EnterRollNum").val()
document.getElementById("demo").innerHTML = Link
}
</script>
Any help is much appreciated.
<form id="myForm" action="some.php" method="GET">
<select name="SelectYear">
<option value="13" ID="13">2013</option>
<option value="12" ID="12">2012</option>
</select>
<select name="SelectMonth">
<option value="J" ID="J">June</option>
<option value="D" ID="D">December</option>
</select>
<input type="text" name="EnterRollNum" ID="EnterRollNum" />
<input type="submit" value="submit" />
</form>
<p id="demo"></p>
<script>
$('#myForm').submit(function(e){
e.preventDefault();
var url = $(this).attr('action')+'?'+$('#myForm').serialize();
$('#demo').html(' Link ');
});
</script>
You can see the working fiddle - http://jsfiddle.net/grvngr/fak1s583/
Hope this helps!
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();
});
});