We Keep Coding

Form or a on click trigger submit

I currently have a code, that is loaded dynamicly, so I can not tweak it much.
But now I want to trigger the submit when clicking the entire <form>.
How can I achive that?
My current code:
<form action="http://example.com" method="post" target="_blank">
<input type="hidden" name="token" value="1234567890">
<input type="hidden" name="SESSID" value="1234567890">
<input type="hidden" name="PHPID" value="1234567890">
<input type="submit" value="Open Panel">
<p class="pakb-box-icon"><i class="icon-webadres"></i></p>
<h2>Manage</h2>
<p class="pakb-box-desc">TEXT</p>
<p class="pakb-view-all">TEXT</p>
</form>

Okay man, i will answer this, but on the next time you need to post your javascript code.
This is your markup:
<!-- add a id here -->
<form id="form" action="http://example.com" method="post" target="_blank">
<input type="hidden" name="token" value="1234567890">
<input type="hidden" name="SESSID" value="1234567890">
<input type="hidden" name="PHPID" value="1234567890">
<!-- add a id here -->
<input id="submit" type="submit" value="Open Panel">
<p class="pakb-box-icon"><i class="icon-webadres"></i></p>
<h2>Manage</h2>
<p class="pakb-box-desc">TEXT</p>
<p class="pakb-view-all">TEXT</p>
</form>
With your markup set now is time for the JS:
<script type="text/javascript">
//call a anonymous function
$(document).ready(function(){
//Event On click of the form
$('#form').click(function(){
$('#submit').trigger('click');
})
})
</script>
Obs: submit the form on click in his body dont makes sense to me, please explain this.
Edit:
You can learn basic JS and JQuery on www.codecademy.com

function onsuccess(response) show the entire page on the hidden div

every time the images uploaded, it shows the entire page on the hidden div, like the screenshot shows
the webpage before upload
and
after uploaded
I feel there's something wrong in the script tag below, because if I delete the response variable, it won't show the duplicated page anymore, but also no more response, which is supposed to be shown on the page.
Any help will be appreciated!
here's the code:
<form action="" method="POST" id="uploadimg" enctype="multipart/form-data">
<div class="form-group col-md-6"><br />
<label class="col-md-4">Product thumbnail:</label><input type="file" name="thumb" id="thumb"/><br />
<label class="col-md-4">Profile picture01:</label><input type="file" name="file01"/><br />
<label class="col-md-4">Profile picture02:</label><input type="file" name="file02"/><br />
<label class="col-md-4">Profile picture03:</label><input type="file" name="file03"/><br />
<label class="col-md-4">Profile picture04:</label><input type="file" name="file04"/><br />
<label class="col-md-4">Farmer's photo:</label><input type="file" name="farmer"/><br /><br />
<input class="btn btn-warning btn-sm " type="submit" value="Upload" name="submit"/><br /><br />
</div>
<div class="form-group col-md-6">
<div id="loader">
<center><img src="images/loading.gif" /></center>
</div>
<div id="onsuccessmsg"></div>
</div>
</form>
<script>
$(document).ready(function(){
function onsuccess(response){
$("#loader").hide();
$("#onsuccessmsg").html('</b><div id="msg">'+response+'</div>');
}
$("#uploadimg").on('submit',function(){
$("#loader").show();
var options={
success: onsuccess
};
$(this).ajaxSubmit(options);
return false;
});
});
</script>

jQuery content panel switcher prevents from accessing form elements

I'm using jquery.content-panel-switcher for a top menu in my site. It shows and hides different forms such as
<div id="switcher-panel"></div>
<!-- form to add, later do import here -->
<div id="adds-content" class="switcher-content set1 show">
<form action='/post' name='submitform' id="submitform" method='post' class='pure-form'>
<textarea columns="40" rows="4" name='entry[body]' id="statement" placeholder='enter a note here to visualize the words and their connections, you can also use #hashtags and #mentions.'><% if (url) { %><%= urltitle %> <%= url %> #bookmarks<% } %></textarea>
<div id="addToContextsLabel">contexts:</div>
<ul id="addToContexts"></ul>
<input type="hidden" id="addedContexts" name="addedContexts">
<input type="hidden" id="context" name="context" value="<%= context %>">
<input type="hidden" id="selectedContexts" name="selectedContexts" value="">
<input type="hidden" name="statementid" value="">
<br>
<input type='submit' name="submit" id="submitbutton" value="save" class="pure-button pure-button-primary">
</form>
</div>
<!-- form to find -->
<div id="finds-content" class="switcher-content set1">
<form class="pure-form" id="searchform">
<input type="text" id="search" size="17" maxlength="20" class="pure-input" placeholder="search...">
<input type='submit' name="submit" value="find" class="pure-button pure-button-primary">
</form>
</div>
Now when I try to access elements using document.submitform.submit.value = "edit"; it simply doesn't work even if the form shows up in my browser.
Do you know what the problem could be?
Thanks!

The problem here was that document.submitform was using the div elements as they were loaded by the browser. However, the jquery.content-panel-switcher js module was rendering those invisible because it simply copies them into another div after the page is loaded.
So what I had to do was to access the actual elements created by jquery.content-panel-switcher using jquery and then it worked fine.

Django and work with modal window

I created site in Django. And have many items in cycle "for", and with opening modal window i'm needed delete needed item.
How i can get id post (in my case "get_post_id") and sent to modal window (div).
but i'm needed to have modal window not in cycle.
Thanks!
My code:
<script>
$(document).ready(function(){
$("#popup4").hide();
PopUpHide4();
});
function PopUpShow4(){
$("#popup4").show();
$(document).keyup(function(ev){
if(ev.keyCode == 27)
$("#popup4").hide();
});
}
function PopUpHide4(){
$("#popup4").hide();
}
</script>
MODAL WINDOW:
<div class="b-popup" id="popup4" >
<div class="b-popup-content">
<form action="" method="post">{% csrf_token %}
<p><center><font color=#000000 size="5"><b>ADD</b></font></center></p>
<input id="id_post_request" value="2" type="hidden" maxlength="1" name="post_request" type="text">
<input id="id_get_post_id" value="{{ item.id }}" type="hidden" maxlength="9999" name="get_post_id" type="text">
<div class="photo" data-title="Remove"><input type="image" src="{{ STATIC_URL }}images/delete.png" border="0" width="17" height="17"></div>
<input type="button" value="Cancel" ONCLICK="window.location.href='/'" style="height:30px; width:80px" ></center>
</form>
</div>
</div>
calling modal window :
<div id="b-container">
<div class="photo" data-title="Remove"><input type="image" src="{{ STATIC_URL }}images/delete.png" border="0" width="17" height="17"></div>
</div>

Use javascript to pass the needed id to your modal window.
Is there some button in your cycled items to choose the item? Render an item id within a cycled item, bind onclick event to the button and pass the item id to the modal window hidden input.

Thanks for help!!!
i'm do this)))
Here is code, in case if needed someone)
script :
<script>
function PopUpShow4(id){
document.getElementById('id_get_post_id').value=id;
$("#popup4").show();
$(document).keyup(function(ev){
if(ev.keyCode == 27)
$("#popup4").hide();
});
}
function PopUpHide4(){
$("#popup4").hide();
}
</script>
MODAL WINDOW:
<div class="b-popupdel" id="popup4" >
<div class="b-popup-contentdel">
<form action="" method="post">{% csrf_token %}
<p><center><font color=#000000 size="5"><b>Confirm Delete</b></font></center></p>
<input id="id_post_request" value="2" type="hidden" maxlength="1" name="post_request" type="text">
<center><p><font size="2">Are you sure you want to delete this post?</font></p></center>
<input id="id_get_post_id" id_get_post_id" type="hidden" maxlength="9999" name="get_post_id" type="text">
<center><input type="submit" value="Remove" style="height:30px; width:80px">
<input type="button" value="Cancel" ONCLICK="PopUpHide4()" style="height:30px; width:80px" ></center>
</form>
</div>
</div>
calling modal window :
<div style="width:5%; float:right;">
<div id="b-container">
<div class="photo" data-title="Remove"><input type="image" src="{{ STATIC_URL }}images/delete.png" border="0" width="17" height="17" ></div>
</div>
</div>

Javascript click listener cycling through two times

I'm listening for clicks on links within a . When I watch what's happening in the debugger upon clicking the link, it's cycling through the Javascript below two times. This means it appears to be doing nothing, but it's working the first time, just being undone the second.
Here's the Javascript in question:
$("#list a").click(function(e) {
var id = $(e.currentTarget).attr("id");
$("div#edit_due_at_"+id).toggleClass("hidden");
$("span.due_"+id).toggleClass("hidden");
$(this).addClass("hidden");
e.preventDefault();
return false
});
and the HTML:
<ul id="list">
<li class="up" id="32">
<span class="cname ">sally and eddie</span>
<br>
<span class="time-ago">Added 6 days ago.</span><br>
<span class="time-ago">
add due date
</span>
<form accept-charset="UTF-8" action="/contacts/32" class="edit_contact" id="edit_contact_32" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="dwUgdONDp1TWL6zpdI1+UYvcy3KvIxWUIoRiqMwJklY=" /></div>
<input id="contact_done" name="contact[done]" type="hidden" value="true" />
<input id="contact_date_done" name="contact[date_done]" type="hidden" value="2012-11-21" />
<input class="btn btn-small hidden done_btn" name="commit" type="submit" value="Mark as done" />
</form> </li>
<li class="up" id="33">
<span class="cname ">adding a contact for next Monday</span>
<br>
<span class="time-ago">Added 5 days ago.</span><br>
<span class="time-ago">
add due date
</span>
<form accept-charset="UTF-8" action="/contacts/33" class="edit_contact" id="edit_contact_33" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="dwUgdONDp1TWL6zpdI1+UYvcy3KvIxWUIoRiqMwJklY=" /></div>
<input id="contact_done" name="contact[done]" type="hidden" value="true" />
<input id="contact_date_done" name="contact[date_done]" type="hidden" value="2012-11-21" />
<input class="btn btn-small hidden done_btn" name="commit" type="submit" value="Mark as done" />
</form> </li>........</ul>
I thought that return false would stop it from cycling through again?

Is this what you need?
// add a custom click handler
$("#list a").on("click.myHandler", function(e) {
e.preventDefault();
var id = $(e.currentTarget).attr("id");
$("div#edit_due_at_"+id).toggleClass("hidden");
$("span.due_"+id).toggleClass("hidden");
$(this).addClass("hidden");
// remove the custom click handler
$(this).off("click.myHandler");
});
Notice I removed return false, since e.preventDefault() does the same

The issue was that I had two contacts.js files being referenced in the HTML head. In rails I copied the contacts.js.coffee file and just made it contacts.js, but I didn't delete the original contacts.js.coffee file. Once I deleted the second file, it worked fine with the original JS and the JS from #Sander.