I have been working on this from hours and still coudn't figure it out. this is really frustrating this simple code is also not working now.
<html>
<head>
<script language='javascript'>
function pp(){
document.getElementById("ppimg").src = document.getElementById("pp").value;
alert('burah');
}
</script>
</head>
<body>
<form method="post">
<input onchange="pp()" type="file" name="pp" >
<input type="submit" >
</form>
</body>
</html>
help please or I will need psychiatrist now
The problem with your code is you are having the name field of the input tag same as the function name. Change your name tag with anything else and it should work.
Checkout this code.
<!DOCTYPE html>
<html>
<body>
<form>
<input type="file" name="ppasd" id="pip" onchange="pp()">
</form>
<script type="text/javascript">
function pp() {
alert('hi')
}
</script>
</body>
</html>
I hope this code work for you.
<html>
<body>
<script language="JavaScript" type="text/javascript">
function inform(){
var filename = document.getElementById('myFile').value;
alert(filename);
}
</script>
<form name="form1">
Please choose a file.
<input type="file" name="uploadbox" size="35" onChange='inform()' id="myFile">
</form>
</body>
</html>
If this code work as you want please comment here it work or not. Happy Coding :)
It seems there is some kind of reference problem with pp. Use the following code and it should work
<html>
<head>
</head>
<body>
<form method="post">
<input onchange="callback()" type="file" id="pp" >
<input type="submit" >
</form>
<script language='javascript'>
function callback(){
document.getElementById("ppimg").src = document.getElementById("pp").value;
alert('burah');
}
</script>
</body>
</html>
P.S It is a good practice to add javascript code at the end of the html.
P.S 2 it will still get an error because there is no element with id ppimg
I hope it helps
that's not working ?
that's because you use function after put element
so do this instead :
<html>
<head>
</head>
<body>
<form method="post">
<input onchange="pp()" type="file" name="pp" >
<img id="ppimg"/>
<input type="submit" >
</form>
<script language='javascript'>
function pp(){
document.getElementById("ppimg").src = document.getElementById("pp").value;
alert('burah');
}
</script>
</body>
</html>
and if it's hard !
you can change pp() to pp;
Related
JQuery Part
I just started using JQuery. First I wanted to create a a input box with an button that alerts the text that is in that box. This is the way I wanted to do that.
$(document).ready(function() {
$('#hit').click(function() {
alert($('#term').val());
});
});
That is the code in the html body part. Here im not sure if I have to declare the id with an # or not. I tried both but It didnt work for both.
My Code
<!DOCTYPE html>
<html>
<head>
<title>Button Event</title>
<script src="cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> $(document).ready(function() { $('#hit').click(function() { alert($('#term').val()); }); }); </script>
</head>
<body> <input id="term" type="text" value="enter your search"> <button id="hit" type="button" name="Button">Search</button> </body>
</html>
I am really new to JavaScript and Jquery. When I run this code there are no errors or something like that in the console just blank. The Button and Input field are on the website but when I enter something and click the button after that nothing happens. That´s why im sure there are some mistakes in that code.
$(document).ready(function() {
$('#hit').click(function() {
alert($('#term').val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="term" type="text" value="enter your search" />
<button id="hit" type="button" name="Button">Search</button>
here has worked, do you have imported a jquery library?
Resolution with your code:
<!DOCTYPE html>
<html>
<head>
<title>Button Event</title>
</head>
<body> <input id="term" type="text" value="enter your search"> <button id="hit" type="button" name="Button">Search</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() { $('#hit').click(function() { alert($('#term').val()); }); });
</script>
</body>
</html>
I'm very new to jQuery. I've been trying to use the .serialize method in jQuery, but I can not seem to garner a response. I've checked console on Microsoft Edge, Internet Explorer, and Chrome but there's no indication of anything happening past connecting to the latest library (3.4.1). My HTML and JavaScript code are below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script language="JavaScript" type="text/javascirpt" src="https://code.jquery.com/jquery-3.4.1.js">
</script>
</head>
<body>
<form name="ourform" id="ourform" action=''>
<select name="salute">
<option>Mr.</option>
<option>Mrs.</option>
</select>
<br>
First Name: <input type="text" name="firstname"/>
Last Name: <input type="text" name="lastname"/>
<br>
<select name="region" multiple="multiple">
<option>North</option>
<option>South</option>
<option>East</option>
<option>West</option>
</select>
<br>
<textarea rows="6" cols="20" name="comment">
</textarea>
<input type="submit" name="g" value="submit" id="g"/>
</form>
<div class="results">Your Results</div>
<script language="JavaScript" type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js">
$(document).ready(function(){
$('#ourform').submit(function(event){
event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>
</body>
</html>
Any help you could provide would be greatly appreciated.
Edit: Since it seems you want to disable the default submit behavior for the button, adding the type="button" attribute removes the need to cancel the default behavior.
When you are including your own javascript within <script> tags you don't need the src attribute (this was causing the 404)
updated jsfiddle
...
<button id="g" name="g" value="submit">Submit</button>
</form>
<div class="results">Your Results</div>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$('#g').click(function(event) {
//event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>
</body>
</html>
The $ is undefined is caused by jquery failing to load, which is caused by misspelling 'javascript' in
<script language="JavaScript" type="text/javascirpt" src="https://code.jquery.com/jquery-3.4.1.js">
</script>
You can't include an src attribute and have data in the tag - if you have src, your script tag must be empty.
Simply use two separate ones:
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#ourform').submit(function(event){
event.preventDefault();
var myform = $('#ourform').serialize();
alert(myform);
return false;
});
});
</script>
I am trying to change the text inside the <label> tags with the chosen file's name from <input type="file" />
I have tried this, but it doesn't work:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#files').on("change",function() {
console.log("change fired");
var i = $(this).prev('label').clone();
var file = $('#files')[0].files[0].name;
console.log(file);
$(this).prev('label').text(file);
});
</script>
</head>
<body>
<div class="upload_firmware_container">
Please upload the provided <span style="color:#e11422">firmware.bin</span> file and/or <span style="color:#e11422">spiffs.bin</span> file.</br>
<!-- action="/doUpdate" -->
<form method="POST" enctype="multipart/form-data">
<label class="file_input_label" for="files">Browse files</label>
<input id="files" type="file" name="update">
<input class="upload_button" type="submit" name="getUpdate" value="Update">
</form>
</div>
</body>
</html>
As you can see I have 2 script sources. The first one is local, and it worked with all my little scripts. I have added the second one because I have found it in the example I got inspired from.
What do you think?
jQuery is welcomed.
Resolve:
It did not work because the script has to be after the element in question.
Moving the script at the end of the HTML page solved everything.
The reason is because html loads top to bottom and your code runs the scripts before any elements are loaded on the page.
One solution:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="upload_firmware_container">
Please upload the provided <span style="color:#e11422">firmware.bin</span> file and/or <span style="color:#e11422">spiffs.bin</span> file.</br>
<!-- action="/doUpdate" -->
<form method="POST" enctype="multipart/form-data">
<label class="file_input_label" for="files">Browse files</label>
<input id="files" type="file" name="update">
<input class="upload_button" type="submit" name="getUpdate" value="Update">
</form>
</div>
</body>
<script>
$('#files').on("change",function() {
console.log("change fired");
var i = $(this).prev('label').clone();
var file = $('#files')[0].files[0].name;
console.log(file);
$(this).prev('label').text(file);
});
</script>
</html>
Reference this post for more solutions: stackoverflow.com
I'm having an error that I can't find the solution and I don't have to use jQuery; I don't have any div with submit as name
My code is
<!DOCTYPE html>
<html>
<head>
<script>
function formSubmit()
{
document.getElementById('web').submit();
}
</script>
</head>
<body>
<form action="class003.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
</form>
<div id="web" onclick="formSubmit()">click</div>
</body>
</html>
on chrom I'm getting this error
Uncaught TypeError: document.querySelector(...).submit is not a
function
at formSubmit (test2.html:8)
at HTMLDivElement.onclick (test2.html:19)
on Firefox the same error
TypeError: document.getElementById(...).submit is not a function[Learn
More]
You need to submit form not the div
Make it
document.getElementById('g_form').submit();
You mistyped the id of your element. It should be g_form.
function formSubmit()
{
document.getElementById('g_form').submit();
}
You using id of Your div but for submitting the form You need to specify the id of Your Form element
So just change the
function formSubmit()
{
document.getElementById('g_form').submit(); // Change the Id here
}
Hopes It will help
<!DOCTYPE html>
<html>
<head>
<script>
function formSubmit()
{
document.getElementById('g_form').submit(); // Change the Id here
}
</script>
</head>
<body>
<form action="class003.php" id="g_form" method="POST">
<input type="text" name="f1" value="">
</form>
<div id="web" onclick="formSubmit()">click</div>
</body>
</html>
Here is your solution.
<!DOCTYPE html>
<html>
<head>
<script>
function formSubmit()
{
document.forms['g_form'].submit();
}
</script>
</head>
<body>
<form action="class003.php" id="g_form" name="g_form" method="POST">
<input type="text" name="f1" value="">
</form>
<div class="button1" onClick="formSubmit();">Click</div>
</body>
</html>
I have just started learning java script.I am trying to make Dynamic text box but the my code is not working . Can someone help me in rectifying my mistake??
<html>
<head>
</head>
<body>
<script language="javascript">
function add(){
var text=document.createElement('input');
var add=document.getElementById("Myform");
text.setAttribute("type","text");
text.setAttribute("name","BookName");
add.appendChild(text);
}
</script>
<form action="new1.php" id="Myform">
<input type="submit" value="Submit" id="submit" onclick="javascript:add();"/> <br/>
</form>
</body>
</html>
The text box disappears before I can do anything with it.
Change the input type as button or other wise it will submit the form.You want the submit button means you have to add one more button for dynamic action.
<input type="button" value="Submit" id="submit" onclick="javascript:add();"/>
You need stop submit like this:
function add(){
var text=document.createElement('input');
var add=document.getElementById("Myform");
text.setAttribute("type","text");
text.setAttribute("name","BookName");
add.appendChild(text);
}
<form action="new1.php" id="Myform" onsubmit="event.preventDefault();">
<input type="submit" value="Submit" id="submit" onclick="javascript:add();"/> <br/>
</form>
Try this plunker
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form action="new1.php" id="Myform">
<input type="button" value="Submit" id="submit" onclick="add();"/> <br/>
</form>
</body>
</html>
JS
function add(){
var text=document.createElement('input');
var add=document.getElementById("Myform");
text.setAttribute("type","text");
text.setAttribute("name","BookName");
add.appendChild(text);
}