I have a html select tag after user select value I want to send that value to the server:
<form id ="eventForm" action="/" method="post">
<select name="aaaa">
<option value="abc"> ABC</option>
<option value="def"> def</option>
<option value="hij"> hij</option>
</select>
<input type="submit" id="open" value="Submit Query" />
</form>
The javascript that sends it is this:
$.post("/", $("#eventForm").serialize());
However it is not received by the server at all. This does work when I send data in a form as input type text. Thus why wouldn't it send the selected data in the select tag?
Thanks
The web server module wasn't picking it up as attribute was named wrongly.
Well I figured that when the selected option is disabled(html) it just doesn't get sent at all and is ignored as a parameter... I suggest to put up a sort of try-catch mechanism on the server side...
P.S.: Good luck on your project!
Related
I am currently making a kind of internal search engine with multiple options in a dropdown, it works at first but I would like to change the form to get the urls based on the dropdown, so I can get:
example.com/search/**Option_Value_Here**/?q=my+query
I'm using Django as the framework
<form action="/search/" method="get">
<input name="q" id="query" value="{{ query }}" type="text" autocomplete="off">
<select id="category" name="select-name" method="get">
<option value="Jose">Jose</option>
<option value="Mike">Mike</option>
<option value="Mary_Ann">Mary Ann</option>
<option value="chaplin">Chaplin</option>
</select>
<input value="Search" class="fit" type="submit">
</form>
My question is if there is a way where I can change the path of the form action:
<form action="/search/{{ Option_Value_Here }}}/" method="get">
Thanks for your time.
Regards
You can do that with JavaScript/jQuery.
<form id="myform">
...
</form>
$(".category").change(function(){
value = $(this).val()
$('.myform').attr('action', "/search/" + value)
});
Remember to place the code in a $(document).ready() listener.
Want to avoid JavaScript?
You can get the value directly in the template. You cannot change that value if the user changes the dropdown value: in this case, your only chance is that of redirecting the user in your views.py based on what he choose in the dropdown.
Remember: Django simply renders a page and sends it to the user. Whatever happens before a new call is made to your server is not in the possibilities of Django but those of JavaScript.
So I have a fragment from a.html:
<div>
<select name="Address" id="address_search" style="width:282px; display:block;" required>
<option value="DEFAULT">Select..</option>
<option value="A">A</option>
<option value="B">B</>option>
<option value="C">C</option>
</select>
</div>
And I also have a placeholer field in b.html:
<label><textarea id="add_info" rows="1" cols="36" placeholder="SELECTED OPTION DISPLAY HERE" readonly></textarea></label>
How do I display the selected option value from a.html to the placeholer field in b.html?
Thanks.
I have an idea, use jquery, and create a hidden div inside b.html , and let's say that hidden div's ID = "hddiv". use
$("#hddiv").load("a.html", function(){
var select_val = $( "#hddiv div select option:selected").val();
$( "#add_info" ).attr( "placeholder" ,select_val);
});
Two html files can not talk if they are in separate browser tabs (except when using localStorage). The only solution is to submit the data to the server and server uses that value in the second page. There are some workarounds using JavaScript as well which I have discussed in the end.
Server Side Solution
You have to submit the value on to the server from a.html and then use that value in b.html. My solution may not make any sense to you since I am not sure which technology you are using on the server side. But it is pretty forward with PHP. Here is a solution if you are using PHP
Modify your file a.html to have a form that will post the data to b.php (not b.html)
<div>
<form action="b.php" method="POST">
<select name="Address" id="address_search" style="width:282px; display:block;"
required>
<option value="DEFAULT">Select..</option>
<option value="A">A</option>
<option value="B">B</>option>
<option value="C">C</option>
</select>
</form>
</div>
Now change the extension of your file b.html to b.php and
<label>
<textarea id="add_info" rows="1" cols="36"
placeholder="<?php echo $POST['Address']?>"
readonly>
</textarea>
</label>
You need to check whether the POST value is empty or not otherwise exceptions will be logged. Please refer [1] for that.
Complete JavaScript Solution
There are a couple of JavaScript Solutions that might work depending on your use case. The main limitation is that both your pages have to be served from the same domain. Read more about the same origin policy on MDN [2]
If b.html is loaded inside an iframe in a.html
A parent html page (a.html) can talk to another html page (b.html) if b.html is loaded in an iframe inside a.html. If that is not your case skip this part.
Listen on the change event of your select field using and then update the textarea in the iframe.
Sine the question mentions jQuery I am using jQuery in my answer. If you don't want a jQuery based solution I will edit it later.
$("#address_search").change(function() {
$("iframe")[0].window.$("#add_info").attr("placeholder",$(this).val());
})
// here I have assumed that jQuery is loaded in both the pages (a.html and
// b.html) and you have not used noConflict API [3].
Using localStorage
Browsers have now a concept of localStorage [4] which is present in almost all browsers [5] that support the placeholder attribute [6]
Again you have to listen to changes in your select field and this time update the localStorage using the setItem API. This time I am using the native browser API assuming you do not have jQuery present.
document.getElementById("address_search").addEventListener("change",
function() {
localStorage.setItem("address_search_value_a_html",this.value);
})
Now in your b.html handle the onLoad event and read the value from the localStorage
document.getElementsByTagName("body")[0].addEventListener("load", function() {
document.getElementById("add_info").setAttribute("placeholder",
localStorage.getItem("address_search_value_a_html"));
})
In this case a user has to reload the page b.html to get the correct value.
[1] Check whether $_POST-value is empty
[2] https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
[3] http://api.jquery.com/jquery.noconflict/
[4] https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage#localStorage
[5] http://caniuse.com/#search=localstorage
[6] http://caniuse.com/#search=placeholder
EDIT: As per your comment below, here is a simple solution for you. But I would recommend you to get an understanding of How the Web Works, JavaScript Event Listeners and any Server Side Technology if you want to work in this domain.
Add a change listener on the select element and update the local storage as suggested above.
I am assuming you have a button in your a.html file. Let's assume the id of that button is mybutton. Attach a click listener on that button.
document.getElementById("mybutton").addEventListener("click"function() {
window.location.href = "b.html"
})
Here I have assumed a.html and b.html are inside the same directory, if not you need to provide that path of b.html.
In your b.html read the value from localStorage and change the placeholder attribute as suggested above.
You can use the onchange()
Assuming a.html is loaded into b.html you can do this
<div>
<select name="Address" id="address_search" onchange="document.getElementById('add_info').value = this.value;" style="width:282px; display:block;" required>
<option value="DEFAULT">Select..</option>
<option value="A">A</option>
<option value="B">B</>option>
<option value="C">C</option>
</select>
</div>
I am having trouble trying to figure out how to navigate to different web pages using a drop down list and submit. I have three forms:
main.php
two.php
three.php
In my main.php page I have a drop down list consisting of only two options 'second' and 'third'. How can I use these two options to navigate to other php pages? For example, if I selected the option 'two' and click submit, the page should then take me to the second.php page. And if I select option 'three', I will be taken to the third.php page.
Also, once I am directed to one of the php pages, how can I then be able to go back to the 'main.php' page if I decide to go to the other php page instead? (I thought perhaps the use of a back button).
Below is part of my 'main.php' page:
<label>Select the page you wish to go:</label></td>
<select name="pages"/>
<option value="two.php">Second</option>
<option value="three.php">Third</option>
</select></td>
On <select></select> value change :
HTML :
<select name="pages" onChange="my_function(this)">
JavaScript :
function my_function(element){
document.location.href = element.value
}
Example
On <button></button> click :
HTML :
<button onClick="my_function()"></button>
JavaScript :
function my_function(){
document.location.href = document.querySelector('select[name="pages"]').value
}
Example
You can do multiple things. If you dont wan't to rely on javascript, make the form submit to a file like router.php.
inside router.php put:
<?php
if (isset($_POST['pages']) {
header('Location: ' . $_POST['pages']);
}
Which will effectively forward the request to the page you submitted in the select.
You also have to change your html a bit:
<label>Select the page you wish to go:</label></td>
<form method="post" action="router.php">
<select name="pages"/>
<option value="two.php">Second</option>
<option value="three.php">Third</option>
</select>
<input type="submit" value="go there" />
</form>
If you are fine with javascript go with #notulysses's answer, its way easier and quicker.
Using POST values directly in a header method is kinda nasty imo.
Jquery solution
HTML CODE:
<form id="frm" method="post" action="" >
<label>Select the page you wish to go:</label>
<select name="pages"/>
<option value="two.php">Second</option>
<option value="three.php">Third</option>
</select>
<input type="submit" name="sub" value="Finish" />
</form>
JQUERY CODE
$('#frm').on('submit',function () {
var nextPage= $('select option:selected').val();
$(this).attr('action',nextPage);
return true;
});
Happy Coding :)
I have a form with select box. With JavaScript on, I take the change event to define the options-values as location.hrefs:
$('select').change(function(){
window.location.href = $(this).val();
});
With JavaScript off, I have a basic form with a submit button. To follow the targets given in the option values, I have to set them to the form action. Do you have any idea how I could get only the selected option as form target e.g. with any CSS selector or something like that?
The form:
<form action="test-1.html">
<fieldset>
<select id="lorem">
<option value="test-1.html">test1</option>
<option value="test-2.html">test2</option>
<option value="test-3.html">test3</option>
</select>
<input type="submit" value="senden" class="submit" />
</fieldset>
</form>
You will have to do this in server-side code. Without JavaScript enabled, there is no way to dynamically change anything in an HTML DOM.
So, submit to some intermediary page that's sole purpose is to redirect and perform the logic there.
it's my first post here and I so sorry if I wrong the place.
My difficulty is view the elements of the first select form to the other one if the first form is set as array.
The goal is to send the elements of a select form to another one and then record them on a db MySQL, that will show them on a html page.
I found in this forum the procedure how to create two select form and add 'n remove the items, then with the command .implode of MySQL can join the element and insert multiple items on db and view them on page.
But if I set the name's select form as array it doesn't work. I've used the following script to have two select form :
<script language="javascript">
function getOpt(select1,select2)
{
for (bCnt=0;bCnt<select1.length;bCnt++)
{
if (select1.options[bCnt].selected)
{
newOpt=new
Option(select1.options[bCnt].text,select1.options[bCnt].value,false,false);
select2.options[select2.length]=newOpt;
}
}
}
function remOpt(select2)
{
for (bCnt=0;bCnt<select2.length;bCnt++)
{
if (select2.options[bCnt].selected)
select2.options[bCnt]=null;
}
}
</script>
then the selects form:
<table border="0">
<tr>
<td>
<label for="id">List:<br></label>
<select name="oneS" id="select_role" size=20 required multiple="multiple"/>
<option value="101">101</option>
<option value="102">102</option>
<option value="103">103</option>
<option value="104">104</option>
<option value="105">105</option>
<option value="106">106</option>
</select>
</td>
<td>
<input type="button" value="Add"onClick="getOpt(this.form.oneS,this.for m.twoS)"><br>
<input type="button" value="Remove"onClick="remOpt(this.form.twoS)">
</td>
<td>
<label for="id">Members List:<br></label>
<select name="twoS" id="select_role" size=20 multiple="multiple"/>
</select>
</td>
</tr>
</table>
if comment the script,the part of the buttons, the second form and change the line:
<select name="oneS" id="select_role" size=20 required multiple="multiple"/>
in
<select name="oneS[]" id="select_role" size=20 required multiple="multiple"/>
I have any issue, can record the items of the first select form on db and view them on the page.
But it's not my goal, I've have to use 2 select form.
Is there some one can help me? thanks a lot.
I've you use jQuery, here it is:
$(document).ready(function()
{
$('.add').click(function(event)//this is your first form, with the id "select_role"
{
$('#select_role2).html($(this).html()+"add whatever html code you want to insert into here");
});
});
use the same idea for remove item.
then use an $.ajax or $.post to send the data to mysql or use a variable to store all the html that was added or removed from your second select.
Simply include the jQuery library and you are all sorted. I have not written raw JAvascript in a long long time, but this will work with the help of jQuery. don't use the same id for two elements again. The id must be unique.
Then assuming you insert a whole bunch of options, you can use $('#your_form_id).serialize() within an $.ajax call to get the array of elements then use the PHP technique for parsing name="insertedoption[]" />. I'm not completely sure I helped you too much, as you need to read up on a few things, but this is an idea on how to do what you need to do.