We Keep Coding

Django - Change the route of sending a form based on dropdown

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.

How to tell when Form submitted by Select onChange versus Submit Button

I need assistance determining when my form was submitted via an onChange event for a Select as opposed to the user clicking on the Submit button.
To complicate matters, I need to be able to identify the difference in PHP.
Sample HTML:
<form name='editdata' method='post' action='/editpage/recordnumber'>
<select name='select1' onchange='this.form.submit()'><options...></select>
<select name='select2' onchange='this.form.submit()'><options...></select>
<select name='select3' onchange='this.form.submit()'><options...></select>
<input type='submit' value='Submit' />
</form>
Ultimately, I just need something to latch onto using PHP that identifies whether the form was submitted by an onChange event or by a press of the Submit button.
So far I have found that I can name my submit button 'submit'. This will set $_POST['submit'], thereby telling me that the user clicked the button. However, my onChange event this.form.submit() which is applied to a couple of my Selects stops functioning when I add the name attribute to my submit button.
If I could add some sort of queryString to the end of my submit URL with one method or the other, I think that would get the job done.

You could set a hidden field which gets updated by the event:
<form name='editdata' method='post' action='/editpage/recordnumber'>
<input type="hidden" name="submitted_on_change" value="0">
<select name='select1' onchange='form_submit()'><options...></select>
<select name='select2' onchange='form_submit()'><options...></select>
<select name='select3' onchange='form_submit()'><options...></select>
<input type='submit' value='Submit' />
</form>
<script>
var form_submit = function() {
// update the hidden field to 1
// then submit the form
}
</script>

You can call multiple functions inside your onchange and fill another field with the name of the select field that caused the submission of the form (or it is empty when submit button was pressed):
<form name='editdata' method='post' action='/editpage/recordnumber'>
<input type='hidden' name='field' value='' />
<select name='select1' onchange='this.form.field.value=this.name; this.form.submit();'><options...></select>
<select name='select2' onchange='this.form.field.value=this.name; this.form.submit();'><options...></select>
<select name='select3' onchange='this.form.field.value=this.name; this.form.submit();'><options...></select>
<input type='submit' value='Submit' />
</form>

AJAX form elements processing

This is probably a stupid way of doing what I want to do, so a more elegant solution to the bigger problem is definitely appreciated! However, the specific problem I am encountering is this:
I am processing a form with javascript. The form structure is as follows:
Name (text, also hidden value)
Preference (checkbox): Green, Purple (user can check both)
Time (Dropdown): AM, PM, Midnight
<FORM>
<SECTION>
Jane Doe:
<INPUT type="hidden" name="user[]" id="user[]" value="Jane_Doe" />
<INPUT type="checkbox" name="preference[]" id="preference[]" value="green" /> <INPUT type="checkbox" name="preference[]" id="preference[]" value="purple" />
<SELECT name="time[]" id="time[]">
<OPTION value="AM">AM</OPTION>
<OPTION value="PM">PM</OPTION>
<OPTION value="Midnight">Midnight</OPTION>
</SELECT>
</SECTION>
<SECTION>
John Jacob:
<INPUT type="hidden" name="user[]" id="user[]" value="John_Jacob" />
<INPUT type="checkbox" name="preference[]" id="preference[]" value="green" /> <INPUT type="checkbox" name="preference" id="preference" value="purple" />
<SELECT name="time[]" id="time[]">
<OPTION value="AM">AM</OPTION>
<OPTION value="PM">PM</OPTION>
<OPTION value="Midnight">Midnight</OPTION>
</SELECT>
</SECTION>
<INPUT type="button" Value="SUBMIT" onclick="function(form_script)"/>
</FORM>
Depending on a prior action by the user, a list of names is generated, with Preference and Time needing to be filled in.
The form is then submitted and a mySQL table will be populated according to the user's response using PHP coding.
I am currently at a loss to how to store the form responses with Javascript. As you can see from the coding, each <SECTION> contains the exact same coding structure.
Ideally, I'd like to store each form element within an array, (e.g. user['Jane_Doe', 'John_Jacob']) when the form is submitted, and pass that to the php script. But, I'm not sure how to create these arrays from the form elements, and would appreciate help.
I hope my question is clear.
Alternatively, if there are better ways of processing this form without using javascript arrays, I would definitely be interested in the solution!

assuming the id of your form is "form", to grab all the data from the form you will need to do this (you will need to include jquery to be able to perform this action) :
var form_data = $("#form").serialize();

Send value with Onchange and javascript function

I'm new at JavaScript and I need some help to submit my form when anyone select anything from the dropdown list. Here is the sample code :
<form action="" method="post">
<select name="car" onChange="this.form.submit()">
<option value="car1">car1</option>
<option value="car1">car1</option>
<option value="car1">car1</option>
</select>
<!-- Some other code -->
<input type="submit" name="sentvalue">
</form>
This is my form and when anyone selects the dropdown, the form automatic submit but I also need the sentvalue when automatic submit the form. So can anyone help me to capture the sentvalue when anyone select the dropdown.

If you want to send any other data with the form submit you can send it in hidden inputs
<input type='hidden' name='data1' value='Test1' />
<input type='hidden' name='data2' value='Test2' />
//etc
And if you want the value of submit button with the form just set the value attribute into your code for submit button every this else seems fine,
<input type="submit" name="sentvalue" value="Test1" />
Hope this answers your question

Just give the <input> tag a name
<input name="submitbtn" type="submit" value="sentvalue" />
then you can get it by $_POST['submitbtn'] in case of PHP which value is "sentValue"

It sounds like you want the value of the input field (sentvalue) to be submitted as well. But how do you guarantee that the value was specified by the user? Is this supposed to be a hidden input field?
Either way your input tag is incomplete. This sounds better:
<input type="text" name="sentvalue"></input>
Also, when you submit, the value of this field (sentvalue) will be passed in too. As long as your tags are right you don't need to worry.

You will have to create a hidden input element
<input type='hidden' id='sentvalue' value='' />
and call a function on submit instead of directly submitting
Use this in the function to set the values and submit
var e = document.getElementByName("car");
document.getElementById("sentvalue").value = e.options[e.selectedIndex].value;
this.form.submit();

Mutliple forms on a page with each one being able to submit

How is it possible to have multiple forms on a page with each one being able to submit itself.
When i have it set up like this, the first forms submits, but the 2nd does not work. Any suggestions on how to make it work? (I will have many forms like this on 1 page)
thanks
<form action="/order-form2.php" method="post">
<input type="hidden" name="phoneType" value="iPhone 2g - 4GB//ATT">
<input type="hidden" name="price" value="75">
<div class="prodSize">4 GB</div>
</form>
<form action="/order-form2.php">
<input type="hidden" name="phone" value="iPhone 2g - 8GB//ATT">
<input type="hidden" name="price" value="25">
<div class="prodSize">8 GB</div>
</form>

use this for 2nd form it will work. as default method is set to get if it has no method.
<form action="/order-form2.php" method="post">

first form is set method to post, second has not, if you're catching with POST then it's empty, set the method to post or catch with GET, if it's not set method, default is GET

Please use the following
<form name='form1' id='form1' method='POST' action='/order-form1.php'>
<a href="#" onclick='return document.forms.form1.submit();'>4 GB</a>
</form>
Note the id and name attributes assigned to form, use that in javascript