javascript funciton not being called - onclick

What's wrong in below code. It is not calling the function. After clicking compare it does not do anything. Function is not being called.
<!DOCTYPE html>
<html>
<body>
<input type="text" name="hash1" id="Hash1" placeholder="Enter First MD5" required>
<input type="text" name="hash2" id="Hash2" placeholder="Enter 2nd MD5" required>
<input type="button" value="Compare" onclick="myfn(); return false;" />
<script>
function myfn(){
document.write("Hello There");
hash1 = document.write(document.getElementsByName("hash1")[0].value;
hash2 = document.write(document.getElementsByName("hash2")[0].value;
action_src = hash1 + "/" + hash2;
document.write(acton_src);
}
</script>
</body>
</html>

You're missing some closing parenthesis on the hash variable definitions.
hash1 = document.write(document.getElementsByName("hash1")[0].value ) ;
hash2 = document.write(document.getElementsByName("hash2")[0].value ) ;
Also, I don't see why you need to return false on this line:
onclick="myfn(); return false;"
There is also a spelling error.
action_src = hash1 + "/" + hash2;
document.write(action_src);

Related

How to clear the value of an input if I write something on other input using css?

Suppose I have an input person name and another input business name:
<input name="nameofperson" id="nameofperson" class="form-control">
<input name="nameofbusiness" id="nameofbusiness" class="form-control" value="1234567">
If I started writing something on the nameofperson input. I want to clear the value of nameofbusiness, how to do that using CSS?
What you want to do is not possible through the Css,but you can do that using javascript or jquery.
With Javascript :
var nameofperson = document.getElementById('nameofperson');
var nameofbusiness = document.getElementById('nameofbusiness');
nameofperson.oninput = function() {
nameofbusiness.value = '';
}
<input type="text" name="nameofperson" id="nameofperson" class="form-control">
<input type="text" name="nameofbusiness" id="nameofbusiness" class="form-control" value="1234567">
With Jquery :
$(document).ready(function(){
$('#nameofperson').keyup(function(){
$('#nameofbusiness').val('');
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="nameofperson" id="nameofperson" class="form-control">
<input type="text" name="nameofbusiness" id="nameofbusiness" class="form-control" value="1234567">
You can't clear an input field's value using CSS. However, you can use JavaScript/JQuery for that.
Please find the working example.
$("#person").on("keyup", function(){
$("#business").val("");
});
input {
width: 350px;
height: 30px;
text-indent: 5;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="person" placeholder="Enter name of person">
<input type="text" id="business" placeholder="Enter your Business">
You add same class name for both input. For exampale I add 'nameofSomething' class.
and the jquery
$(".nameofSomething").keypress(function () {
var id = $(this).attr('id')
var text = $("#" + id).val();
$(".nameofSomething").val('');
$("#" + id).val(text);
});
You can change keypress to change, blur...or whatever you want.
This is basically done by javascript and not by css.
CSS as the name says is for styling purpose.
you can do this by javascript easily using onfocus method:
<input type="text" onfocus="document.getElementById('nameofbusiness').value = ''">

How to pass variable from hidden input box to another page

I am trying to get a value from a hidden input text box to another page, but it doesn't work. How to pass variable from hidden input box to another page?
Page1.asp
<input type="hidden" name="FormID" value="<% objRS("Form_id")%>
...
<input type="hidden" name="FormID" value="<%= nFormID %>">
<input type="button" value="Open Page2" onclick=openwin();"/>
Page2.asp
<%
iFormID = Request.Form("FormID")
sSQL = "select * from Form where Form_id = " & iFormID
When I click on the Button Open Page2, it doesn't get the value of FormID.
How do I fix it to get the FormID from Page1.asp?
Updated: when I tried to add a button with this JS, it won't get the variable from Page1.asp
I added this on page1.asp:
function openwin()
{window.open("Page2.asp","mywindow","width=500,height=400"):}
<input type="hidden" name="FormID" value="<%= nFormID %>">
<input type="button" value="Open Page2" onclick=openwin();"/>
Thanks.
Since it seems like you're trying to open up a pop up window, I've added a second answer, as you are not actually POSTing any data. if you want to use a pop up, the easiest way is to put the data in the query string, like so:
function openwin()
{window.open("Page2.asp?formID=" + document.frmReport.FormID.value, "mywindow","width=500,height=400"):}
now, i notice you're using a loop to generate the formIDs and using the same NAME for each field. so you'll need to loop through the set of fields, grab each ones value, and send it along as one string in the query string:
function openwin() {
var ids = '';
for( var index = 0; index < document.frmReport.FormID.length; index++ ) {
if( ids == '' )
ids += document.frmReport.FormID[ index ].value;
else
ids += ',' + document.frmReport.FormID[ index ].value;
}
window.open("Page2.asp?FormIDs=" + ids,"mywindow","width=500,height=400");
}
and on Page2.asp, you would do:
iFormIDs = Request.QueryString("FormIDs")
sSQL = "select * from Form where Form_id in ( " & iFormIDs & " ) "
You'll notice that I changed the sql to use the IN clause, that way you can get ALL records for a given set of formIDs, even if it's just one. This obviously doesn't take into account any security precautions to prevent sql injection, but this should get you started.
first, make sure your elements are in a form block with a METHOD of POST
second, your element
<input type="hidden" name="FormID" value="<% objRS("Form_id")%>
needs to be
<input type="hidden" name="FormID" value="<%= objRS("Form_id")%>" />
<%= is shorthand for Response.Write
so page1 would look like:
<form name="myForm" method="post" action="page2.asp">
<input type="hidden" name="FormID" value="<%= objRS("Form_id")%>" />
...
<input type="hidden" name="FormID" value="<%= nFormID %>">
<input type="submit" value="Open Page2" />
</form>

Count button in JavaScript

I want to create a small count button but don't know how to make it in JavaScript...
Here's the code :
HTML
<div id="input_div">
<input type="text" size="25" value="0" id="count">
<input type="button" value="-" id="moins">
<input type="button" value="+" id="plus">
</div>
It must increase AND decrease the number in the input[type=text] when click on the -/+ button.
Can someone help me ?
You'd need two things.
Variables - which are the way to store information in JavaScript
Event handlers, which are the way to react to events in JavaScript
First, let's create a script tag, and put a JavaScript count variable in it, we'll put it in the bottom of our body tag:
<script>
var count = 0;
</script>
Now, we want to create a handler, that is something that executes whenever the plus and minus signs are clicked
<script>
var count = 0;
function plus(){
count++;
}
function minus(){
count--;
}
</script>
We've created two functions to call when the buttons are clicked, but we do not update the value in the HTML, or call them yet, let's update the value in the HTML.
We'll do so by document.getElementByID for the element to update and then change its value. Our script tag should look something liks this:
<script>
var count = 0;
var countEl = document.getElementById("count");
function plus(){
count++;
countEl.value = count;
}
function minus(){
count--;
countEl.value = count;
}
</script>
One last thing, we need to tell the elements in the DOM to execute those handlers.
<div id="input_div">
<input type="text" size="25" value="0" id="count">
<input type="button" value="-" id="moins" onclick="minus()">
<input type="button" value="+" id="plus" onclick="plus()">
</div>
We've added them as event handlers to the DOM reacting to a click on the buttons, completing the task.
Now, here are some things we can improve:
We can use addEventListener to avoid polluting our DOM, and create unobtrusive JavaScript.
We can use a more advanced tool like KnockoutJS to handle binding the value we have to the DOM element instead of updating it ourselves.
We can read Eloquent JavaScript and learn more about how the language works!
Good luck, happy JavaScripting, and happy learning :)
DEMO FIDDLE FOR JAVASCRIPT
code html -
<div id="input_div">
<input type="text" size="25" value="0" id="count" />
<input type="button" value="-" id="minus" onClick = "doMinus();" />
<input type="button" value="+" id="plus" onClick = "doPlus();" />
</div>
code javaScript -
function doMinus(){
document.getElementById("count").value = --document.getElementById("count").value;
}
function doPlus(){
document.getElementById("count").value = ++document.getElementById("count").value;
}
jQuery Version
DEMO FIDDLE FOR JQUERY
code html -
<div id="input_div">
<input type="text" size="25" value="0" id="count" />
<input type="button" value="-" id="minus" />
<input type="button" value="+" id="plus" />
</div>
code jQuery -
$('#minus').click(function(){
$("#count").val(parseInt($("#count").val())-1);
});
$('#plus').click(function(){
$("#count").val(parseInt($("#count").val())+1);
});
U can write some script as shown
<script>
function increase(){
var a = 1;
var textBox = document.getElementById("count");
textBox.value = a;
a++;
}
</script>
<body>
<button type="button" onclick="increase()">+</button>
<input type="text" id="text">
</body>
similarly u can do it for - decrease button
in this case, I use input type range that display a slider :
<input type="range" id="myInputRange" value="15" min="0" max="50" step="1" onchange="document.getElementById('output').textContent=value" ><span id="output">15</span>
(instead of input type number that is not supported by IE)
This seems pretty simple.
(function() {
var count = 0;
var minusButton = document.getElementById("moins");
var plusButton = document.getElementById("plus");
var countBox = document.getElementById("count");
minusButton.onclick = function(e) {
countBox.value = --count;
};
plusButton.onclick = function(e) {
countBox.value = ++count;
};
})();

Checkbox boolean value Classic ASP

I have a checkbox
<input type="checkbox" name="chkNGI" id="prod_ngi_sn" value="1">
When it is checked I pass the value 1, but when it is not checked any value is passed.
I have to pass the value 0.
I've tried
<input type="checkbox" name="chkNGI" id="prod_ngi_sn" <%if prod_ngi_sn.checked then value="1" else value="0" end if%>>
But didn't work.
tks
Checkboxes only pass values when ticked. You need logic on the server side to accommodate that.
Dim chkNGI
chkNGI = Request("chkNGI") & ""
If chkNGI = "" Then
chkNGI = "0"
End If
<script>
function calcParam() {
var checked = document.getElementById("prod_ngi_sn").checked;
if (checked)
document.getElementById("hiddenNGI").value = "1";
else
document.getElementById("hiddenNGI").value = "0"; }
</script>
<input type="hidden" name="chkNGI" id="hiddenNGI">
<input type="checkbox" name="checkNGI" id="prod_ngi_sn" onClick="calcParam()">
You can try this single line solution
Information: RS=Recordset Object
<input type="checkbox" <%If RS("ColumnName")=True Then Response.Write(" checked='checked' ")%> name="tableColumn" value="1" >
I know this question is old, but I recently had to refactor some legacy code for a company in Classic ASP, and ran into this problem. The existing code used a hidden form field with the same name as the checkbox and looked for either "false" or "false, true" in the results. It felt kludgy, but the code also performed actions based on dynamically named checkbox fields with prefixes, so inferring "false" from a missing field would introduce different complications.
If you want a checkbox to return either "0" or "1", this technique should do the trick. It uses an unnamed checkbox to manipulate a named hidden field.
<html>
<body>
<% If isempty(Request("example")) Then %>
<form>
<input type="hidden" name="example" value="0">
<input type="checkbox" onclick="example.value=example.value=='1'?'0':'1'">
<input type="submit" value="Go">
</form>
<% Else %>
<p>example=<%=Request("example")%></p>
<% End If %>
</body>
</html>
Create a hidden input with the name "chkNGI".
Rename your current checkbox to something different.
Add handled for onClick on the checkbox and using a small javascript function, depending on the state of the checkbox, write 0 or 1 in the hidden input.
As an example,
<script>
function calcParam() {
var checked = document.getElementById("prod_ngi_sn").checked;
if (checked)
document.getElementById("hiddenNGI").value = "1";
else
document.getElementById("hiddenNGI").value = "0";
}
</script>
<input type="hidden" name="chkNGI" id="hiddenNGI">
<input type="checkbox" name="checkNGI" id="prod_ngi_sn" onClick="calcParam()">
Your solution in post to saving page;
save.asp
<%
' connection string bla bla
' RS = Recordset Object
If Request.Form("tableColumn")=1 Then
RS("ColumnName") = 1
Else
RS("ColumnName") = 0
End If
' other columns saving process bla bla bla
%>

Play Framework How can i pass collection to action create()?

I am starter with Play Framework. I got a problem when i passed parameters.
I want to pass a collection from view to controller. And i do not know how to do this. I always get "null" when i get a collection from view.
My code below:
Code in controller:
public static void create(List<Book> books) throws Exception {
for(Book book : books){
System.out.println(book.get(0).author) // i got null :(
}
}
Code in HTML
Book 1:
<input type="text" name="books.author" />
<input type="text" name="books.title" />
Book 2:
<input type="text" name="books.author" />
<input type="text" name="books.title" />
When i submit, i want to add 2 records into database include Book1 and Book2. Please support me
Thanks
You can make this work by simplying add the array indicator to your HTML code
Book 1:
<input type="text" name="books[0].author" />
<input type="text" name="books[0].title" />
Book 2:
<input type="text" name="books[1].author" />
<input type="text" name="books[1].title" />
I have tested this solution, and it works fine.
Also note that your println will not compile, as you are calling get(0) on the Book object, and not the List object. If you just println book.author, it outputs the author as required.
In case anyone needs an example of the Javascript for dyanmically adding and removing books (JQUERY needed):
<script type="text/javascript">
$(document).ready(function() {
var bookCount=0;
$('#btnAddBook').click(function() {
bookCount++;
//newElem = go up a to the parent div then grab the previous container
var newElem = $(this).parent().prev().clone().attr('id', 'book[' + bookCount + ']');
//for each input inside the div, change the index to the latest bookCount
$(newElem).find("input").each(function(){
var name = $(this).attr('name');
var leftBracket = name.indexOf("[");
var rightBracket = name.indexOf("]");
var beforeBracketString = name.substring(0,leftBracket+1);//+1 to include the bracket
var afterBracketString = name.substring(rightBracket);
$(this).attr('name', beforeBracketString + bookCount + afterBracketString);
});
//insert it at the end of the books
$(this).parent().prev().after(newElem);
$(newElem).find("input").each(function(){
$(this).attr('id', $(this).attr('id') + bookCount);
});
//enable the remove button
$('#btnRemovebook').removeAttr('disabled');
//If we are at 16 divs, disable the add button
if (bookCount == 15)
$(this).attr('disabled','disabled');
});
$('#btnRemoveBook').click(function() {
bookCount--;
//remove the last book div
$(this).parent().prev().remove();
//in case add was disabled, enable it
$('#btnAddbook').removeAttr('disabled');
//never let them remove the last book div
if (bookCount == 0)
$(this).attr('disabled','disabled');
});
});
</script>
<!-- HTML Snippet -->
<div id="book[0]">
<label> Book: </label>
<input type="text" name="books[0].author" value="Author" />
<input type="text" name="books[0].title" value="Title" />
</div>
<div>
<input type="button" id="btnAddbook" value="Add another book" />
<input type="button" id="btnRemovebook" value="Remove last book" disabled="disabled" />
</div>
<!-- REST of the HTML -->

Resources