I'm trying to change the text inside an input field to username.
The id for the field is is_username.
And in my Javascript file I've tried
document.getElementById("id_username").innerHTML = "Username";
document.getElementById("id_username").value = "Username";
document.querySelector(".id_username").textContent = "Username";
None are working... This site runs on django.
I know with html you can use placeholder to achieve this but these fields are created using django tags.
Any ideas?
I did try using these methods on a normal html input field and also had no luck.
htmlpage:
{% extends 'display_words.html' %}
{% block content %}
<div class="flex-container">
<div class="content">
<div class="display-box">
<!-- <p>Please login to see this page.</p> -->
{% if form.errors %}
<p>Your username and password didn't match. Please try again.</p>
{% endif %}
{% if next %}
{% if user.is_authenticated %}
<p>Your account doesn't have access to this page. To proceed,
please login with an account that has access.</p>
{% else %}
<p>Please login to see this page.</p>
{% endif %}
{% endif %}
<form method="post" action="{% url 'login' %}">
{% csrf_token %}
<table>
<tr>
<!-- <td>{{ form.username.label_tag }}</td> -->
<td>{{ form.username }}</td>
</tr>
<tr>
<!-- <td>{{ form.password.label_tag }}</td> -->
<td>{{ form.password }}</td>
</tr>
</table>
<input id="login-button" class="button" type="submit" value="login">
<input type="hidden" name="next" value="{{ next }}">
</form>
{# Assumes you setup the password_reset view in your URLconf #}
<p id="lost-password-link">Lost password?</p>
</div>
</div>
</div>
{% endblock %}
I created a test html file and it also doesn't work: code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Words & Phrases</title>
</head>
<body>
<input type="text" id=“id_username”>
<script>
document.querySelector('#id_username').textContent = 'username';
</script>
</body>
You can try with this:
document.querySelector('input[name="id_username"]').value = 'Username';
<input type="text" name="id_username" id="id_username" placeholder="Your text">
Would like to point out that when you tried your queryselector. You used ".id_username", this selects a class that is called that, not the id.
You can try to store the selected element in a variable then, run the innerHTML/textcontent.
const stubbornInput = document.getElementById("id_username");
stubbornInput.innerHTML = 'Whatever you want';
Ive had cases where this worked but, going straight for the thing didnt. Not sure if it helps or why it worked for me before but, worth a shot :)
your text input has the ID username, in your javascript it says id_username try this input and the javascript.
document.getElementById("username").value = "your_value_here";
<input type="text" name="username" id="username">
If that doesn't work, try using JQuery.
$("input[name=username]").val("hello_world")
ok below is the correct answer:
my main js file was causing an issue which is why it didn't work for me earlier. After i created a empty js file for this purpose it worked.
document.querySelector('#id_username').value = 'username' ;
document.querySelector('#id_username').addEventListener('click', function () {
document.querySelector('#id_username').value = '';
})
Found an easier was to do this:
document.querySelector('#id_username').setAttribute('placeholder', 'Username');
Related
I want to implement on the web page the sequential display of blocks with data input (i.e. after filling in the first block and pressing the "OK" button, the second block opens, then the third). The button in the last block sends a request to write data.
The problem is that with the help of reguest.form.get I can only receive data from the form in which the button is located. How can I get data from other forms?
I am new to Flask and my code may not be very correct. Maybe you should use javascript?
flask.py
#app.route('/scenario',methods = ['GET', 'POST'])
def control_task():
if(request.form.get('add') == 'add'):
ts.add_task(request.form['host_info'].get('task'),request.form['host_info'].get('hostId'), request.form['role_info'].get('role'))
html:
<button id='addTask_btn' onclick="hidden_element(addTask_block)">add task</button>
<span id="addTask_block" hidden="true">
<form name="host_info">
<select name="task">
{% for test in tests %}
<option>{{test}}</option>
{% endfor %}
</select>
</form name='service_info>
<button onclick="hidden_element('step_2')">Ok</button>
<div hidden="true" id="step_2">
<form name="service_info">
<select id="service" name="service">
{% for role in hosts[0].roles %}
<option value="{{role.serviceName}}">{{role.serviceName}}</option>
{% endfor %}
</select>
</form>
<button onclick="hidden_element('step_3')">Ok</button>
<button onclick="hidden_element('step_3')">Back</button>
</div>
<div id="step_3" hidden="true">
<form method="post" action="/scenario" name="role_info">
<select name="role">
{% for role in hosts[0].roles %}
<option name="{{role.roleType}}">{{role.roleType}}</option>
{% endfor %}
</select>
<button onclick="hidden_element(step_3)" name="add" value="add">Ok</button>
</form>
</div>
</span>
<script type="text/javascript">
function hidden_element(id){
document.getElementById(id).hidden = !document.getElementById(id).hidden;
}
</script>
im trying to send requests without refreshing the pae using ajax requests.
Watching the google event listerner when i i click the submit button my script is not begin called.
script.js
$("#new_app_b").click(function(event) {
//prevent submit
event.preventDefault();
//do things on submit
$.ajax({
data : {
data_app : $('#data_app').val(),
time_app : $('#time_app').val(),
id : $('#id').val()
},
type: "POST",
url: "/update",
beforeSend: function(){
//before send data
},
success: function(data){
// the data
console.log(data);
}
});
});
in layout.html i call this in the
in page html the part with the form is like this it has the {% extends 'layout.html' %} and the form is the the blockcontent and is begin displayed correctly it has 300+ lines so i wont post it all.
<form action="/update" method='POST' id="new_app">
<input name="id" id="id" type="hidden" value="{{ pratica[0][1] }}">
</input>
{% for cell in pratica %}
{% if cell[0] == 'data_app' %}
<td><input name="data_app" id="data_int" class="form-control form-control-sm"
type="text" value="{{ cell[1] }}"/></td>
{% elif cell[0] == 'time_app' %}
<td><input name="time_app" id="ora_app" class="form-control form-control-sm"
type="text" value="{{ cell[1] }}"/></td>
{% endif %}
{% endfor %}
<td>
<button id="new_app_b" type="submit" class="btn btn-success">
<i class="fa fa-check"></i>
</button>
</td>
</form>
while the /update controller is just like:
#app.route("/update", methods=['GET','POST'])
def update():
print("request: ")
print("id: " + request.form['id_pratica'])
print("data_app: " + request.form['data_app'])
print("time_app: " + request.form['time_app'])
return ''
So ive found the solution and this is what i did:
I moved the into the child template, using a block block like so:
{% block scripts %}
{{ super() }}
<script type="text/javascript" src="{{ url_for('static',filename='js/script.js') }}"></script>
{% endblock %}
and put that block on top of the content block, and then i call the block in the layout.html file like so
{% block scripts %}{% endblock %}
in the tag, and now is begin loaded and called when it needs to.
The following flask code creates a select .. option dropdown menu:
model:
class SelectForm(Form):
country = SelectField('Country', choices=[
('us','USA'),('gb','Great Britain'),('ru','Russia')])
flask app:
#app.route('/new')
def new():
form = SelectForm()
return render_template('new.html', form = form )
html file:
<form method=post action="/register">
{{ render_field(form.country) }}
<p><input type=submit value=Register>
</form>
macro file the defines render_field:
{% macro render_field(field) %}
<dt>{{ field.label }}
<dd>{{ field(**kwargs)|safe }}
{% if field.errors %}
<ul class=errors>
{% for error in field.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</dd>
{% endmacro %}
What is the best way to have onchange submit the results automatically without the user having to press the submit button? Is there a way to change the macro or what's the most elegant way?
thanks
It can be done by add javascript onchange function as attribute
<form method=post action="/register">
{{ render_field(form.country(**{"onchange":"this.form.submit()"})) }}
<input type=submit value=Register>
</form>
I'm trying to replace a 'reply' button with a form in my Django app.
Here's my Javascript code:
$(document).on('click', '.comment-reply-link', function(e) {
$(this).replaceWith("<form method='post'>{% csrf_token %}<div class='form-group'><label for='comment'>Comment:</label><textarea class='form-control' id='comment' rows='5' maxlength='300' minlength='1' name='comment' placeholder='Tell us how you loved this product :D'></textarea></div><button type='submit' name='post_comment' value='True'>Comment</button></form>");});
// The replacing line should contain no whitespace.
// Otherwise it will raise Uncaught SyntaxError: Unexpected token ILLEGAL
I get the form element but the problem is that {% csrf_token %} is processed as just unicode in replaceWith(). {% csrf_token %} is necessary in Django to submit a form. Any kind of help and advice will be thankful :)
Edit:
I assume that {% %} means that Django needs to be involved to retrieve the right value. So I thought I should render an html page with form and update that form with 'reply' button. Here's my logic.
view.html
<div class="reply">
<a class='comment-reply-link' href='{% url "rango:reply_form" %}'aria-label='Reply to Araujo'>Reply</a>
</div>
reply.js
function ajax_get_update(item){
$.get(url, function(results){
//get the parts of the result you want to update. Just select the needed parts of the response
// var reply_form = $("#reply_form", results);
var reply_form = $(".head", results);
console.log(reply_form);
//console.log(results);
//update the ajax_table_result with the return value
$(item).html(reply_form);
}, "html");
}
$(document).on('click', '.reply', function(e) {
console.log("Debuggin...");
e.preventDefault();
url = ($( '.comment-reply-link' )[0].href);
console.log(url);
ajax_get_update(this);
});
reply_form.html
<!DOCTYPE html>
... code omitted ....
<form id="reply_form" method="post">
{% csrf_token %}
<div class="form-group">
<label for="comment">Reply:</label>
<textarea class="form-control" id="comment" rows="5" maxlength="300" minlength="1" name="comment" placeholder="Tell us how you loved this product :D"></textarea>
</div>
<button type="submit" name="post_comment" value="True">Reply</button>
</form>
</body>
</html>
When I click the reply button, the button disappears but nothing updates. The html page variable results gets the correct html page data but it seems like
$(item).html(reply_form);
is not working right. Because when I do
$(item).html('<p>button disappears</p>');
the paragraph will appear. Any thoughts?
To use django template language in javascript you should encapsulate your code in a Verbatim tag.
example :
{% verbatim %}
var hello = {% if some_condition %} 'World' {% else %} 'foobar' {% endif %};
{% endverbatim %}
From the docs :
Stops the template engine from rendering the contents of this block tag.
A common use is to allow a JavaScript template layer that collides with Django’s syntax
In your case :
<script>
{% verbatim %}
$(document).on('click', '.comment-reply-link', function(e) {
$(this).replaceWith("<form method='post'> {% csrf_token %} </form>")
};
{% endverbatim %}
</script>
I am trying to learn using Jquery in django application.My code looks like this
views.py
from django.shortcuts import render
from django.http import HttpResponse
from airapp.models import Travel
def search_form(request):
return render(request, 'search_form.html')
def search(request):
if 'f' in request.GET and request.GET['f']:
q = request.GET['f']
books = Travel.objects.filter(froms__icontains=q)
return render(request, 'search_results.html',
{'books': books, 'query': q})
else:
return HttpResponse('Please submit a search term.')
urls.py
from django.conf.urls import patterns, include, url
from air import views
# Uncomment the next two lines to enable the admin:
from django.contrib import admin
admin.autodiscover()
urlpatterns = patterns('',
url(r'^admin/', include(admin.site.urls)),
url(r'^search-form/$', views.search_form),
url(r'^search/$', views.search),
)
search_form.html
<html>
<head>
<title>Search</title>
</head>
<body>
<form action="/search/" method="get">
FROM<input type="text" name="f"><br>
TO<input type="text" name="t"><br>
CLASS<input type="text" name="c"><br>
<input type="submit" value="Search">
</form>
</body>
</html>
search_results.html
<p>You searched for: <strong>{{ query }}</strong></p>
{% if books %}
<p>Found {{ books|length }} book{{ books|pluralize }}.</p>
<ul>
{% for book in books %}
<li>{{ book.froms }}</li>
<li>{{ book.to}}</li>
<li>{{ book.classs }}</li>
<li>{{ book.details }}</li>
{% endfor %}
</ul>
{% else %}
<p>No books matched your search criteria.</p>
{% endif %}
When the search result displays it will be on a new html page(search_results.html).I want to display search results on the same html page where form is created(search_form.html) when I click search button.Can I display it using jquery? Can anybody help me write the code.
Also anybody suggest me good tutorial for learning ajax and jquery & how can I use it django
application development.
Here is an working sample. Just need to modify search_form.html:
<html>
<head>
<title>Search</title>
<script language="JavaScript" type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script language="JavaScript" type="text/javascript">
$(function() {
$("#search-form").submit(function() {
var from = $("#search-form :input[name='f']").val();
$.get("/search/", { f : from })
.done(function(data) {
$("#search-result").html(data);
$("#search-result").show();
});
return false;
})});
</script>
</head>
<body>
<form id="search-form">
FROM<input type="text" name="f"><br>
TO<input type="text" name="t"><br>
CLASS<input type="text" name="c"><br>
<input type="submit" value="Search">
</form>
<div id="search-result" style="display:none">
</div>
</body>
</html>
Basically, what it does:
include jQuery in head
in the script, replace 'submit' behaviour of 'search-form': use $.get to send a GET request to server, and directly show response in 'search-result' div. (you may modify the codes to make it more robust)
in body, create a 'search-result' div for displaying response. Make it invisible by default (may do it in a CSS file)
For Ajax, you may refer to: http://api.jquery.com/jquery.ajax/. $.get is a shortcut based on $.ajax: http://api.jquery.com/jquery.get/