I have a page with lots of forms on it and every form has a dropdown and two buttons - ok and decline. I have an onclick that will trigger a function:
<input type="button" value="decline"
class="submit_button_wow"
onclick="submit_decision({{ x.id }},false,this)">
how do I figure the selected dropdown value from this form inside submit_decision?
{{x.id}}
is the id of decision that I fill out via template engine.
You're passing a reference to button to the submit_decision (the this). From it you can get parent form and, subsequently, the dropdown and its value.
Try something like this:
$(sender).parent("form").find("select").first().val()
Refrence the form from the button's form property. Then get the drop down list by its name.
function submit_decision(decision, myBool, button) {
var dropdown = button.form.myDropdown;
var selectedValue = $(dropdown).val();
}
Related
django form with ChoiceField (1,2,3)--> {{Choices.sollicitanten}}
django form with ChoiceField (1,2,3) -->{{ form.vacature_contract }}
the choice options of both fields are the same 1,2,3
What i want is when i select for example, choice 1 in choices.sollicitanten it wil copy this choice to field {{form.vacature_contract}} so that the choice is this field is also 1.
<td class="tg-0lax">{{ Choices.sollicitanten}}</td>.
//and i have
<td name="vacature_doel" class="tg-0lax">{{ form.vacature_contract }}</td>
//and in html
function FillForm(f) {
{
f.vacature_doel.value = f.vacature_bron.value;
f.sollicitanten_doel.value = f.sollicitanten_bron.value;
}
}
</script>
//when i hit the submit button the function is run (onclick=FillForm).
//the code above does not seem to do much..what is going wrong.
You can pick both dropdowns by their ids and then add an eventlistener to sollicitanten dropdown which will set value of vacature_contract dropdown on change or vice versa.
to get the id of your dropdown you can either inspect element or django can guess as django simply assigns id as id_<your_field_name>.
Here is the js which should work fine for your code
<script>
let myDropdown = document.getElementById('id_sollicitanten');
myDropdown.onchange = () => document.getElementById('id_vacature_contract').value = myDropdown.value;
</script>
Here, i have added an event listener which will update the vacature_contract dropdown value when the value of sollicitanten is changed.
I have 3 different forms on a single page where the user can switch between using JS. The forms represent different information and only one can be submitted at a time where the user is then redirected to a different page based on the form they selected. The issue is that I have 2 input fields that are common to these forms so they are outside the forms. I am able to submit them alongside a form if I set the :
<input id="default" form="form1">
value.
So I figured it would be a simple thing to just add a function in each script where I hide/show the forms to also change that parameter to the form I want submitted however it doesn't seem to work.
function form2Search() {
$('#form2Section').show();
var input1 = document.getElementById('default');
input1.form = "form2";
}
I have something like this but it doesn't change the form parameter.
You need to actually give your input an ID of default so you can target it:
<input form="form1" id="default">
use setAttribute
function form2Search() {
$('#form2Section').show();
var input1 = document.getElementById('default');
input1.setAttribute("form", "form2");
console.log(input1.getAttribute("form"))
}
form2Search();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="default" form="form1">
I want to make 2 buttons in my form to select between windows and mac system. What I want is when the form is submitting i should be able to have one name field name="system" with 2 different value on what the user select. Sure i can do it with checkbox or select tag with options but for design i am questioning my self if its possible to do that? thanks in advance
<legend>With what system the data need to be compatible?</legend>
<button type="button" class="system btn" name="systeme" value="windows">Windows</button>
<button type="button" class="system btn" name="systeme" value="mac">Mac</button>
Mark the selected button by adding a class and add a hidden field to the form when submitting it.
$(".system").on("click",function(){
//if the clicked button is not already selected
if( !$(this).hasClass("selected_system") ){
//remove the "select" from other selected button
$(".selected_system").removeClass("selected_system");
//mark the current button as selected
$("this").addClass("selected_system");
}
});
now when submitting the form append a hidden input field to the form with the selected button's value
$("form").submit(function(){
var sel_button_val = $(".selected_system").val();
$(this).append('<input type="hidden" name="system" value="'+sel_button_val+'"/>')
$(this).submit();
});
It is possible to add two button with same name attribute value but, it will not work in backend as you expected.When you read the form fields in backend using name atrribute it return you array of values if you have more than one same name value in form.
You can achive this by updating the value attribute based on button selected before submiting the form.
Hope, This will solve your problem.
I want to submit a dropdown value disabled:
View:
#Html.DropDownFor(model => model.Type_Id, Model.TypeDropDown)
#Html.HiddenFor(m => m.Type_Id)
Javascript:
$("#Type_Id").val("67").change();
document.getElementById("Type_Id").disabled = true;
$('#Type_Id').val(67);
But my value dont passed to c# controller.
Once you disable a dropdown it wont submit it's value, so you need to Store your value.
See : Disable Dropdown
use a hiddenfor with nameparameter to store the value.
use hidden field to store the value of the disabled dropdown . In your code you have to manually set the value of the hidden field which is inside the same form before posting it to controller like below . You have to add the "Type_id_hidden" property in your model to access the value in controller.
#Html.Hidden("Type_id_hidden") .
But in your code you used the same id both hidden field and dropdown. set the hidden field before posting to controller
var selectedVal = $("#Type_Id").val();
$("#Type_id_hidden").val(selectedVal);
Use an additional hidden field with the same value as drop-down to submit the value and let the dropdown just for showing the value.
You cannot submit the value of a disabled field.
In my view model I have a field. This field can be selected from a drop down list or entered in a textbox. I have two radio buttons which allows to select between drop and textbox.
<div class="frm_row" id="contractorRow">
#Html.RadioButton("IsContractorNew", "false", true)
#Html.Label(#Resources.SomeLabels.Existing)
#Html.RadioButton("IsContractorNew", "true", false)
#Html.Label(#Resources.SomeLabels.New)
<div class="frm_row_input" id="contractorDropDownList">
#Html.DropDownListFor(model => model.CONTRACTOR, Model.Contractors)
#Html.ValidationMessageFor(model => model.CONTRACTOR)
</div>
<div class="frm_row_input" id="contractorTextBox" style="display: none;">
#Html.TextBoxFor(model => model.CONTRACTOR)
#Html.ValidationMessageFor(model => model.CONTRACTOR)
</div>
</div>
I prepared a javascript code for hiding, showing and clearing controls while selecting radio buttons. The problem is - field is bound only to the first control (drop down list).
EDIT:
I solved this problem by creating one hidden field and scripting whole logic to bind active control with it and therefore with the model. Anyway if anyone knows simpler solution, please post it.
I know this is an old question, but for those dealing with this issue, here's a solution:
Explanation
When a form is submitted, input elements are bound to the model by their name attribute. Let's say you use HTML helpers to generate your form, and you generate two input fields which bind to the same property on the model. When rendered to the DOM, they both have the same name attribute.
<input name="Passport.BirthPlace" id="birthPlaceDropDown" ... >
<input name="Passport.BirthPlace" id="birthPlaceInfoTextbox" ... >
When the form is submitted, it will bind the first (in the DOM) input it finds to Passport.BirthPlace
A Solution
The quick and easy way to fix this is to use JQuery to change the name of the field you don't want bound on submit. For me, I use a checkbox to toggle which field shows. When the checkbox changes, I hide one control, change its name attribute, and show the other one (and change it's name attribute to Passport.BirthPlace) It looks like this, basically:
First, I run this on document ready
$('#birthPlaceInfoTextbox').attr('name', 'nosubmit'); // Change name to avoid binding on inactive element
Then, I create a listener for my checkbox which toggles which control should be bound:
$('#notBornUSCheckbox').change(function() {
if (this.checked) {
// Not born us was checked, hide state dropdown and show freeform text box
$('#stateDropDownSection').addClass('d-none'); // Hide drop down
$('#birthPlaceDropDown').attr('name', 'nosubmit'); // Change name to something other than Passport.BirthPlace
$('#birthPlaceInfoTextbox').attr('name', 'Passport.BirthPlace'); // Set this one to be bound to the model
$('#stateTextboxSection').removeClass('d-none'); // Show the textbox field
} else { // Opposite of above lines
$('#stateDropDownSection').removeClass('d-none');
$('#stateTextboxSection').addClass('d-none');
$('#birthPlaceInfoTextbox').attr('name', 'nosubmit');
$('#birthPlaceDropDown').attr('name', 'Passport.BirthPlace');
}
});
Instead of using Razor #Html.TextBoxFor... for your textbox, you could try using raw HTML e.g. <input />. Also, have your JavaScript code remove the other field from the DOM entirely when a radio button is clicked, before submitting the form.