I have a question about Django. When you configure your views to use a method of POST to get the information back from the client into your view/template can you also send over the div id's ?
The reason I ask is that I have a form with loads of information coming back from the client and want to be able to sort it (within Django) by the div id`s.
Thanks,
Yes, that's possible. You can add a hidden input field which contains the value of the div id. Just put the following within the <form> tags:
<input type="hidden" name="form_id value="name_of_id">
You can now retrieve the value in your Django view.
Alternative but similar solution is to give the button, to post the form with, the name of the div id.
<button type="submit" value="div id" name="div id">Submit</button>
Related
I am trying to do same small service and sometimes I am sending requests to my Rest Api.
I am getting two problems:
How to fill field in form in html using thymeleaf? I have form like this and would like to fill fields with current values (th:value="${}" - not working for me):
<form th:action="#{/offences/edit}" method="post" th:object="${createOffenceForm}"> <input th:field="*{name}" th:value="${currentOffence.name}"/> <input th:field="*{penaltyPoints}" th:value="${currentOffence.penaltyPoints}"/> <input th:field="*{amountOfFine}" th:value="${currentOffence.amountOfFine}"/> <button type="submit">UPDATE</button> </form>
The problem is with loading css styles to html when I redirect to the site with path variable. For example i created html with two buttons. First one is hardcoded:
<a th:href="#{/offences/test}" class="link" style="text-decoration: none"><button class="buttonOK" type="submit">EDIT</button></a>
after redirect my site looks like this (everything works, it should be like that):
`
and here is after second button - redirect with path variable:
<a th:href="#{'/offences/edit/' + ${offence.id}}" class="link" style="text-decoration: none"><button class="buttonOK" type="submit">EDIT</button></a>
and view after load:
For the issue with your form data not being filled, this is because th:field and th:value are not meant to be used at the same time. So th:field ends up overwriting you value.
In your case I would suggest either manualy setting name (and id) or replacing th:object with the a filled version of the bean you want to return and only using th:field
As for the second issue it looks like a faulty fragment return on a post call to me but need to atleast have the controller functions and more complete html to say anything about that. And in general it's advisable to have 1 question per problem and not bundle things.
Ok so i found soultion.
To fill fields in form I only had to add to ModelMap form with fields.
Something like this and thymeleaf autofilled fields in html.
modelMap.addAttribute("createOffenceForm", new CreateOffenceForm(offenceDTO.getName(), offenceDTO.getPenaltyPoints(), offenceDTO.getAmountOfFine()));
Second solution is simple too. When changed mapping in Controller from #GetMapping("/path/{id}") to #GetMapping("/path-{id}") - everything works. There is no other problems with styles...
Is it possible to have 2 values on a radio button? If so how can I use them via Node Js and the body parser element. I also have the express addon
<input id="Celcius"type="radio" name="unit" value="metric">
But it also should have another value of "Celcius". How can I choose between those to values when it is possible?
I want something like that:
<input id="Celcius"type="radio" name="unit" value="metric", "Celcius">
Please check out this example https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/radio it's pretty easy to get several values on radio buttons the key is that all radio element have the same name attribute so in node/express you retrieve the unit query parameter. Please edit your post and tag it html not nodejs your question is more about html.
Hi I have isolated an tag containing a radio button and would like to select one of the options. Here is the full input path:
<input type="radio" id="gen" name="gen" value="Male" onclick="ajaxSetAge(this.value);" />
and I am using the following:
postForm("http://www.archersmate.co.uk/",
radio = 'Female')
however this returns:
Error in nchar(str) : invalid multibyte string 1
What am I doing wrong here?
You need to refer to the name of the form field, not the type, like:
postForm('http://www.archersmate.co.uk', gen='Female')
That said, you won't be able to fill out the form on that website because it does not work as an HTTP POST request. Instead, it triggers an AJAX event. So, you're either going to have to go through the javascript and figure out if there's an underlying document you can access directly OR you'll have to use something like PhantomJS to trigger the relevant form fields and record the resulting javascript-generated contents.
I have a very long form, so I need to separate it to different pages.
My questions are:
1) How to save the form input when the user navigate to next form, and when the user back to previous form, the data entered previously will still be there.
2) How can I save the data of the incomplete form and provide the user a link so that he can go to that link and continue to fill in the form before actually submit it.
Please advise me on how to achieve these. Thanks in advance.
Simply submit the form to next form page and in next form page you can populate hidden fields with the received data from form1
form2.php
$form1Field = $_POST;
form2.php
<form action="form3.php">
<input id='form1_name' type='hidden' value='<?=form1Field['name']?>' />
<input id='form12_email' type='text' value='' />
</form>
#katti's suggestion is good, easy way is to make divs for each form and hide using css "display:none" all divs except 1st, then on a click button, hide div1 and show div2 so on. that way you wont need many form and will need less code and faster solution.
You can use hidden fields for this purpose. Or save data in cookies.
You can divide the form by dynamically loading the next part of the form using JavaScript.
And it is a better user experience too not loading a new page completely.
In this case you can save the form content in a JSON object which can be posted to the server once the user hits submit.
I would like to create a form that changes dynamically.
I have a form for creating a project (with fields such as: project_name, project_description...) and the project can have any amount (bigger or equal to 0) of categories.
What i want is to display a button which would give the user the option to add another category field. In addition I would also like the option for category fields to be "deleteable" by the user (if he changes his mind or made a mistake). What would be the best way to do so. I would like an Ajax type solution.
My solution so far is to leave an empty div beneath the last category and onclick of the button to load another field into that div with yet another div which will be used for the next div. Not to happy with this solution since i now have to count how many fields I have and give each div it's own id which complicates the matter even more.
Is there a more simple solution to this?
If you are trying to add fields dynamically with a button, you can easily do so by doing something like the following:
HTML:
<form>
<p>
<label>Name:</label> <input type="text">
<label>Age:</label> <input type="text">
<span class="remove">Remove</span>
</p>
<p>
<span class="add">Add fields</span>
</p>
</form>
JS:
$(".add").click(function() {
$("form > p:first-child").clone(true).insertBefore("form > p:last-child");
return false;
});
$(".remove").click(function() {
$(this).parent().remove();
});
Demo: http://jsfiddle.net/UeSsu/1/
I started to write a form generator is based on a definition in JSON a while back. It works but could use some enhancements. It's written using Prototype.js but it wouldn't be a huge effort to port it over to jQuery.
You're welcome to steal the code. (just view source)
I've done something similar. To delete fields I didn't really removed fields. I just hidden them with a display:none and had a hidden input "delete" that I trigger to true. Then, the page receiving the result knows which field is to be deleted in the database.
They are not deleted before the form is submitted. It's like a "two pass" conception. But if you don't really need a true ajax, it works fine. Otherwise you need your JS remove function to call the server and tell to delete the field with its id. A little bit more complex to code.