This is a newbie question. I am having difficulty adding a calandar widget into my form using the Dynarch calendar widget. My example is derived from the from the popup example at: http://www.dynarch.com/projects/calendar/doc/ .
When I click the button, the calendar doesn't show up. Instead the page refreshes. I can't tell what is happening here. I have no idea if this trigger is even getting called correctly.
My server is receiving a post command. No post should be getting called here. I don't want any data to be posted, just the calendar trigger to make the calendar visible. This should just load the button.
How can I get to the bottom of what is really happening here? Advice?
<!--- If I look at what's loaded in firebug, the scripts load correctly -->
<link rel="stylesheet" type="text/css" href="/site_media/css/gold/gold.css" />
<script type="text/javascript" src="/site_media/js/jscal2.js"></script>
<script type="text/javascript" src="/site_media/js/en.js"></script>
<form accept-charset="utf-8" method="post" action="" id="edit_activity_form">
<table>
<tr><th>Date:</th>
<td> <input type="text" id="id_activity_date" name="activity_date">
<!-- When I click this button. The calendar does not appear. Instead I get a page refresh. -->
<button id="calendar-trigger">...</button>
<script type="text/javascript">
Calendar.setup({
trigger : "calendar-trigger",
inputField : "id_activity_date",
onSelect : function() { this.hide() }
});
</script></td>
</td>
</table>
<input type="submit" onclick="send_activity_form();return false;" value="save" id="activity_save">
</form>
I don't see the function send_activity_form() defined anywhere.
Your onclick may be calling a nonexistent function.
Related
I have created a simple login form, and want to run a js function once the form is submitted. However, nothing happens when I click submit.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CARD GAME</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="index.js"></script>
<form>
Username: <input type="text" id="htmlUsername"><br><br>
Password: <input type="password" id="htmlPassword"><br>
<input type="submit" onclick="login()">
</form>
</body>
</html>
JS:
function login(){
console.log("here")
}
Is the browser window reloaded when you press the submit button? If yes, then your form is indeed submitted.
You don't see the output of console.log statement because, by default, browser window is reloaded on form submission. You can disable this default behaviour using event.preventDefault()
HTML:
<form>
Username: <input type="text" id="htmlUsername"><br><br>
Password: <input type="password" id="htmlPassword"><br>
<input type="submit" onclick="login(event)">
</form>
JS:
function login(event){
event.preventDefault();
console.log("here")
}
Suggested improvements:
Instead of using onclick attribute on the button element, use .addEventListener() to add the click event listener on the button.
Move the script element to just before the closing body tag.
Alternative Solution
Another way is to preserve the logs. In the "Netowork" tab of browser developer tools, check the "preserve logs" checkbox input. Doing this will preserve the output of console.log statement even if the browser window is reloaded on form submission.
For details of how to enable this option in developer tools, visit:
How to enable “Preserve Log” in Network tab in Chrome developer tools by default?
If you want to perform certain actions by clicking on submit, then declare event onsubmit inside the form tag. Like this:
<form onsubmit="login(event);">
...
And add disabling the default behavior - event.preventDefault().
function login(event){
event.preventDefault();
console.log("here")
}
But I do not advise you to declare js events inside html tags. Since this will lead to bad consequences.
Try it:
let form_submit = document.querySelector('form');
form_submit.onsubmit = function(event) {
event.preventDefault();
console.log("here");
}
And remove onclick="login()" from input submit. Here:
<input type="submit" onclick="login()">
I see two things here for now.
Put your code which includes js file at the bottom of your HTML, just above closing body tag.
<script src="index.js"></script>
Check if your JavaScript file is called index.js
Replace <input type="submit" onclick="login()"> with <button type="button" onclick="login()">Login</button>
Add an ID to your form: <form id="myform"> ...
in your JS do:
function login(){
alert("here");
document.querySelector("#myform").submit();
}
i`m using spring boot with thymeleaf and i want to pass some values through form. One of the value i want to pass is "id" (to find object in my data base and update some value). However i realized, when i check the source of html page i can change "id" and save value to else id number. How i can hide my id ? (i need it to invoke method in controller). My code looks like this:
<form th:action="#{/set-value}" method="post" th:object="${carDto}">
<input type="hidden" th:field="*{id}" th:value="*{id}" />
<input type="text" th:field="*{value}" />
<button type="submit" class="btn btn-default">Submit</button>
</form>
You could try saving that information in the form of server-side encrypted cookie. That way, the user won't be able to change it to a valid other encrypted ID (unless they know your app's secret key and things like that). The user could still manipulate it, which might mean they could encounter an error while your server is decrypting the cookie, but that issue will be only for them and only because they tried to manipulate data and they won't be able to access any of the data that they shouldn't.
you should really go for the PHP/back-end stuff for sensitive form data processing. However i tried to hide the id using javaScript/jquery but it doesn't really hide the id; anyone who has access to my javascript file can see the code easily.
var btn = document.getElementById("myButton");
btn.addEventListener("click",myFun);
function myFun(){
$("form input").attr("id","hello");
console.log($("#hello").val());
$("form input").removeAttr("id");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form>
<input type="text">
<button id="myButton" type="button">Click</button>
</form>
<script src="script.js"></script>
</body>
</html>
check the developer tools when clicking the button.
I am trying to suppress the post action to switch my tab position to the first TAB. I am calling an Ajax function which makes the unseen post, preventing the refresh/post from happening, thus staying on the tab that the user is in. I created a test code to simulate this (I didn't use tabs for my test).
HTML:
<!DOCTYPE html>
<html>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<head>
<meta charset=utf-8>
<title>Click</title>
</head>
<script src="../../../Product/WebServer/Software/Page Format/Ajax_Submit.js"></script>
<body>
<p>Click on This!</p>
<input type="submit" name="Submit" id="Submit" value="Submit Changes"/>
</body>
</html>
JavaScript:
// JavaScript Document Ajax Submit
$(function() {//Open function
$('#Submit').click (function(){ //Open select
alert("Submit button is being suppressed!");
doAjaxCode();
}); //Close select
function doAjaxCode(SubmitStatus) { //Open doAjaxCode
$.ajax({
type: "POST",
url: "index_phaseII_v02.html",
data: "Nb_var97=" + SubmitStatus,
})
} //Close doAjaxCode
}); //Close function
This works as expected, no problems, wonderful!!!
Problem:
When I take this sample code and apply it to my actual code, it doesn't work?
It doesn't even display the alert msg? By the way, yes I am including the following line to run
the script in my main html page: any ideas as to what is happening?
Thank you,
Neil P
Update
Ok, I don't know why or partially know why, but doing this made it work!
$('#Submit').click (function(){ //Open select <------changed this line from this
to
$('input').click (function(){ //Open select <-------#Submit to input
The reason I say, I partially know, is because if the button's id is Submit like so,
<input type="submit" name="Submit" id="Submit" value="Submit Changes"/>
then, I expect it to work???? I know that now by doing input, it will work for all my buttons, but in the future if I only want to address a particular button by using its id attribute, then it will come in handy..
Can anyone comment?
Thanks.
Ok, I don't know why or partially know why, but doing this made it work!
$('#Submit').click (function(){ //Open select <------changed this line from this
to
$('input').click (function(){ //Open select <-------#Submit to input
The reason I say, I partially know, is because if the button's id is Submit like so,
<input type="submit" name="Submit" id="Submit" value="Submit Changes"/>
then, I expect it to work???? I know that now by doing input, it will work for all my
buttons, but in the future if I only want to address a particular button by using its
id attribute, then it will come in handy..
Can anyone comment?
Thanks.
Here is shortly what I am doing and why:
I have a form, which is preprocessed with different scripts
according user input
Usually script is executed in less than seconds, however one script
may take around 10 seconds depending on server load etc.
Now I want to implement this "popup" containing: "Please wait
while..." Im using blockUI for that - simple plugin for implementing
this.
However, blockUI for fast script execution is quite stupid, as user
will only see the popup flashing on the screen.
Therefore I want to set timeout for it, like 1000ms, so that blockUI
is displayed even though form would have been already completed
So far I've tried quite many things, now I basically use
preventDefault to cancel form submit for the setTimeout, but Im
unable to complete the form submit after that.
Edit: Found out, that as javascript is asynchronous language, without preventDefault (stop form submitting) setTimeout never launches and action returns true straight away.
<form method="post" name="my_form" id="my_form" enctype="multipart/form-data">
<input type="submit" name="my_submit" id="my_submit" value="Submit" />
<div id="form_loading_message" style="display:none;">
<h1>Please wait, page is loading...</h1>
</div>
</form>
$('#my_submit').click(function(event) {
$.blockUI({
message: $('#form_loading_message')
});
var form = $('#my_form');
event.preventDefault();
setTimeout(function () {
form.unbind('submit').submit();
$.unblockUI();
}, 1000);
});
If you have better idea how to do this, please, I'm open for other suggestions aswell...
Not familiar with blockUI, but... Here's how I would do it:
<html>
<head>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#my_submit').click(function() {
$('#form_loading_message').show();
setTimeout('submitForm()', 1000);
});
});
function submitForm(){
$('#my_form').submit();
}
</script>
</head>
<body>
<form method="post" name="my_form" id="my_form" action="google.com" enctype="multipart/form-data">
<input type="button" name="my_submit" id="my_submit" value="Submit" />
<div id="form_loading_message" style="display:none;">
<h1>Please wait, page is loading...</h1>
</div>
</form>
</body>
</html>
As I didnt find out how to do this with javascript, I used php sleep() -function before redirecting user to another page. Naturally preventDefault needed to be removed as it blocked the submit action. This solution solves the use case for me: Just to display user a message that the page is loading.
I'm not hugely good with javascript or jQuery, mainly dealing with databases, but I've been having a little trouble getting a rather complex form to submit all its data.
Basically it amounts to three different submit buttons which are meant to post the data in the form with a different privacy setting sent to the table. The table in the database is being updated with the correct privacy setting for each button, but it isn't sending a value for the thought part of the form to the php file it is meant to.
The form is implemented in the HTML as follows:
<FORM action="thought_post.php" method="post" name="thought">
<INPUT onfocus="this.select(); this.value=''"
type="text" value="Thought..."
size="72" />
<div class="megamenu" style="position: absolute; ;left: 478px; top: 11px;">
<ul>
<li class="downservices">Publish...</li>
<div class="servicesdropped">
<ul class="right">
<input type="hidden" name="privacy">
<li>Private</li>
<li>Friends only</li>
<li>Public</li>
</ul>
</div>
</ul>
</div>
</FORM>
and the javascript in the header of the same page is as follows:
<link rel="stylesheet" href="dropdown.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").click(function(){
$(".servicesdropped").toggle("fast");
});
});
</script>
<script language="JavaScript" type="text/javascript">
<!--
function poststyle(selectedtype)
{
document.thought.privacy.value = selectedtype ;
document.thought.submit() ;
}
-->
</script>
If anyone could explain why the thought value entered by the user isn't being passed to thought_post.php that would be wonderful!
Try assigning a name to your "thought" input. name is required for a form control to be valid for submission:
<INPUT onfocus="this.select(); this.value=''" type="text" value="Thought..." size="72" name="thought" />
As a side note, make sure your other input is valid markup as well, input tags should be self closing:
<input type="hidden" name="privacy" />
After making these changes and inspecting the form post with FireBug, I could see the correct value for "thought" go through.
Additionally, as the other answer mentions, you should separate your JavaScript and HTML and maybe accomplish this completely with jQuery.
Hope that helps!
Try setting an id for the privacy field (like, say, id="privacy") and selecting it with this:
getElementById("privacy").value = selectedtype;
By the way, you can put all the javascript in one <script> block:
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").click(function(){
$(".servicesdropped").toggle("fast");
});
});
function poststyle(selectedtype)
{
document.thought.privacy.value = selectedtype ;
document.thought.submit() ;
}
</script>
You could also very easily handle the focus event on your input with jQuery so the scripting isn't down in your HTML.