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.
Related
Problem: Two-way data binding for checkbox in *ngFor directive
I have a template driven form in which I am using *ngFor to loop over few radio buttons. Based on one key, I show checkbox next to radio buttons in disabled state on page load. If user clicks on a radio button and if it has a corresponding checkbox, I enable its state. I can then click on checkbox.
However, I want to be able to disable previous checkbox and reset its value when user clicks on another radio button and thus pass the correct form values. (I show them as json in beloe code demo url)
Demo code example: https://stackblitz.com/edit/angular-ba8pfz
If you see the demo code, I should be able to reset the checkbox if I toggle between "Marvel Heroes" and "Dc Heroes"
Appreciate your time and suggestions.
You cannot simply set the checked attribute to false as that sets the content checked attribute to an empty string - which is the equivalent of true or checked. Hence the check mark goes away, but the Boolean state of the control is not changed. Have to change the Boolean state of the control. One simple way to do that is to generate a click or change event on the control.
Try this:
enableRecursive(event, recursiveChk: boolean) {
let clickEvent = new MouseEvent('click');
this.recursiveChk.map((elem) => {
if (elem.nativeElement.checked) {
elem.nativeElement.dispatchEvent(clickEvent);
}
elem.nativeElement.disabled = true;
if (`recursive_${event.target.id}` === elem.nativeElement.id) {
elem.nativeElement.disabled = false;
}
});
}
I have a form where I select a value in drop-down and submit it but when I try to access that form the value in the drop-down still remains selected, I want to deselect it on every new launch.
You can use the following to set the value of the dropdown to what you want.
document.querySelector('#idOfDropdown').value = desired_value;
// desired_value is the 'value' property of the option you want selected.
If the default option is written as
<option value=''>--select--</option>
...then, use this:
document.querySelector('#idOfDropdown').value = '';
I'm assuming that this line will be best placed at the end of the function that gets called when you submit the Form.
Working on a small personal project with jQuery and JavaScript. This is a one page app on a static website.
The game (if you can call it that) asks the user to select 2 characters from the selection area and pressing enter transfers the input to the "battle-area" where when you hit the "fight" button random numbers are subtracted form the characters hitpoints as attack dmg.
I am stuck on the selection part. I need two separate input fields populated with unique names. I am able to write text into the field and transfer it but I want the input fields to be populated by clicking on the individual pictures on the screen. My code seems to populate both fields at once. I can hardcode two buttons to each populate one input field, the problem is that I have about 15 image buttons and I need to be able to click either of those to populate the fields.
function selectFighter(name) {
var x = name;
var input = $('#fighter1_name').val();
$('#fighter1_name').val(x);
if ($('#fighter1_name').val() != "") {
$('#fighter2_name').val(x);
}
}
I have tried to add a condition that checks the first input field for a value and if it is NOT empty, to instead write the input into the second field. But that is causing one button click to populate both fields. I need one button click to populate one field, and then when I click another button to populate the other, empty field.
I am passing in a name with an onclick event: onclick="selectFighter('bob');"
Problem is when I click the image, both fields are populated with the same name. I want to be able to click an image to populate one input field, and then click a different image and put that name in the input field.
This should do the trick. We're checking if the first field has a value - if so, we populate the second one - otherwise the first one.
function selectFighter(name) {
if ($('#fighter1_name').val()) {
$('#fighter2_name').val(name);
} else {
$('#fighter1_name').val(name);
}
}
Add a class to the elements you click, and an ID, and remove all inline javascript.
Then add a script tag with the event handler targeting the elements
$('.toBeClicked').on('click', function() {
var x = $(this).data('name'); // note that "name" is not a good name for a variable
var f1 = $('#fighter1_name');
var f2 = $('#fighter2_name');
f1.val() === "" ? f1.val(x) : f2.val(x);
});
$('#clear').on('click', function() { $('input[id^=fighter]').val("") })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toBeClicked" data-name="bob">Bob</button>
<button class="toBeClicked" data-name="jon">Jon</button>
<button class="toBeClicked" data-name="ann">Ann</button>
<br><br>
Fighter 1 <input id="fighter1_name"><br>
Fighter 2 <input id="fighter2_name">
<br><br>
<button id="clear">Clear</button>
I am using Breezejs with Durandal in my .net application.
When i try to edit a section which contains
1) Text box
2) Dropdownlist with caption and options
3) TextArea
4) Button
Onclick of edit button, i am binding these controls with their respective values(till then it works fine).
After i change textbox value to "test123" and dropdown values to it's "caption" and clicking on save button. In save function I am creating Breeze entity in modified state and updating them as shown below,
var personEntity = breeze.manager.createEntity('TableName', { Id: id }, breeze.EntityState.Unchanged);
personEntity.entityAspect.entityState.setModified();
personEntity.name(name); //"test123"
personEntity.dropdownValue(status) //I have selected the caption, means value is undefined
personEntity.textArea(address); //No change
then making savechanges() to DB.
In table text box value is updated properly but the value of dropdownlist is not updated(from some value
to Null);
Kindly suggest me some solution so that i can save null value in DB if caption is selected.
Thanks in Advance......
The problem is that the ContextProvider on the server is not detecting that the dropdownValue has changed. It determines the changed properties by looking at the entityAspect.originalValues. Since you create a new entity with dropdownValue = undefined, and you set it to undefined, no change is detected.
Change your code to initialize the dropdownValue to something else:
var personEntity = breeze.manager.createEntity('TableName',
{ Id: id, dropdownValue: 'something' });
personEntity.name(name);
personEntity.dropdownValue(status);
personEntity.textArea(address);
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();
}