I want to get html slected option value in php or javascript.
I am trying to do is:
<form action="book-page-1.php>" method="POST">
<select name="chosePage">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="submit" name="submit" value="Update">
</form>
What I want is to pass the selected page number in "form action" before submitting the form like:
// I want to pass selected option value in "url" before submit the form
<form action="book-page-<?php echo selected option;?>.php>" method="POST">
I dont want in php post like:
// This is not my requirement - Because I want to pass value in "url" before submit the form
if (isset($_POST['chosePage'])) {
$op = $_POST['searchItemname'];
}
I want to pass the selected option value in url.
PHP or JAVASCRIPT all are welcome.
Any Idea would be welcome.
Thanks
you can add an id to the <select> element, <select id="chosePage "name="chosePage">.
then using javascript you can do:
let selected = document.getElementById("chosePage").value;
you can do it by this simple function :
function SandRequest(){
let selected = document.getElementById("chosePage").value;
document.getElementById("MyForm").setAttribute("action", "book-page-"+selected+".php");
return true;
}
<form id="MyForm" method="post" >
<select id="chosePage" name="chosePage">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input name="Booktitle" type="text">
<button onclick="SandRequest()" >Update</button>
</form>
Related
I have an HTML form with jquery-chosen multiple selection of countries. I want to send this input to Flask through the POST request. The problem is that Flask does not capture the selections.
When I do not use js chosen, it works:
<div class = "webform">
<form method="POST" action = "/monthly_active" name = "countries">
<p>Select countries</p>
<select multiple id="Country" name="Country">
<option>Select...</option>
<option value="DE">DE</option>
<option value="AT">AT</option>
<option value="RU">RU</option>
<option name="PL">PL</option>
<option name="IT">IT</option>
<option name="GB">GB</option>
<option name="BR">BR</option>
</select>
<input type="submit" value="Submit">
</form>
But with js chosen it does not work:
<form method="POST" action = "/monthly_active" name = "chart_options" >
<p>Select countries</p>
<select name = "countries[]" data-placeholder="Countries" multiple class="chosen-select" tabindex="8">
<option value="AT">AT</option>
<option value="GB">GB</option>
<option value="RU">RU</option>
<option selected>DE</option>
<option disabled>Sun Bear</option>
<option selected>ES</option>
<option disabled>Spectacled Bear</option>
</select>
<script> $(".chosen-select").chosen(); </script>
<input type="submit" value="Submit">
</form>
In Flask I use request.form.getlist() to get the input list.
The thing is I very very basic with HTML and javascript, thus, I am stuck how to manage this problem.
Solved:
My mistake was in request.form.getlist('chart_options'):
I passed the name of the form there whereas I had to pass the name of the <select>
This worked:
target_countries = request.form.getlist('countries[]')
EDİTED("I think that i should use Ajax how can i do it")I created comboboxes dynamically. When I want to get the value from the textbox, I can't post to PHP. Here is my code:
HTML code:
<form method="post" name="sigortayap" action="sigorta-process.php" onsubmit="return a()" >
<select id="yetiskinid" class="selectTravelInputFieldsCar" name="yetiskin" onChange="yetiskintext()" >
<option value="-1">Seçiniz</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div id="yetiskindiv"></div>
</form>
JS Code:
function yetiskintext() {
var secenek=document.getElementById("yetiskinid").value;
while (secenek>0){
var textBoxname = document.createElement('input');
textBoxname.name = 'textyetiskinname'+secenek;
textBoxname.id='textyetiskinname'+secenek;
textBoxname.type = 'text';
textBoxname.className='selectTravelInputFieldsCarJS';
document.getElementById("yetiskindiv").appendChild(textBoxname);
}
}
PHP Code:
<?php
$kece=htmlspecialchars($_POST["textyetiskinname1"]);
echo $kece;
?>
When I put echo $kece; in the PHP, I can't see any output. Why?
The name of the combobox is 'textyetiskinname'+secenek not 'textyetiskinname'. You miss the number at the end of the name.
Maybe you should try this:
textBoxname.setAttribute("name", 'textyetiskinname['+secenek+']');
instead of .name
I have a page that has several forms created using a while loop and each form has four selects. I am trying to work out how I can check each of the selects belonging to the current form (the one containing the button clicked) to confirm if any been selected. All of the forms are wrapped in a single div called #audit_content.
The intention is to check that if the variable grade isn't a certain value then the script checks if any of the selects have been selected.
(The value $i is created during the while loop, used to uniquely identify each form)
the html
<form id="audit_form<? echo $i; ?>">
<select name="grade" class="grade<? echo $i; ?>">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<select>
<select name="patient" class="reason_select">
<option value="">Select</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="exposure" class="reason_select">
<option value="">Select</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="equipment" class="reason_select">
<option value="">Select</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="positioning" class="reason_select">
<option value="">Select</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="button" name="audit_submit" class="audit_submit audit_submit_btn ie7_submit" value="" />
<input type="hidden" class="form_id" value="<? echo $i; ?>" >
</form>
The JQuery
<script>
$(document).ready(function(){
$('#audit_content').on("click", ".audit_submit", function(){
var form_id = $(this).prev('.form_id').val();
var grade = $('.grade'+form_id).val();
if(grade != 1){
$('select.reason_select').each(function(){
alert($(this).text())
}
});
</script>
The script as it is displays the values of every select with the class reason_select on the page which I realise is because I haven't told it to check a specific form, thats the bit I'm stuck at.
button shown is outside the form, not inside as mentioned.
To isolate any repeating type widget look for the parent of that widget, then search only within it:
Moving the button inside the form would make it very easy by doing:
$('#audit_content').on("click", ".audit_submit", function () {
var form=$(this).closest('form')
var selects=form.find('select');
// do somthing with selects
})
I would change the script to
<script>
$(document).ready(function () {
$('#audit_content').on("click", ".audit_submit", function () {
var form = $(this).prev('form');
var grade = $('select[name="grade"]', form).val();
if (grade != '1') {
$('select.reason_select', form ).each(function () {
alert($(this).text());
});
}
});
});
</script>
In the script you have posted there are several missing ) and } so it should create syntax errors..
You mention
current form (the one containing the button clicked)
but your button is not contained in the form, that is why i changed the code to form = $(this).prev('form')
I want to set validation on select tag in my form so that the user cannot proceed without choosing a location.
Below is the form...
<form name="form1">
Pickup Suburb:
<select id="pick" class="pick" name="pick"/><br />
<option value="none">-- Please select a location --</option>
<option value = 1>City </option>
<option value = 2>Airport </option>
<option value = 3>Abbotsbury </option>
<option value = 4>Abbotsford </option>
<option value = 5>Acacia Gardens </option>
<option value = 6>Agnes Banks </option>
<option value = 7>Airds </option>
<option value = 8>Akuna Bay </option>
</select>
<br />Rear facing baby seat
<select class="rfbs" name="rfbs" style="width:50px">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select><br />
<br />Booster seat
<select class="bs" name="bs" style="width:50px">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br />
<br />Luggage Trailer
<select class="lt" name="lt" style="width:50px">
<option value="0">0</option>
<option value="1">1</option>
</select>
<br />
<br /><input class="show-popup" type="submit" value="Get Quote">
</form>
I have applied a JavaScriptpopup window to show the results when user fills the form so is it possible to apply validation that shows an error message if the user tries to submit the form without choosing a location.
Any help would be highly appreciated.
Because select field has always been chosen value (default first option), you can just check:
if($('#pick').val()=='none') {
alert('choose some value');
return false;
}
The form element allows a onSubmit tag that will get called if the user tries to submit the form.
You could try something like this:
<form onsubmit="checkFormValidity()">
<select id="location" ... >
Then in your javascript you can then do something like this:
function checkFormValidity(){
var select = document.getElementById("location");
if(select.options.selectIndex == 0)
{
return false;
}
return true;
}
One line I would like to add to make sure that form will not be submitted
if($('#pick').val()=='none'){
alert('choose some value');
return false; // this is a missing line
}
Note: To use jQuery, you need to download it and add it to your web form
Edit:
<form id="form1" name="form1" method="post">
Pickup Suburb:
....
</select>
<br /><input class="show-popup" type="submit" value="Get Quote">
</form>
JavaScript
$( "#form1").submit(function( event ) {
if($('#pick').val()=='none'){
event.preventDefault(); //will prevent default form submission
alert("Please select one of the options provided");
return false;
}
});
You can check Demo on jsfiddle
I have an external Javascript file and i am trying to alert the value of select tag.
My <select> code looks like this:
<select id="vote">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="button" value="vote" onclick="castvote();">
and the Javascript (which is external):
function castvote()
{
alert(document.vote.options[document.vote.selectedIndex].value);
}
But I get the error "document.vote is undefined".
Can someone help me with this.
Best
Zeeshan
If selecting by Id, you should use :
function castvote() {
var sel = document.getElementById("vote");
alert(sel.options[sel.selectedIndex].value);
}
Easy way, change your code so that your form field has a name attribute:
<select name="vote" id="vote">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="button" value="vote" onclick="castvote();">
Better way, change your javascript so it is retreiving the select box by its ID rather than through the document object:
function castvote() {
var mySelect = document.getElementById("vote");
alert(mySelect.options[mySelect.selectedIndex].value);
}