How to hide id in my html form? - javascript

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.

Related

How do I use the <form> tag to send data to a javascript function?

I was testing and trying to make an little form that when the user entered their name, it would take that name and display it on to the screen.
<html>
<head>
<center><h1>Test-Page</h1></center>
</head>
<body>
<div class="someRandomStuff">
<h2 id="testingID">What is your first name?</h2>
<form name="input" action="login.js" method="post">
Name: <input type="text" name="userID"/>
<input type="submit" value="Submit"/>
</form>
</div>
</body>
Here is the js file
function displaySystem(name) {
document.getElementById("testingID").innerHTML("Ah, hello there" + name)
}
I know that I could probably do this in one HTML file, however I want to try and make the js and HTML separate. ANY help is appreciated.
You don't send data to a JavaScript function, but a JavaScript function can retrieve form data.
For example, and input of type text can be retrieved using its value property:
var input = document.getElementById("userID");
var value = input.value;
I know that I could probably do this in one HTML file, however I want
to try and make the js and HTML separate.
Nice step. In fact, there's no practical difference in terms of retrieving form data or manipulating the document from an inline script or a script that's included using a <script src=... element. The main difference is a script embedded in the HTML document won't be cached, while a one included as a separate file will be cached (obviously, there're other reasons if we talk about good separation of concerns!).
use onkeypress event on textbox and pass this to display that value and use that parameter in function to display it
<div class="someRandomStuff">
<h2 id="testingID">What is your first name?</h2>
<form name="input" action="login.js" method="post">
Name: <input type="text" name="userID" onkeypress="displaySystem(this)"/>
<input type="submit" value="Submit"/>
</form>
</div>
//javascript function
function displaySystem(name) {
document.getElementById("testingID").innerHTML("Ah, hello there" + name.value)
}

How can we send a GET request to a python bottle server without using Javascript?

This is the simple HTML page with a text box and a search button
<!DOCTYPE html>
<html>
<body>
<input type="text" name="queryString"><br>
<button type="button" name="searchButton">Search</button>
</body>
</html>
Initially, the above HTML page is served by a bottle server (I am going to omit the code), and then I wish to process the search queryString using:
#route('/', method = 'GET')
def processSearch():
queryString = request.forms.get("queryString")
print 'queryString is:', keyword
return 'processSearch() executed'
My question is: without a Javascript onclick listener function (which would make an AJAX call), is it possible to click on the search button and fire a GET request which starts executing processSearch()?
Note: I am aware POST is ideal for form data submission, but I am still interested to know if this will work.
Put it in a form, and change the button to a submit input:
<form action="yourscript.py" method="get">
<input type="text" name="queryString"><br>
<input type="submit" name="searchButton" value="Search">
</form>

How to store value entered in an input textfield in a database

I am using springsourcetoolsuite, grails project and I am coming across this problem of storing the value entered in the textfield into a table in the database created in mysql and connected to grails. Now I have a domain class called property having variables address, city,
zipcode, country etc. which are also fields of the table property in mysql database.
When I ask user to fill in using this piece of code-(gsp views)
<body>
<g:textField name="address" maxlength="40" value="${propertyInstance?.address}" />
</body>
it works and the value is stored in database.
However I am required to append an input field on each button click, so i have put this input field in a function called add(). Here is the code-
<head>
<script type="text/javascript">
function add() {
var newP = document.createElement("p");
var input1,
area = document.getElementsByTagName("form")[0];
input1 = document.createElement("input");
input1.type = "g:textField";
input1.placeholder = "street";
input1.value = "${propertyInstance?.address}";
newP.appendChild(input1);
area.appendChild(newP);
}
</script>
</head>
<body>
<g:form name='prop' method="post" action="save">
<input type="button" value="+Add" onclick= "add();" ><br>
<g:submitButton name="create" class="save" value="${message(code: 'default.button.create.label', default: 'Create')}" />
</g:form>
</body>
Now when i do this and run it, it takes null value and prints an error saying 'address cannot be null'. Now i cannot see what is wrong, but if anyone is familiar with groovy/javscript.. please help me figure out whats wrong.
Thanks a lot.
I'm guessing you did not use the scaffolding feature to generate your views in first place. If you didn't, it's a good way to start understanding the basics of grails. In your case specifically, you need to put your fields that you want to pass to the controller (like address) inside the form tag. Like:
<body>
<g:form name='prop' method="post" action="save">
<g:textField name="address" maxlength="40" value="${propertyInstance?.address}" />
<input type="button" value="+Add" onclick= "add();" ><br>
<g:submitButton name="create" class="save" value="${message(code: 'default.button.create.label', default: 'Create')}" />
</g:form>
</body>
Another thing is you can't create a tag input and put its type as "g:textfield". The html input fields only have limited types. The one you want to use in this case is really "text". In any case, the grails' tags are rendered before the javascript (in the server-side) while javascript code is rendered client-side. So the first time the page is rendered they will work. But to insert something dynamically in your page, you need ajax because the grails' tags are already rendered. The value ${propertyInstance?.address} needs to be processed at the server, returned and established in your field. Therefore you need to make an async request. Anyway JQuery is your guy.
Also, for what you're doing, JQuery helps to manipulate HTML DOM, that will make your work so much easier.

How can I set a JavaScript variable from a form without a user clicking submit?

I have a form with several different text inputs. The value of each corresponds to a unique JavaScript variable. The variable is then written out on the page.
Is there a way to update the variable automatically so the user doesn't have to hit submit and reload the page each time? I have heard AJAX could be a potential answer to this, but I am unfamiliar with it. If that route is best, are there certain scripts that would be recommended?
You might want to look into jQuery as a good first start into javscript in the browser. For instance, you could write:
<form id="form-id">
<input id="first" type="text" />
<input id="second" type="text" />
<input id="third" type="text" />
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var first, second, third;
$(function(){
$("#form-id").submit(function(){
first = $("#first").value();
second = $("#second").value();
third = $("#third").value();
return false; //Prevent the form from submitting.
});
});
</script>
http://jquery.com/

j-query and javascript form using multiple submits not submitting all data from form

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.

Categories