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>
Related
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');
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>
How can I trigger an error message without submitting the form, for when I click on an input field and without typing something, if I click out of the input field it will trigger a validation error saying this field must not be empty. I tried using 'data-parsley-trigger="keyup"' but only works when something is typed in the input field
For example, if you click on the title field on this website https://deals.jumia.cm/en/posts/new and without typing anything in the field you click out of the title field, It will trigger a validation error
<form method="post" class="ad-form" enctype="multipart/form-data" data-parsley-validate >
<label for="title">Title</label>
<input type="text" id="title" name="title" placeholder="Title" required="required" data-parsley-maxlength="255" data-parsley-maxlength-message="Title can't have more than 255 signs." data-parsley-required-message="Please enter a title." data-trigger="focus" data-toggle="popover" data-content="Keep the title short and clear. Do not write the price in it or any information that is not relevant." data-parsley-validate-if-empty data-parsley-trigger="keyup"/>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
$('.popover-dismiss').popover({
trigger: 'focus'
})
</script>
<label for="category">Category</label>
<select id="Category" name="category" required="required" data-parsley-required-message="Please select a Category." data-level="0">
<option value="">Select Category</option>
</select>
<label for="subcategory">Subcategory</label>
<select id="Subcategory" name="subcategory" data-parsley-required-message="Please select a subcategory.">
<option value="">Select Category first</option>
</select>
</form>
Use data-parsley-trigger="blur" and data-parsley-validate-if-empty=true.
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>
<form id="check" action="." method="POST">
<input id="act" type="hidden" name="action"/>
<select id="blk">
<option value="blk">Bulk Actions</option>
<option value="tes">Active</option>
<option>Inactive</option>
<option>Delete</option>
</select>
<input type="submit" value="Submit" onclick="document.getElementById('act').value = 'document.getElementById('blk').selectedIndex.value'"/>
</form>
i want get the value by select tag and the value action will be change on input with name action as the value
You've mixed two concepts.
The select element has a value property that reflects the current selection
document.getElementById('blk').value
The select element has a list of options with values and a selectedIndex property that reflects the position of the current selection. Use it like this:
var sel = document.getElementById('blk');
if (sel.selectedIndex >= 0) // could be -1 as well
return sel.options[sel.selectedIndex].value
However, what you actually seem to want is
<form id="check" action="." method="POST">
<select name="action">
<option value="blk">Bulk Actions</option>
<option value="tes">Active</option>
<option>Inactive</option>
<option>Delete</option>
</select>
<input type="submit" value="Submit" />
</form>
You forgot the name of your select control, so no value would be posted. With it, you neither need a hidden input nor a click listener on the button (which should have been a onsubmit listener on the form as well).
try this
<form id="check" action="." method="POST">
<input id="act" type="hidden" name="action"/>
<select id="blk" onchange="javascript:CallMe(this.value)">
<option value="blk">Bulk Actions</option>
<option value="tes">Active</option>
<option>Inactive</option>
<option>Delete</option>
</select>
<input type="submit" value="Submit" onclick="document.getElementById('act').value = 'document.getElementById('blk').selectedIndex.value'"/>
</form>
<script>
function CallMe(String str)
{
alert(str+" : is the value selected , call the according action now");
}
</script>