I have a an HTML page with an input area and a submit button.
I am using jQuery to alert the user of what their input is. (Really I am trying to store that in a variable but that will be trivial once I get this working).
Can someone help me understand why it is not working, as well as a solution? Thanks.
The HTML form is as follows:
<html>
<head>
</head>
<body>
<form>
<input type="text" class="grid_size">
<button type="submit">Submit Me!</button>
</form>
<!-- Add jQuery -->
<script src="js/jquery.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
The custom jQuery I am using is this:
$(document).ready(function() {
$("form").submit(function() {
alert( grabUserInput )});
});
function grabUserInput() {
return $("form").find(".grid-size").val();
}
You named your class grid_size, and search for a class grid-size in javascript code.
This code should fix a typo:
$(document).ready(function() {
$("form").submit(function() {
alert( grabUserInput() );
});
});
function grabUserInput() {
return $("form").find(".grid_size").val();
}
Try this -- grabUserInput is a function, not a variable -- so you have to include () to invoke the function:
$(document).ready(function() {
$("form").submit(function() {
alert( grabUserInput() );
});
});
And your markup has to match your selector:
<input type="text" class="grid-size">
BONUS:
In case all you want is to alert the value, and you do not want to submit the form use the following:
$(document).ready(function() {
$("form").submit(function(e) {
e.preventDefault()
alert( grabUserInput() );
});
});
why not try to put some id
<input id="input_grid_size" type="text" class="grid_size">
<button id="button_submit" type="submit">Submit Me!</button>
and jq
$(document).ready(function() {
$("#button_submit").click(function() {
alert($('#input_grid_size').val()); }); });
it seem your code also forgot the ";" and "()" in the alert
Related
I have a situation where I have a textbox which will be updated with some value and as soon as the textbox gets its value a javascript function will be called. I have tried something but this not working
if (validSubmission) {
User user = new User();
String StatusMessage=user.executeUserTask("_create_","",userBusinessEmailId,userPassword,cityOfBirth,userFirstName,userLastName,userCompanyName,userCompanyAddress,userPhone,"");
if(StatusMessage.equalsIgnoreCase("OK")) {
response.sendRedirect("login.jsp?retMessage="+"Account created sucessfully");
}
else {
//response.sendRedirect("login.jsp?retMessage="+StatusMessage);
responseMsg = "Invalid Domain Entry";
{%>
Redirect();
<%}
}
}
This is the text box where I am getting the value
<input type="text" id="keyToShowInvalidDomain" name="keyToShowInvalidDomain" value="<%=responseMsg%>" onchange="Redirect()">
This is the function which I am trying to call
<script type="text/javascript">
function Redirect() {
alert($("#keyToShowInvalidDomain").val());
}
</script>
Can anyone help, please?
For input type text onchange event will not work try to use onkeyup or onkeydown
<input type="text" id="keyToShowInvalidDomain" name="keyToShowInvalidDomain" value="<%=responseMsg%>" onkeyup="Redirect()">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function Redirect() {
alert($("#keyToShowInvalidDomain").val());
}
</script>
</head>
<body>
<input type="text" id="keyToShowInvalidDomain" name="keyToShowInvalidDomain" value="<%=responseMsg%>" onchange="Redirect()">
</body>
</html>
You are using selectors based on jQuery so you need to add jQuery library to your page. Please try this.
$(document).ready(function() {
$('#keyToShowInvalidDomain').change(function(){
// Call redirect function
});
}
Above code should work with JQuery.
I need your help,
Normally when a user inputs data, how can the code be modified below so as to program it to ignore any whitespacing, i.e. "a blank keyboard space" ?
Here is the HTML markup in question:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function() {
$("#fileno").bind("input", function(e) {
$('#save').prop('disabled', false)
});
}
</script>
</head>
<body>
<input type="button" value="save" id="save" disabled>
</body>
</html>
Use the Trim function
https://www.w3schools.com/jsref/jsref_trim_string.asp
fieldName = element.property.Trim()
You can try adding a pattern attribute with regex to check or you can add a simple check in javascript when clicking the button to submit it.
regex pattern like:
pattern="[A-Za-z0-9]"
javascript jquery check like:
if($('#inputId').text()) this check will not pass if the value is undefined, null or empty string
I have a routine that performs a Form action if OK is clicked on a webpage alert:
SCRIPT
<script language="JavaScript" type="text/javascript">
function checkDelete(){
return confirm('Are you sure you want to delete this record?');
}
</script>
HTML
<form action="https://website/delUser.php" method="Post">
<input value="Delete" type="submit" onclick="return checkDelete()" class="submitButton">
</form>
In an attempt to make the alert a little more attractive I have tried to use jAlert:
JALERT SCRIPT
<script type="text/javascript">
$(document).ready( function()
{
$("#confirm_button").click( function()
{
jConfirm('Delete this user?', 'Title', function(result)
{
jAlert('Pressed: ' + result, 'Results'); //This displays the result as an alert - true or false
});
});
});
</script>
The new alert displays but I am unsure how to change the HTML so that the Form action only runs if the alert returns true.
Try something like this:
HTML
<form name="test_form" action="action.php">
<input type="button" value="Delete" class="submitButton" id="confirm_button">
</form>
JS
$("#confirm_button").click( function()
{
jConfirm('Delete this user?', 'Title', function(result)
{
if(result){
// FORM ACTION HERE
test_form.submit();
}
});
});
I'm trying to add Datepicker to my online form as part of my student assessment. I'm very new to all this and I'm having issues . I've downloaded and linked to my jquery UI and I've typed the code as per the jquery UI website states but the calendar doesn't pop up on my form when I click in the Date field like it suggests, I've also taken examples from this site but I still can't get it to work.
<head>
<link href="javascript/jquery-ui-1.10.3.custom/css/south-street/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<script src="javascript/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
<script src="javascript/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
<script>
function validate(){
date = document.getElementById("datePicker").value;
errors = "";
if (date == ""){
errors += "Please supply a valid DOB \n";
}
}
</script>
</head>
<body>
<form name= "myform" method="post" action="" class="booking">
<fieldset>
<div>
<label for="datePicker" class="fixedwidth">Date</label>
<input type="text" name="datePicker" id="datePicker"/>
</div>
</fieldset>
</body>
You need to call your code in ready or load function , or insert it to a function and call it in your main js file.
You have to have some jQuery code to initialize the datepicker, like
<script type="text/javascript">
$(function(){
$('#datePicker').datepicker();
});
</script>
Need to call datepicker on body load.
<script type="text/javascript">
$(document).ready(function(){
$("#datePicker").datepicker();
});
</script>
<script>
$(document).ready(function(){
$("#datePicker").datepicker();
});
function validate(){
date = document.getElementById("datePicker").value;
errors = "";
if (date == ""){
errors += "Please supply a valid DOB \n";
}
}
</script>
You are missing this code in your script
$(function() {
$( "#datepicker" ).datepicker();
});
First initialize the datepicker UI method.
$(document).ready(function(){
$("#datePicker").datepicker();
});
Since you are using jQuery, you get the value like
$("#datePicker").val();
Update:
To get the value after selecting it from datepicker
$(document).ready(function () {
$("#datePicker").datepicker({
onSelect: function (date) {
alert(date);
}
});
});
JSFiddle
This is my HTML
<form id="procurar-novo">
<input type="text" name="procurar" placeholder="Pesquisar no Site" value="">
<input id="procurar-submit" type="button" value="›">
</form>
And this is my jQuery
<script type="text/javascript">
$(document).ready(function(){
$('#procurar').submit(function(e) {
e.preventDefault();
//edited
window.open = ('http://www.psicotropicus.org/'+'/busca'+encodeURIComponent($('#procurar-submit').val()), '_blank');
return false;
});
});
</script>
The ideai is that by clicking on submit, the javascript/jquery will get the #procurar-submit value and add it on the URL and redirect the user.
The _blank still not works
Thanks in advance.
Use window.open with second parameter _blank
window.open('url', '_blank');
Try this also:
<script type="text/javascript">
$(document).ready(function(){
$('#procurar').submit(function(e) {
e.preventDefault();
//edited
window.open = ('http://www.psicotropicus.org/'+'/busca'+encodeURIComponent($('#procurar-submit').val()), '_blank');
return false;
});
});
</script>
Last edit:
<script>
$(document).ready(function(){
$('form#procurar-novo').submit(function(e) {
//e.preventDefault();
//edited
var url = 'http://www.psicotropicus.org'+'/busca'+ encodeURIComponent('&' + $('input[name=procurar]').val());
window.open(url, '_blank');
return false;
});
});
</script>
<form id="procurar-novo">
<input type="text" name="procurar" placeholder="Pesquisar no Site" value="">
<input id="submitsss" type="submit" value="›">
</form>
Please consider names and ids of the form elements :)
Looks like you don't have an action specified on your form tag. Why not just change the second input element from type=submit to type=button. Then you can bind a click event on that button and have full control of what happens next. You don't have to worry about preventing a default submit action. You could do the following:
$(document).ready(function(){
$(document).on('click', '#procurar-submit', function() {
window.location.href = 'http://www.psicotropicus.org/busca'+$('input[name="procurar"]').val();
});
});
To open a new window like on a '_blank' you could change the code to be:
$(document).ready(function(){
$(document).on('click', '#procurar-submit', function() {
window.open('http://www.psicotropicus.org/busca'+$(input[name="procurar"]).val(), '_blank');
});
});
But be careful with pop-up blockers
EDIT
I changed the selector that gets the value of the text field.
I would maybe add a class or id on that text field so it can be identified apart from others. See this fiddle