I have made a dropdown form with two options, each lead to different URL. I want the selected option lead to its 'URL' ONLY when the submit button is clicked.
I have used the following JS code:
function handleFormSubmit() {
var form = document.querySelector("form");
form.addEventListener("submit", function(event) {
event.preventDefault();
var destination = document.getElementById("destination");
location = destination.options[destination.selectedIndex].value;
});
}
Now, when I click the submit button, it does not navigate to the url specified in value attribute of option. (Nothing happens.)
Following is the HTML of my form:
`<form action="" method="post">
<label for="destination">Travelling to:</label>
<select id="destination" name="destination">
<option value="https://nstcprep.blogspot.com/">Destination 1</option>
<option value="https://nstcprep.blogspot.com/">Destination 2</option>
</select>
<input type="submit" value="Submit">
</form>`
Just change the below code in your file.
function link() {
var dropDownVal = document.getElementById('destination').value;
window.location = dropDownVal;
}
<form action="" method="post">
<label for="destination">Travelling to:</label>
<select id="destination" name="destination">
<option value="https://nstcprep.blogspot.com/">Destination 1</option>
<option value="https://nstcprep.blogspot.com/">Destination 2</option>
</select>
<button type="button" onclick="link();">Submit</button>
</form>
Let me know if this work.
if you want to open in new tab just change this.
window.open(dropDownVal, '_blank');
Related
I have below form with input options and datalist no submit button. it is search bar that I created. I also have javaScript with onchange event to add href for option tags. The problem is, when users would like to search and type even a letter it starts searching. Users should fully type and than search engine should work. How do I prevent this?
$(document).ready(function() {
$("[list='serv']").on("input propertychange", function() {
window.location = $("#serv option[value='"+$("[list='serv']").val()+"']").find("a").attr("href")
});
});
<form class="search">
<input type="text" name="exx" list="serv" id="example">
<datalist id="serv">
<option value="google">google </option>
<option value="facebook">facebook</option>
</datalist>
</form>
Try this
document.getElementById("form").onSubmit=function(){
window.location.href = this.children[this.selectedIndex].getAttribute('href');
}
<form class="search" id="form">
<input type="text" name="exx" list="serv" id="example">
<input type="submit" style="display:none" value="Submit">
<datalist id="serv">
<option value="b">google </option>
<option value="z">facebook</option>
</datalist>
</form>
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.
I am trying to using a dropdown and an input box and then submit both.
For some reason, it is not
function watchForm() {
$('.decisions').on('click', function(event) {
event.preventDefault;
const state = $('.js-query-states').val();
console.log(state)
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="decisions">
<select class="states js-query-states">
<option value="">Choose a state</option>
<option value="AL">Alabama</option>
</select><br><br>
<label for="number">How many</label>
<input type="input" name="number" id="number" value=5>
<input type="submit" value="Submit">
</form>
Few issues here:
You need to listen to the Form .submit() event instead of click().
Also, you are missing the parentheses () after event.preventDefault.
Also, it seems that the event handler is inside the watchForm() function, but it is not called anywhere. So, you can remove that function and add the .submit() event handler directly.
$('.decisions').submit(function(event) {
event.preventDefault();
const state = $('.js-query-states').val();
console.log(state)
const number = $('#number').val();
console.log(number)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="decisions">
<select class="states js-query-states" required>
<option value="">Choose a state</option>
<option value="AL">Alabama</option>
</select><br><br>
<label for="number">How many</label>
<input type="input" name="number" id="number" value=5>
<input type="submit" value="Submit">
</form>
It should be event.preventDefault() like Barmar said. Also it's good to have submit event for the form.
To submit the value of the "select" DOM element you must set the "name" attribute and then, "submit" button will include it when you clicked on it
<form class = "decisions">
<select class="states js-query-states" name="state">
<option value= "">Choose a state</option>
<option value= "AL">Alabama</option>
</select><br><br>
<label for= "number">How many</label>
<input type = "input" name = "number" id= "number" value = 5>
<input type="submit" value = "Submit">
</form>
The option selection in the Select box is not available.I don't know what the cause is. If you check the value by notifying, the first option is "12. Selecting "36" also outputs "12"
<form action="{{ route('penpal.index', ['list'=>$list,'page' => $page]) }}" method="post">
#csrf
<select id="inputState" class="form-control" style="height:35px; width:80%" name="list" onchange="this.form.submit()">
<option value="12">#lang('penpal/component/indexMenu.twelve')</option>
<option value="24">#lang('penpal/component/indexMenu.twenty_four')</option>
<option value="36">#lang('penpal/component/indexMenu.thirty_six')</option>
</select>
</form>
alert($("#inputState").val());
nothing is wrong with your code. you just dont get the logic properly. here is a modify version of your code i wrote. if its of help to you, vote me. thanx
//the blade form. the javascript gets the value of the selected item, assign it to the input box and submit your form automatically.
<form action="{{ route('penpal.index', ['list'=>$list,'page' => $page]) }}" method="post" id="submitForm">
{{ csrf_field() }}
<select id="inputState" class="form-control" style="height:35px; width:80%" name="list">
<option value="">-Please Select-</option>
<option value="12">#lang('penpal/component/indexMenu.twelve')</option>
<option value="24">#lang('penpal/component/indexMenu.twenty_four')</option>
<option value="36">#lang('penpal/component/indexMenu.thirty_six')</option>
</select>
<input type="text" class="form-control" id="valueid" name="id" value="">
</form>
//javascript code
<script>
$(document).ready(function(){
$("#inputState").change(function(e){
var value= e.target.value;
//alert(value);
document.getElementById('valueid').value = value; //assign select value to input field.
$('#submitForm').submit(); //submit form
});
});
</script>
Here is my code:
<select name="category" id="category">
<option value="select" selected="selected" style="display:none;">--Select Search Category--</option>
<option value="Title">Book Title</option>
<option value="Subtitle">Book Subtitle</option>
<option value="BookAccessNumber">Book Access Number</option>
<option value="Author">Author</option>
<option value="Publisher">Publisher</option>
</select>
<input type="text" name="keyword" value="" id="keyword" />
<input type="button" value="Search" onClick="display(category.value,keyword.value)">
<br/><br/>
<div id="show_result">
</div>
In my code I get some input values , one from combo box and other from textbox and I'm having a button called search. What I done is if I click the button it will call a java script function called display(), which is used to display the results of search.
But I give the event as onClick, so it works only when I click the button. It doesn't work when I press enter.
What I need to do is, to make the function display() called even I hit "enter" too.
You can call the display method check this jsfiddle:
$("input").keypress(function(event) {
if (event.which == 13) {
event.preventDefault();
alert("call display method");
display();
}
});
http://jsfiddle.net/naeemshaikh27/cy84t4pz/1/
Use jquery trigger
function display(){
alert('hellow btn clicked');
}
$('.addButton').on('click', display);
$('body').on('keypress','input', function(e){
if (e.keyCode == 13) {
$('.addButton').trigger("click")
}
});
Wrap your input elements in a form and move the onclick handler to the onsubmit handler of the form.
<form onsubmit="alert('foo'); return false;">
<input type="text" />
<input type="submit" />
</form>
<input type="button" value="Search" onClick="display(category.value,keyword.value)" onKeyDown="if(arguments[0].KeyCode==13){display(category.value,keyword.value)}">
Move your input elements to a <form> and change your <input type="button"> to <input type="submit">. A form will treat the pressing of Enter key as clicking on the Submit button. So, the form will be processed.
Try this:
<form onsubmit="display(category.value,keyword.value)">
<select name="category" id="category">
<option value="select" selected="selected" style="display:none;">--Select Search Category--</option>
<option value="Title">Book Title</option>
<option value="Subtitle">Book Subtitle</option>
<option value="BookAccessNumber">Book Access Number</option>
<option value="Author">Author</option>
<option value="Publisher">Publisher</option>
</select>
<input type="text" name="keyword" value="" id="keyword" />
<input type="submit" value="Search" />
</form>
<br/><br/>
<div id="show_result">
</div>
Please note that display(category.value,keyword.value) is moved to the onsubmit attribute of the form.