I know that it is dumb question to ask but I need to know can I get form widget attributes through PHP I mean not a value but id, class or even parent or child. If I set them.
<label name = '{{ item.modulePath }}' id = 'main' class = 'menu_label' **parent = ''** **childs = ''**>{{ item.modulePath }}</label>
If it is not possible then how can I make JS function before form validation and post array to the form as value?
<form action="{{ path('menu_manage') }}" method="post">
Yes I could get values and submit form to JS and then by JS get all attributes and then through ajax send it to a PHP handler. But it would be longer, because I will need to include all components that have this action to the handle information to place where I need it.
Here is an example how to realize it
http://symfony2forum.org/threads/5-Using-Symfony2-jQuery-and-Ajax
You can call get() method on form field in template, e.g. having a form in form with field item:
{{ form.item.get('id') }}
The class - only if set - can be retrieved like this:
{{ form.item.get('attr').class }}
Related
I am using Spring Boot and Thymeleaf with some vanilla JavaScript. In my JavaScript, I have an array of strings as below:
var tags = ["ramen", "japanese"];
I want to use JavaScript to dynamically add/remove items in this array before it gets submitted to the backend. The user can add 0..* tags.
Data gets submitted to the backend only via HTML <form> submits. There is also a model attribute which captures these details from the HTML form into Spring called VenueForm.
<form id="tag-form" class="form" method="POST" th:object="${venueForm} th:action="/venue/tag">
VenueForm.java
public class VenueForm {
private List<String> tags;
private Object otherStuff;
...
// Getters and Setters
}
VenueController.java
#Controller
#RequestMapping("/venue/tag")
public class VenueController {
#PostMapping
public String createVenue(#ModelAttribute VenueForm venueForm){
List<String> tags = venueForm.getTags();
System.out.printLn(tag);
return "tags"
}
}
How do I assign the JavaScript array tags to the Thymeleaf form List field tags?
Usually the input comes from th:field="*{tags}" in an input field but because its an array I am not sure how to achieve this. Any help would be much appreciated. Please note jQuery is not an option, only vanilla JS.
I have tried to stop the HTML form submit using JS, then assigning the input field using JS but that did not work.
<input type="submit" value="Submit" th:onsubmit="submitForm(event)">
main.js
function submitForm(event){
event.preventDefault();
venueTagInput.value = JSON.stringify(tags);
console.log("sumitting...");
}
This existing post has helped me figure this out (Send Array using HTML)! Thymeleaf is just a templating engine on the server side, it renders into basic HTML. There is no need to do anything Thymeleaf specific to send an array of elements in the form. You have to follow the basic HTML way using the name attribute on an input field. You can use Javascript to create new DOM elements and making sure that for each element the index is incremented. No changes are needed on the controller side. Spring can work out that name="tags[0]" is tags.get(0);
<input type="text" class="form-control tag" id="1" name="tags[0]" value="">
I have a model that has fields like name, place (address), lat, lon, hobby etc.
In order to get these fields, I am using a form in Django. Something like this:
from django import forms
from .models import User
class UserForm(forms.ModelForm):
class Meta:
model = User
fields = ["name", "place", "date","hobbies"]
widgets = {
'date': SelectDateWidget()
}
I want to use the google maps api to enable autocompletion on filling the address from here: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
and read the lat/lon from the place address itself.
In my html, i render it like:
<form method="POST" action="" enctype='multipart/form-data'>{% csrf_token %}
{{ form.as_p}}
{{ form.media }}
<input type="submit" value="Submit Post"/>
</form>
However, I wonder how can I link the 'id' of the 'places' text box to the javascript action that enables autocompletion?
Then I plan to use lat/lan as hidden field to populate their values, client side.
Is there a better way to get this done?
Django renders form with id name something like id_model_field_name. If your model field name is place, in form the id of that field will be id_place. Using this id you can enable autocomplete javascript code.
I have django form with name and email address as a form field in forms.py file.
I am implementing that form in HTML Page with the help of {form.as_p}.
Now I have JavaScript inside that same HTML page with...
{% block javascript %}
<script>
</script>
{% endblock %}
Now How can I access both form variable inside this script tag. I want to validate data at client-side and than wants to send at server.
Will getElementById() method works? and If so what I need to write for access my form variables or any other good alternative.
Thanks
Yes, its possible. Django gives an id in format id_fieldname to each field you define in your Django form.
E.g. For name field, id in HTML will be id_name and For email_address field ,id in HTML will be id_email_address
Now you can simply use getElementById() in your JS with these ID for validation.
I wanted to know if it is possible to use a custom form for braintree payment integration. By custom i mean something like this:
<form id="payment-form" method="post" action="/checkout.php">
<div id="customField>{$customField;}</div>
<div id="customField2>{$customField2;}</div>
<input type="submit" value="PAY">
</form>
<script src="https://js.braintreegateway.com/js/braintree-2.31.0.min.js"></script>
<script>
var clientToken = "";
braintree.setup("clientToken", "dropin", {
container: "payment-form"
});
</script>
I want to post my custom fields to checkout.php but it seems the form only returns payment method nonce. I don't want to store any of these custom values in braintree's vault either. Checkout.php just adds all values together (including received payment method nonce) from previous forms in an array and passes these values to .NET server. So is there a way to pass these values to checkout.php?
It looks like this is certainly possible using Braintree's Custom Fields
It looks like, though, you are not properly formatting your form to populate the Drop-In, per your Braintree.setup. The container you are specifying in the braintree.setup will correlate to a div element that will in turn be the drop in, not the ID of the complete payment form.
So, if you have a form that looks like;
<form>
<div id="dropin-container"></div>
</form>
, you'd want your braintree.setup to look like;
braintree.setup('CLIENT-TOKEN-FROM-SERVER', 'dropin', {container: 'dropin-container'});
in order to convert the DIV "dropin-container" into the Drop In.
Custom Fields, though, can be included in the form, but you'll want to make them simply HTML Input elements, as opposed to div elements, that will be returned to your server alongside the nonce.
Hope this helps!
I'm sending form to server and when I receive it back I need to access its elements
Here goes code.
some html
<here is the form>
<div style='border-style:solid' id='user_pic_n_1'></div>
and javascript
pic_type=($(this).attr('pic_type'));
pic_number=($(this).attr('pic_number'));
explanation : pic_type gets > user_pic and pic_number gets > 1
so the form is user_pic_form_n_1
$('#'+pic_type+'_form_n_'+pic_number).ajaxSubmit({
success: function(responseimage)
{
$('#'+pic_type+'_n_'+pic_number).html(responseimage);
now when the form gets into div, I need to get it's inputs values.
please write code sample of how can I Access it
In my example i'm trying to get values by alert like this but probably I write with mistakes
alert($(\"#'+pic_type+'_form_n_'+pic_number+' input[name=error]\").val());
elements name is 'error' so I'm trying to get it from the form.
UPDATE
Here is HTML form which I get from AJAX
<form id='user_pic_form_n_1' name='user_pic_form_n_1' action='/serv/pic_processor.php' method='POST'>
<input type='hidden' name='error' value='456'/>
</form>
So when it gets from server into responseimage variable, I put that into Div and then I want to access this form and alert value of tag named 'error'
You can pass the element contain the response html as a context along with selector.
selectorElem = '#'+pic_type+'_n_'+pic_number;
$(selectorElem).html(responseimage);
$('form[name=A] #B', $(selectorElem))
Edit, based on comments
Live demo
Html
<form id='user_pic_form_n_1' name='user_pic_form_n_1' action='/serv/pic_processor.php' method='POST'>
<input type='hidden' name='error' value='456'/>
</form>
Javascript
pic_type = 'user_pic';
pic_number= '1';
selectorElem = pic_type+'_form_n_'+pic_number;
selectorElem = 'form[name='+selectorElem +'] :hidden[name=error]';
alert($(selectorElem).val());
After you have done this:
$('#'+pic_type+'_n_'+pic_number).html(responseimage);
and you are looking for val of #b inside form with class a, it would be as:
$('#'+pic_type+'_n_'+pic_number+ ' form.a #b').val()