Calling java script function automatically using form - javascript

I have a java script function that i need to call over and over again in order to test it, so i wrote a form that allows me to call the function, i have to do this manually and need a way to call this function without user input. all that needs to go to the upload file is a number and some text, (ex 1 Thank you)
<script src="yo.js"></script>
<!DOCTYPE html>
<html>
<body>
<form action="uploadFile" method="post">
<input type="text" name="filename" >
<input type="text" name="fileData">
<input type="submit">
</form>
</body>
</html>

Runs every second:
setInterval(function () {uploadFile('some text', 'some number')}, 1000);

Related

Load .php page and fill input with form action

I have a page with a live search function called "list.php". On another page, I have a search input, and upon submit of that search, I'd like to take the query, load list.php and fill the live search on list.php.
list.php has the following:
<input type="text" id="myInput" onkeyup="databaseSearch()" placeholder="Search">
And my other page's search is:
<form action="search2.php">
<input class="mb0" type="text" placeholder="Search..." />
</form>
I would think the best way to do this would be with a form action, but I'm not sure how to both load list.php AND fill in #myInput
Thanks!
Passing Value in the Function would get the text typed through, and using .val() means you wish to put the value gotten into any form field required there is value="" option
This is a script pointing to Jquery CDN file online
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
If you have Jquery You Prolly won't need this
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<input type="text" id="myInput" onkeyup="databaseSearch(value)" placeholder="Search">
<form action="search2.php">
<input class="mb0" type="text" placeholder="Search..." />
</form>
<script type="text/javascript">
function databaseSearch(value) {
$(".mb0").val(value);
}
</script>
Important Additions are
onkeyup="databaseSearch(value)"
And
function databaseSearch(value) {
$(".mb0").val(value);
}
Good Luck :)
do something like that and change what suites your script, also do not forget using proper filters :
this on list.php and make the other form action points to list.php too:
<?php
if(isset($_POST['another_page_txt'])): ?>
<script>
$('#myInput').val('<?php print $_POST['another_page_txt']?>');
$('#myInput').trigger('keyup');
</script>
<?php endif;?>

JavaScript: Form onSubmit not calling function

I am currently learning JavaScript for my uni course and my function is not being called for some reason. I want to understand why this is not working.
Brief Description
There are two forms, one has a submit button, with the onSubmit field calling document.write() (This works), then calling my own function submit(). If I change submit() to document.write() then I receive two outputs, so there should be no reads why submit is not called?
The second form has a single textbox in it, I ideally want to make this disappear when the button is pressed, however I mainly want to understand why submit is not called.
<html charset="utf-8">
<head>
<title>Game</title>
</head>
<body>
<form method="get" name="form1" action="game.php" onSubmit="document.write('Hello');submit();">
<input type="submit" value="submit" name="button" />
</form>
<form id="form2" name="form2">
<input name="letter" type="text" />
</form>
<script>
function submit() {
alert("HELLO");
document.getElementById('form2').visibility='hidden';
document.write("Hello");
}
</script>
</body>
I have tried inserting the script in the header, above the function, below the function, but nothing seems to work.
Hope someone can help, thanks
submit is a reserved keyword. Change to any other name and it should work. Please find the JSFiddle of the same
https://jsfiddle.net/pc9rL2ey/
function submita() {
alert("HELLO");
document.getElementById('form2').visibility='hidden';
document.write("Hello");
}
<form method="get" name="form1" action="game.php" onSubmit="submita();document.write('Hello');">

jQuery $.post-function | data-processing function does not work

I am new in web development, but having years of experience in traditional development, e.g. using Java, C and ABAP, under my belt.
I am trying to create a pretty simple Login-functionality, but struggling with jQuery's $.post()-functionality.
In the below seen code, the alert("test")-function in the data-processing part of $.post() doesn´t seem to get executed, after I submit the form form_login. I guess the problem is with how I connected the JavaScript-function login_attempt() with the submitting of form form_login.
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<script src="jquery-2.2.4.min.js"></script>
<script>
function login_attempt(){
$.post("login.php", $("#form_login").serialize(), function(data){alert("test");},html);
}
</script>
</head>
<body>
<h1>Login-Form</h1>
<form id="form_login" method="post" onsubmit="return login_attempt()">
<p><label for="id_username">Username: </label><input id="id_username" name="username" type="text" width="20"></label></p>
<p><label for="id_password">Password: </label><input id="id_password" name="password" type="password" width="10"></label></p>
<p><input type="submit" name="submit_login"></p>
</form>
</body>
</html>
The function login_attempt is now triggered when submitting the form and then after that the form is submitted as well since the login_attempt function does not tell the form to stop submitting in the regular way. Therefor the page reloads before the actual callback of the post method could do anything.
Add return false; as last line of the login_attempt function to tell the form it should not submit in the regular way.

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)
}

Unable to get value of form field

I'm learning javascript and tried my hand at calling functions. Based on the example here, I tried to use the logic in my test html:
<html>
<head>
<script>
function ShowForm()
{
var field_value = document.forms["test_form"]["my_name"].value;
document.write(field_value);
}
</script>
</head>
<body>
<form action="" name="test_form" onsubmit="return ShowForm();" method="post">
<input type="text" name="my_name" placeholder="Type your name"/>
<button type="submit">My button</button>
</form>
</body>
</html>
I found that the html renders correctly, however upon clicking the "My button" button, the page simply reloads without displaying the additional html I expected.
The main different is that I'm trying to use <button> for the click/submit action. Is it possible to use a <button> and activate the javascript? Or should I just style the <input> as a button?
What am I doing wrong here?
Use
onsubmit="ShowForm();return false"
Instead of
onsubmit="return ShowForm();"
Adding return false will prevent page from reloading, removing return from return ShowForm(); will allow javascript to run return false after ShowForm().
Example

Categories