I am currently trying to toggle a div to show and hide when a user clicks on a button and it currently works. However, as i am using a for loop to display some list of data, the toggle button only shows and hides the div of the first set of data from the list and not the rest. There are multiple of the same buttons as it is being looped in a for loop and each one should toggle display the div of their current data from the list and not the first.
Is this because the id is the same for all the divs if so how would i go around fixing this?
Code:
<div class = "profile">
{% for i in profile %}
<button onclick="toggle()">Show Form</button>
...
<div class ="form" id = "toggle_display">
<form method="POST" enctype="multipart/form-data">
<input type="text" name="username">
<button class="uploadPost" type="submit">submit</button>
</form>
</div>
{% endfor %}
</div>
Javascript:
function toggle() {
var x = document.getElementById("toggle_display");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
As epascarello already mentioned, id is referencing a single element. You need to make each section unique with an id.
You use the for loop counter (as in the below example) or use another unique id.
<div class="profile">
{% for i in profile %}
<button onclick="toggle({{ forloop.counter }})">Show Form</button>
...
<div class="form" id="toggle_display_{{ forloop.counter }}">
<form method="POST" enctype="multipart/form-data">
<input type="text" name="username">
<button class="uploadPost" type="submit">submit</button>
</form>
</div>
{% endfor %}
</div>
<script>
function toggle(id) {
var x = document.getElementById(`toggle_display_${id}`);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
Related
I have the following Django form:
class EmailForm(forms.Form):
name = forms.CharField(...)
email = forms.CharField(...)
message = forms.CharField(...)
Which I then render in my HTML like so:
<div class="controls">
{% csrf_token %}
<div class="form-group">
{{ form.name }}
</div>
<div class="form-group">
{{ form.email }}
</div>
<div class="form-group">
{{ form.message }}
</div>
<input type="submit" value="Say hello" onclick="sendEmail(this);">
</div>
I'm trying to disable the submit button after it's pressed. Here's my javascript function:
<script>
function sendEmail(this1)
{
var name = document.getElementById("form_name").value;
var email = document.getElementById("form_email").value;
var message = document.getElementById("form_message").value;
var re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var result = re.test(String(email).toLowerCase());
if (name != "" && result && message != "") {
this1.disabled=true;
}
}
</script>
When I override the onclick field in the <input> tag, the button becomes disabled as a result of the Javascript function, but the form does not submit (the page is not reloaded, Django doesn't process the POST). How do I continue the default action for the submit button after disabling it?
Your template does not have the <form></form> tags, without those there is no form to submit.
You should write:
<form id="MyForm">
<div class="controls">
...
<input type="submit" value="Say hello" onclick="sendEmail(this);">
</div>
</form>
That should do it, but in case it doesn't (I realy think it will), you can add this to your sendEmail function:
document.getElementById("myForm").submit();
how about onclick="this.submit()"
Hi I have a Laravel Blade template where I built a search function and I want to load a div after the page has reloaded, when I submit the form. Otherwise when the page loads with the results, the results don't show. I want the Javascript to execute while on the page (hide the div), and then when the page refreshes then the div must become visible.
My HTML form is:
<form action="" class="search-form" method="GET" onsubmit="showDiv();">
<input type="text" name="location" placeholder="Search" required>
<button class="search-btn" type="submit"><i class="flaticon-026-search"></i></button>
</form>
And the div I want to show after page load is:
<div id="hideDiv" style="display:none">
#foreach($locations as $location)
#foreach($location->landmark as $landmark)
<p>{{$landmark->name}}</p>
#endforeach
#endforeach
</div>
My JavaScript:
function showDiv() {
var div = document.getElementById("hideDiv");
if (div.style.display == 'none') {
div.style.display = '';
}
else {
div.style.display = 'block';
}
}
Write window.onload = showDiv; before your function
If you have only one submit button on same page than you can use like bellow (not tested, just try to suggest)
#if (Request::isMethod('post'))
<div id="hideDiv" style="display:none">
#foreach($locations as $location)
#foreach($location->landmark as $landmark)
<p>{{$landmark->name}}</p>
#endforeach
#endforeach
</div>
#endif
PS: try to identify ispostback event in Page or Javascript which one is preferable.
this is code which i try to change
<%if(request.getParameter("hiderefineproblem")==null){%>
<input type="button" value="Refine Problem" onclick="return showHide();" style="background-color: #3399ff;color:#ffffff;" />
<%}%>
<div id="showHideDiv" style="display: none;">
<p>Would one of the following diagnoses apply? Choose the most
specific one:</p>
<FORM ACTION="snomedMapping.jsp#newres" METHOD="POST">
<%
pstm = Con.prepareStatement(selectsql);
pstm.setString(1, snomedid);
pstm.setString(2, snomedname);
resultSet = pstm.executeQuery();
boolean bSubmit=false;
int refid=0;
String[] pipe;
while (resultSet.next()) {
refid=resultSet.getInt("refid");
pipe= resultSet.getString("mapRule").split("\\|");
if (pipe.length > 1){bSubmit=true;
%>
<input type="radio" id="radioList" value="<%=refid%>" name="refId"/>
<tr><%=pipe[1]%></tr>
<br />
<%
}
}
%>
<%if(bSubmit){%>
<input type="hidden" name='hiderefineproblem' value='yes'/>
<INPUT TYPE="SUBMIT" value="Submit" style="background-color: #3399ff;color:#ffffff;">
<%}%>
</FORM>
</div>
<script>
function showHide() {
var ele = document.getElementById("showHideDiv");
if (ele.style.display == "block") {
ele.style.display = "none";
} else {
ele.style.display = "block";
}
}
</script>
there is button its value is Refine Problem and i need not to show the button if there is no result for that button . the button contains some value from database .sometimes there is no value for that button . so that time i need not to show the button .
how to hide the on click button if the value is empty .
if I understand the question correctly, I believe you can give all the buttons a class and then iterate across all the buttons with javascript, checking the value each time, and if the value is nothing using javascript to .hide() that button
I have a form that consists of checkbox fields, now on form submission we should check whether atleast one checkbox is checked
html code
<form id="form_check" class="form" action="/path/to/some/url" method="POST">
{% for field in fields %}
<div class="check_fields">
<input class="select-unselect" type="checkbox" name="invite" value="">
{{field}}
</div>
{% endfor %}
<input type="submit" class="btn btn-primary" value="Submit" onsubmit="atleast_onecheckbox()"/>
</form>
javascript code
<script type="text/javascript">
function atleast_onecheckbox()
{
var value = $("[name=invite]:checked").length > 0);
alert(value) ;
if (!value)
{
alert("Please.....");
}
}
</script>
So when i clicked on the submit button, the form is redirecting to the url mentioned in the action, but its not even hitting the javascript function atleast_onecheckbox()
what wrong in the above code, can anyone please make the above code work ?
You shouldn't attach JavaScript event directly in the HTML, this is a really bad practice.
Instead, because you use jQuery, you should use jQuery event handler :
$('#form_check').on('submit', function (e) {
if ($("input[type=checkbox]:checked").length === 0) {
e.preventDefault();
alert('no way you submit it without checking a box');
return false;
}
});
(http://jsbin.com/IXeK/1/edit)
If you really want to use HTML onsubmit, even if it's bad (and you should feel bad just by thinking of it), the onsubmit should be:
attached to the form
should prevent the default event on submit
return false
So it covers everything. Like here http://jsbin.com/IXeK/2/edit
<form onsubmit="return atleast_onecheckbox(event)" id="form_check" class="form" action="/path/to/some/url" method="POST">
<div class="check_fields">
<input class="select-unselect" type="checkbox" name="invite" value="">
</div>
<input type="submit" class="btn btn-primary" value="Submit" />
function atleast_onecheckbox(e) {
if ($("input[type=checkbox]:checked").length === 0) {
e.preventDefault();
alert('no way you submit it without checking a box');
return false;
}
}
<script type="text/javascript">
function atleast_onecheckbox()
{
if (document.getElementById('invite').checked) {
alert('the checkbox is checked');
}
else
{
alert("please check atleast one..");
return false;
}
}
</script>
<form id="form_check" class="form" action="/path/to/some/url" method="POST">
{% for field in fields %}
<div class="check_fields">
<input class="select-unselect" type="checkbox" name="invite" id="invite" value="">
{{field}}
</div>
{% endfor %}
<input type="submit" class="btn btn-primary" value="Submit" onclick=" return atleast_onecheckbox()"/>
</form>
I have a table inside a div that contains a form for the user to fill out. Above the div is a button that says "Customer info". I want to show the form only if the customer wants to fill out the information. The idea is that if they want to fill it out they can click the button and the form will appear below. There are many of these sections so I only want the customer to have to see what they want to see. Below is an example...
<input type="button" value="Customer Info" onClick="">
<div>
<form>
<table>
<tr>
<td>Name:<input type="text" value="" id="name" name="name"></td>
</tr>
</table>
</div>
My question is how can I write a simple javascript function that will act upon clicking the button that will show and hide the Div? The form would still be there just hidden and the values would just be blank.
You can use the onClick event to do that:
Working Example
HTML:
<button id="some_id">Hide div</button>
<form id="some_form">
<form>
javascript:
<script type="text/javascript">
var theButton = document.getElementById('some_id');
theButton.onclick = function() {
document.getElementById('some_form').style.visibility='hidden';
}
</script>
Inline javascript is considered bad practice
ie. onClick=""
Use something like this instead
<input id="info" type="button" value="Customer Info">
<div id="myDiv">
<form>Name:
<input type="text" value="" id="name" name="name">
</input>
</form>
</div>
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function show() {
myDiv.style.visibility = "visible";
}
function hide() {
myDiv.style.visibility = "hidden";
}
function toggle() {
if (myDiv.style.visibility === "hidden") {
show();
} else {
hide();
}
}
hide();
button.addEventListener("click", toggle, false);
on jsfiddle
Here is the code suggested by David Thomas in the comments. It performs exactly the same task, but uses shorthand if-else for the toggle function and doesn't provide you with separate show and hide functions.
<input id="info" type="button" value="Customer Info">
<div id="myDiv">
<form>Name:
<input type="text" value="" id="name" name="name">
</input>
</form>
</div>
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function toggle() {
myDiv.style.visibility = myDiv.style.visibility === "hidden" ? "visible" : "hidden";
}
toggle();
button.addEventListener("click", toggle, false);
on jsfiddle
<script type="text/javascript">
$("#music").click(function () {
$("#musicinfo").show("slow");
});
</script>
you can change effect like as toggle, fadeToggle in place of show...