i got got confused when i run the static js and html below
i want to dynamicly add option by clicking button, but when i put it under the form , it will do acition post, unless i put it out of form ,it works. what's the reason? i didn't set type as "submit" for the add button, does any button clicked in form will cause form action?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>作业管理</title>
</head>
<body>
<form enctype="multipart/form-data" method="POST" >
<div id="postform">
本次作业标题
<input type="text" name="title" />
<br>
<div class="postoption">
添加项目
<input type="text" name="option[]" />
音频文件
<input type="file" name="radio[]" />
答案
<input type="text" name="answer[]" />
</div>
</div>
<button id="add">添加输入项</button>
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
window.onload = function(){
var add = document.getElementById("add");
add.onclick = function(){
addOption();
}
}
function addOption(){
var postForm = document.getElementById("postform");
var postoptions = document.getElementsByClassName("postoption");
var op = postoptions[0];
var optionClone = op.cloneNode(true);
postForm.appendChild(optionClone);
};
</script>
</body>
</html>
The <button> element is a submit button by default. You can change this with the type="button" attribute, which makes it do nothing by default, or calling preventDefault on the event. But I'd go with the attribute since then your intention is semantically clear without actually running the script.
Related
There is a form with 2 inputs and a button that resets the inputs. When the button is clicked, how can I make first input unchanged (i.e it should not reset the value). How can I achieve it?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add-More example - fileuploader - Innostudio.de</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"></script>
</head>
<body>
<div class="file-loading" style="margin: 50px;">
<form>
<input id="no_reset" type="text">
<input id="input-fa" type="text">
<button type="reset" onclick="removeReset()">
<i class="fas fa-sync"></i>submit
</button>
</form>
</div>
<script>
function removeReset() {
//it doesn't work
document.getElementById("no_reset").value = "dont reset";
}
</script>
</body>
</html>
If you have a lot of input, you can reset all fields except ones with a custom attribute.
Take a look at a sample vanilla js implementation :
function customReset()
{
var fieldsToReset = document.querySelectorAll("input:not([data-noreset='true'])")
for(var i=0;i<fieldsToReset.length;i++){
fieldsToReset[i].value = null;
}
}
<form id="myForm">
<input id="txt1" name="txt1" /> : should reset<br/>
<input id="txt2" name="txt2" /> : should reset<br/>
<input id="txt3" name="txt3" /> : should reset<br/>
<input id="txt4" name="txt4" data-noreset="true" /> : <strong>won't reset</strong><br/>
<button type="button" onclick="customReset()">
Reset
</button>
</form>
Pay attention to the type="button" attribute. This is required to neither reset the form nor submit it.
As described in the problem
I create two buttons. The one is used to add forms,the other one is used to submit data.However, after inputting data when i clicked on the button of submit,it didn't work
<%# page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GA'S WEB APPLY</title>
</head>
<body>
<script>var i=1</script>
<p>test is ing!</p>
<hr>
<div>
<form action="/webTest/TestWeb" method="post">
<input type=button onclick="document.body.insertAdjacentHTML('beforeEnd','<input type=text name='+i+' value='+i+++'> ')" value=add />
<input type="submit" value="submit" />
</form>
</div>
</body>
</html>
Problem in your code is with '' quotes as well as ,whenever you append new input it appear out of <form></form> tag , so whenever you submit your form that value doesn't passed to your backened page and will always return null. Instead do like below :
var i = 1
$(document).ready(function() {
//location to add new inputs
var to_Add_at = $(".inputs");
var add_button = $("input[name='add']");
//on click of button
$(add_button).click(function(e) {
e.preventDefault();
$(to_Add_at).append('<input type=text name='+i+' value='+i++ +'>'); //add input box
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form action="/webTest/TestWeb" method="post">
<input type="button" value="add" name="add" />
<div class="inputs"></div>
<input type="submit" value="submit" />
</form>
As I can not see the backend data or anything else besides the code. I would say
1. File location wrong?
2. Page language should be javascript
3. Add quatations "" around value = add
Here is My code:
HTML Portion
<form id="myform" action="whatever.php">
<lable name="text">enter text</label>
<input id="in" type="text" />
<input id="in2" type="text" />
<input type="submit" id="submit" />
</form>
jquery Code:
(function($){
$('#myform').on('click', '#submit', function(e) {
var val = $(this).find('#in').val();
$('ol.list').append('<li class="text-dark"><p>' + val + '.</p></li>');
e.preventDefault();
});
})(jQuery);
Output:
1.undefined.
2.undefined.
3.undefined.
On your code this inside the callback function points to the button with id #submit not the form itself.
You could just use the submit event, and your code will work fine
(function($){
$('#myform').on('submit', function(e) {
e.preventDefault();
var val = $(this).find('#in').val();
$('ol.list').append('<li class="text-dark"><p>' + val + '.</p></li>');
});
})(jQuery);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<ol class="list"></ol>
<form id="myform" action="whatever.php">
<label name="text">enter text</label>
<input id="in" type="text" />
<input id="in2" type="text" />
<input type="submit" id="submit" />
</form>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
Then element with id in is child element of form element not the submit button.
You need to do the following by getting to parent form element and then find inside that your element as your input element is not in the submit button :
var val = $(this).closest("form").find('#in').val();
$(this).closest("form") will select the form and then find('#in') will select the element with id in and then val() will get the value of it.
See the working DEMO fiddle
Can anyone please help me through this....
I have two input fields in my form . One of which is hidden and I want to show it using a button. Now when i tried to show it using onClick() function its not responding...
can anyone give me code snippet to do so....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function show()
{
document.getElementById('passwd').style.display="block" ;
}
</script>
</head>
<body>
<form action="demo.html" >
<input type="text" name="user" />
<br />
<input type="text" id="passwd" name="password" style="display:none;" />
<input type="button" onClick="show()" name="show" value="show" />
<br />
<input type="submit" value="OK" />
</form>
</body>
</html>
plz help
This is because of your <input> declaration:
<input type="button" onClick="show()" name="show" value="show" />
When you call show() JavaScript will attempt to resolve the symbol show first; because you're calling show() from inlined code, the resolution takes place in document, which attempts to resolve the symbol based on the name or id attribute of your input box.
Solutions
Rename the button:
<input type="button" onClick="show()" name="showbutton" value="show" />
Rename the function:
function showPasswordInputBox()
{
// your code here
}
<input type="button" onClick="showPasswordInputBox()" name="show" value="show" />
Don't use in-line code:
function show()
{
// whatever
}
var showButton = document.getElementsByName('show')[0];
showButton.addEventListener('click', show, false);
See also
Don't give event handler the same name as a field!
Javascript Function and Form Name conflict
There is a problem with naming convention of show() function in javascript. Because just change the name to show1(). it'll work
function show1()
{
alert("ok");
}
<input type="button" name="show" value="show" onclick="show1()" />
you can use jquery and write following code: $("#passwd").show()
or you can use addClass('here_css_class') and css code .here_css_class{
display: block
}
try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function show()
{
document.getElementById('passwd').style.display="block" ;
}
</script>
</head>
<body>
<form action="demo.html" >
<input type="text" name="user" />
<br />
<input type="text" id="passwd" name="password" style="display:none;" />
**<button onClick="show()" >Show</button>**
<br />
<input type="submit" value="OK" />
</form>
</body>
</html>
You need to use this:
onClick="javascript:show();"
or simply
onClick="show();"
Basically, just add the semi-colon :)
I got an image with which links to another page using <img ...> .
How can I make it make a post like if it was a button <input type="submit"...>?
More generic approatch using JQuery library closest() and submit() buttons.
Here you do not have to specify whitch form you want to submit, submits the form it is in.
Submit Link
<input type="image" name="your_image_name" src="your_image_url.png" />
This will send the your_image_name.x and your_image_name.y values as it submits the form, which are the x and y coordinates of the position the user clicked the image.
It looks like you're trying to use an image to submit a form... in that case use
<input type="image" src="...">
If you really want to use an anchor then you have to use javascript:
...
input type=image will do it for you.
Untested / could be better:
<form action="page-you're-submitting-to.html" method="POST">
<img src="whatever.jpg" />
</form>
<html>
<?php
echo $_POST['c']." | ".$_POST['d']." | ".$_POST['e'];
?>
<form action="test.php" method="POST">
<input type="hidden" name="c" value="toto98">
<input type="hidden" name="d" value="toto97">
<input type="hidden" name="e" value="toto aaaaaaaaaaaaaaaaaaaa">
Click
</form>
</html>
So easy.
So easy.
What might be a handy addition to this is the possibility to change the post-url from the extra button so you can post to different urls with different buttons. This can be achieved by setting the form 'action' property. Here's the code for that when using jQuery:
$('#[href button name]').click(function(e) {
e.preventDefault();
$('#[form name]').attr('action', 'alternateurl.php');
$('#[form name]').submit();
});
The action-attribute has some issues with older jQuery versions, but on the latest you'll be good to go.
Something like this page ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BSO Communication</title>
<style type="text/css">
.submit {
border : 0;
background : url(ok.gif) left top no-repeat;
height : 24px;
width : 24px;
cursor : pointer;
text-indent : -9999px;
}
html:first-child .submit {
padding-left : 1000px;
}
</style>
<!--[if IE]>
<style type="text/css">
.submit {
text-indent : 0;
color : expression(this.value = '');
}
</style>
<![endif]-->
</head>
<body>
<h1>Display input submit as image with CSS</h1>
<p>Take a look at the related article (in french).</p>
<form action="" method="get">
<fieldset>
<legend>Some form</legend>
<p class="field">
<label for="input">Some value</label>
<input type="text" id="input" name="value" />
<input type="submit" class="submit" />
</p>
</fieldset>
</form>
<hr />
<p>This page is part of the BSO Communication blog.</p>
</body>
</html>
Dont forget the "BUTTON" element wich can handle some more HTML inside...
We replace the submit button with this all the time on forms:
<form method="post" action="whatever.asp">
<input type=...n
<input type="image" name="Submit" src="/graphics/continue.gif" align="middle" border="0" alt="Continue">
</form>
Clicking the image submits the form. Hope that helps!