I believe this would be a stupid question. However, i am going nuts to figure out on how to resolve this problem.
I am trying to design a small web app, in which when you select an option from the drop-down, information in the text box fills automatically.
This works perfectly in firefox, however does not work in chrome.
Below is the code:
<!DOCTYPE html>
<html>
<script>
function myCopy() {
var copyText = document.getElementById("myText");
copyText.select();
document.execCommand("Copy");
}
function emaila() {
document.getElementById("myText").value += 'I hope you are going good.\n\n'
}
function emailb() {
document.getElementById("myText").value += 'As per our recent conversation, this email is in regards to your Workwear inquiry. Please find the proof of delivery which is attached to this email.\n\n'
}
</script>
<body>
<select class="block2" autocomplete="off">
<option value="">Email Template's</option>
<option value="1" onClick="emaila()">Greeting</option>
<option value="3" onClick="emailb()">POD</option>
<option value="4" onClick="emailc()">Forward to Relevant Team</option>
<option value="5" onClick="emaile()">Sales Lead</option>
<option value="2" onClick="emaild()">Thank You</option>
</select>
<form action="" method="post" enctype="text/plain">
<textarea id="myText" class="textbox"></textarea>
<div>
<button type="button" class="block11" onClick="document.getElementById('myText').value = ''">Clear</button></div>
<div><button type="button" class="block12" onclick="myCopy()">Copy</button></button></div>
</body>
It would be amazing if someone could enlighten me on this?
You have to call the function onchange event of the select. You cant call function on click of options
function myCopy() {
var copyText = document.getElementById("myText");
copyText.select();
document.execCommand("Copy");
}
function func(){
var x=document.querySelector('select').selectedIndex;
if(x==1)
emaila();
if(x==2)
emailb()
}
function emaila() {
document.getElementById("myText").value += 'I hope you are going good.\n\n'
}
function emailb() {
document.getElementById("myText").value += 'As per our recent conversation, this email is in regards to your Workwear inquiry. Please find the proof of delivery which is attached to this email.\n\n'
}
<!DOCTYPE html>
<html>
<body>
<select class="block2" autocomplete="off" onchange="func()">
<option value="">Email Template's</option>
<option value="1" onClick="emaila()">Greeting</option>
<option value="3" onClick="emailb()">POD</option>
<option value="4" onClick="emailc()">Forward to Relevant Team</option>
<option value="5" onClick="emaile()">Sales Lead</option>
<option value="2" onClick="emaild()">Thank You</option>
</select>
<form action="" method="post" enctype="text/plain">
<textarea id="myText" class="textbox"></textarea>
<div>
<button type="button" class="block11" onClick="document.getElementById('myText').value = ''">Clear</button></div>
<div><button type="button" class="block12" onclick="myCopy()">Copy</button></div>
</form>
</body>
</html>
You can call onchange event on select and then use conditional statement to set the textarea value
<select class="block2" id="mySelect" onchange="myOption()" autocomplete="off">
<option value="">Email Template's</option>
<option value="1" >Greeting</option>
<option value="3">POD</option>
<option value="4">Forward to Relevant Team</option>
<option value="5">Sales Lead</option>
<option value="2">Thank You</option>
</select>
<form action="" method="post" enctype="text/plain">
<textarea id="myText" class="textbox"></textarea>
<div>
<button type="button" class="block11" onClick="document.getElementById('myText').value = ''">Clear</button></div>
<div><button type="button" class="block12" onclick="myCopy()">Copy</button></button></div>
<script>
function myCopy() {
var copyText = document.getElementById("myText");
copyText.select();
document.execCommand("Copy");
}
function myOption() {
var select = document.getElementById("mySelect").value;
if (select == '1') {
document.getElementById("myText").value = "I hope you are going good.\n\n";
}
if (select == '3') {
document.getElementById("myText").value = "As per our recent conversation, this email is in regards to your Workwear inquiry. Please find the proof of delivery which is attached to this email.\n\n";
}
}
</script>
Related
I have two HTML datalist inputs (for first and second language) that can't be the same. Instead of not accepting the form, I want the first option chosen to be removed dynamically from the second datalist but I can't make anything work with JQuery.
Any suggestions with React are also welcome.
Many thanks!😊
<form autocomplete="on" method="POST">
<input id="fLang" type="text" list="language" onchange="removeLang()" placeholder="First language">
<input id="sLang" type="text" list="language" onchange="removeLang()" placeholder="Second language">
<datalist id="language">
<option value="Chinese">China</option>
<option value="English">United Kingdom</option>
<option value="Russian">Russia</option>
</datalist>
</form>
You can achieve this using jQuery by using two datalist elements and detecting the change in the inputs as follows:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form autocomplete="on" method="POST">
<input id="fLang" type="text" list="flanguage" placeholder="First language">
<input id="sLang" type="text" list="slanguage" placeholder="Second language">
<datalist id="flanguage">
<option id="fChinese" value="Chinese">China</option>
<option id="fEnglish" value="English">United Kingdom</option>
<option id="fRussian" value="Russian">Russia</option>
</datalist>
<datalist id="slanguage">
<option id="sChinese" value="Chinese">China</option>
<option id="sEnglish" value="English">United Kingdom</option>
<option id="sRussian" value="Russian">Russia</option>
</datalist>
</form>
</body>
<script>
var fRemovedItem;
var sRemovedItem;
$(document).ready(function () {
$('#fLang').on('change', function () {
let first = $('#fLang').val();
if (first != '') {
sRemovedItem = $(`#sLanguage option[value='${first}']`);
sRemovedItem.remove();
} else {
let sDatalist = $("#slanguage");
console.log(sDatalist);
console.log(sRemovedItem);
console.log(sDatalist.append(sRemovedItem));
}
});
$('#sLang').on('change', function () {
let second = $('#sLang').val();
if (second != '') {
fRemovedItem = $(`#fLanguage option[value='${second}']`);
fRemovedItem.remove();
} else {
let fDatalist = $("#flanguage");
console.log(fDatalist.append(fRemovedItem));
}
});
});
</script>
</html>
UPDATE: Removed items never go back if users remove the text in fLang or sLang. This situation was fixed with new code.
This question already has answers here:
How to prevent form from being submitted?
(11 answers)
Closed 5 years ago.
i want to stop reloading page when i don't choose category and click on submit button. can anybody help me?
function check() {
var select = document.getElementById("category").value;
if (select == -1) {
return alert("You didn't choose category !!!");
}
}
<form action="#" method="POST" id="form" name="form">
<select name="category" id="category">
<option value="-1">Select category</option>
<option value="1">News</option>
<option value="2">Sport</option>
<option value="3">World</option>
<option value="4">Music</option>
</select>
<input type="submit" value="submit" id="submit" name="submit" onclick="check();" />
</form>
You need to return false from the function to prevent the form from beeing submitted.
<input type="submit" value="submit" id="submit" name="submit" onclick="return check();" />
function check() {
var select = document.getElementById("category").value;
if (select == -1) {
alert("You didn't choose category !!!");
return false;
}
}
<form action="#" method="POST" id="form" name="form">
<select name="category" id="category">
<option value="-1">Select category</option>
<option value="1">News</option>
<option value="2">Sport</option>
<option value="3">World</option>
<option value="4">Music</option>
</select>
<input type="button" value="submit" id="submit" name="submit" onclick="check();" />
An alternative response is to set the type in "button" with this method you can check the state without reload the page.
And in the javascript if you want to send the submit you can put this code.
document.getElementById("form").submit();
Here there is an example https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_submit
Hi, i want to use search by id and search by date
<select id="menu">
<option value="<?=site_url('web/execute_search')?>">By Id</a></option>
<option value="<?=site_url('web/execute_searchs')?>">By Date</a></option>
</select>
<input type="text" name="search" />
<input type="submit" value="Submit" />
I have combo box, when i select search by id and submit so it will go to Controller ('web/execute_search') , then if i select date and submit, go to Controller ('web/execute_search').
Try this code:
<select id="menu" onchange="option()">
<option value="1" content="1">By Id</a></option>
<option value="2" content="2">By Date</a></option>
</select>
<input type="text" name="search" />
<input type="submit" value="Submit" />
then here's javascript:
<script>function option(){
var x = document.getElementById("menu").value;
if (x==1){
window.location.href = "execute_search";
}
if (x==2){
window.location.href = "execute_searchs";
}}</script>
Using Javascript
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function findID()
{
var e = document.getElementById("menu");
var clicked = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;
if(clicked ==1)
{
window.location.href = "web/execute_search";
}
if (clicked ==2)
{
window.location.href= "web/execute_searchs";
}
alert(clicked);
alert(text);
}
</script>
</head>
<body>
<select id="menu" name="menu">
<option value="1">By Id</option>
<option value="2">By Date</option>
</select>
<input type="text" name="search" />
<input type="submit" value="Submit" onclick="findID();" />
</body>
</html>
used e.options[e.selectedIndex].value; to get the value.
used e.options[e.selectedIndex].text; to get the text, means the way you want to sort.
Hope it will help you!!
I have this code:
<script type="text/javascript">
function populate(){
s1 = document.ins_form.servizio.value;
valori = s1.split("|");
document.ins_form.codice.value = valori[0];
document.ins_form.costouno.value = valori[1];
}
</script>
<form action="" method="post" name="ins_form" id="ins_form">
<select name="servizio" id="servizio" onchange="populate()">
<option value="">Choose..</option>
<option value="100|10">choice one</option>
<option value="302|32">choice two</option>
</select>
<input type="text" name="codice" id="codice" readonly="readonly" />
<input type="text" name="costouno" id="costouno" readonly="readonly" />
</form>
This is referring to specific input fields (servizio,codice,costouno) that will be populated by user's choices, with different values, and it works nicely.
I'm not a magician with JScript so I can't find a solution to transform this function in a generic one, to be able and use it on other fields dynamically generated and that would be like: servizio1,codice1,costouno1 and servizio2,codice2,costouno2 and servizio3 ecc...
Hope it's kinda clear, thanks for your help.
You can pass the form elements themselves to the function:
<script type="text/javascript">
function populate(field1, field2, fromDelimitedString){
valori = fromDelimitedString.split("|");
field1.value = valori[0];
field2.value = valori[1];
}
</script>
<form action="" method="post" name="ins_form" id="ins_form">
<select name="servizio" id="servizio" onchange="populate(document.getElementById('codice'),
document.getElementById('costuono'), document.getElementById('servizio').value)">
<option value="">Choose..</option>
<option value="100|10">choice one</option>
<option value="302|32">choice two</option>
</select>
<input type="text" name="codice" id="codice" readonly="readonly" />
<input type="text" name="costouno" id="costouno" readonly="readonly" />
</form>
I have a form for example:
<form>
<ul>
<li>
<select name="choose">
<option value="0">1</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</li>
<li><h2>No. Of person</h2></li>
<input type="text" name="ref_person"id="field" value="" />
<li><h2>earning of person:</h2></li>
<input type="text" name="ear_person" id="field" value="" />
</ul>
</form>
so, when I choose option:1 both the input fields must be filled with no. let say, No. of person = 3 and earning of person = $5.
Your question should be as well written as you can make it, including valid, semantic HTML.
Also, a question should contain the code you have tried, an explanation of what you have tried, where it's going wrong and exactly what you expect it to do, including some example input and output.
The following may help. Note that element IDs must be unique and that forms should use semantic markup (e.g. don't use a list to present it, don't put headings inside lists, use labels, group elements using fieldsets, etc.).
You can use the select element's change event to get the value and text of the selected option and display it elsewhere in the form. You can also reference form controls as named properties of the form, which is handy and more straight forward than using getElementById.
In the code, a reference to the select is passed to the function using this. Every form control has a form property that is a reference to the form that it's in. The rest should be easy enough to understand, but please ask if you need other help.
function getPerson(select) {
var form = select.form;
form.ref_person.value = select.options[select.selectedIndex].text;
form.ear_person.value = select.value;
}
<form>
<fieldset><legend>Person and earning</legend>
<label for="personSelect">Select a person
<select name="choose" id="personSelect" onchange="getPerson(this)">
<option value="0">1</option>
<option value="100">2</option>
<option value="500">3</option>
</select>
</label>
<br>
<label for="personNumber">No. Of person:
<input type="text" name="ref_person"id="personNumber"></label>
<label for="personEarning">Earning of person:
<input type="text" name="ear_person" id="personEarning"></label>
</fieldset>
</form>
function getPerson(select) {
var form = select.form;
form.ref_person.value = select.options[select.selectedIndex].getAttribute('per');
form.ear_person.value = select.value;
}
<form>
<fieldset><legend>Person and earning</legend>
<label for="personSelect">Select a person
<select name="choose" id="personSelect" onchange="getPerson(this)">
<option per="3" value="0">1</option>
<option per="9" value="100">2</option>
<option per="27" value="500">3</option>
</select>
</label>
<br>
<label for="personNumber">No. Of person:
<input type="text" name="ref_person"id="personNumber"></label>
<label for="personEarning">Earning of person:
<input type="text" name="ear_person" id="personEarning"></label>
</fieldset>
</form>
Here is a code sample that uses the onchange event to copy values to the textboxes.
<script type="text/javascript">
function selectOnChange(obj) {
var val = obj.options[obj.selectedIndex].value;
var text = obj.options[obj.selectedIndex].text;
document.getElementById("field1").value = val;
document.getElementById("field2").value = text;
}
</script>
</head>
<body>
<div>
<select onchange='selectOnChange(this)' name="choose">
<option value="100">1</option>
<option value="200">2</option>
<option value="300">3</option>
</select>
</div>
<ul><li><h2>No. Of person</h2></li></ul>
<div>
<input type="text" name="ref_person" id="field1" value="">
<ul>
<li><h2>earning of person:</h2></li></ul>
<input type="text" name="ear_person" id="field2" value="" />
</div>
I couldn't get a switch statement to work, so I did it with three if statements, but here is my solution. Fiddle with it yourself to make it as you wish.
<form>
<ul>
<li>
<select name="choose" id="option1" onchange="relatedPrice()">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
</select>
</li>
<li><h2>No. Of person</h2></li>
<input type="text" name="ref_person" id="field1" value="" />
<li><h2>earning of person:</h2></li>
<input type="text" name="ear_person" id="field2" value="" />
</ul>
</form>
<script>
function relatedPrice() {
var e = document.getElementById("option1");
var test = e.options[e.selectedIndex].text;
document.getElementById("field1").value = test;
if(test==1) {
document.getElementById("field2").value = 100;
}
if(test==2) {
document.getElementById("field2").value = 200;
}
if(test==3) {
document.getElementById("field2").value = 300;
}
}
</script>