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
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.
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
</head>
<body>
<input id="test" value="">
<input type="button" id="btn" value="Get">
</body>
</html>
And JS:
$('#btn').click(function(){
alert(document.documentElement.innerHTML);
});
http://jsbin.com/wuveresele/edit?html,js,output
I want to enter some value (for example, 123) into input field, click button and see "rendered" html code of the page in an alert popup.
What I see:
...
<input id="test" value="">
...
What I want to see:
...
<input id="test" value="123">
...
Is it possible using JS or JQuery?
Here's what I added to your JS
$('#btn').click(function(){
$("#test").attr("value",$("#test").val());
alert(document.documentElement.innerHTML);
});
What I'm essentially doing is using the Jquery attr() function.The first parameter refers to the attribute you want to manipulate and the second attribute is the value to be given.
Here is the working demo
Here is your solution:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var value = $("#test").val()
alert(value);
});
})
</script>
<input id="test" value="">
<input type="button" id="btn" value="Get">
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.
I looked and didn't find the case I have here -- a lot of the prior answers said 'wait for the 'onload' to call getElementById' but that's what I started with and it doesn't work -- getElementById returns null in this code in my index.php file:
<html>
<script type="text/javascript">
function checkPwd()
{
var thePwd = document.getElementById("theUsersPassword");
alert("the var thePwd is: " + thePwd);
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Beta:</title>
</head>
<body onload="checkPwd()">
<form method="post" action="index.php">
Beta: <input name="theUsersPassword" type="password"><br/>
<input type="submit" value="Submit" />
</form>
</body>
</html>
getElementById get an element by ID not by name. You must change
<input name="theUsersPassword" type="password">
to
<input name="theUsersPassword" id="theUsersPassword" type="password" />
You are mixing up name and id
Edit:
In other words, you need to change
<input name="theUsersPassword" type="password">
to
<input name="theUsersPassword" id="theUsersPassword" type="password">
You can use the code below. getElementById returned an object not a value.
JavaScript
function checkPwd()
{
var thePwd = document.getElementById("theUsersPassword").value;
alert("the var thePwd is: " + thePwd);
}
Html
<input name="theUsersPassword" id="theUsersPassword" type="password">
So in HTML 5, you can set buttons outside of a form to point to that form by using the form attribute. Is there a way to do this in Javascript? I need all references to this.form to point to a form somewhere else on the page. I've already tried:
<input type="button" onclick="this.form = document.forms['MyForm']; this.form.name.value = 'Blah' />
But with no success. Is there a way to do this?
Each of your form elements should have a unique ID, so you can change the value of the element without referencing the form, like this:
document.getElementById('your_field_id').value = 'Blah';
To submit the form, use document.forms:
document.forms['MyForm'].submit();
<input type="button" onclick="submitForm()" />
function submitForm() {
document.forms["myform"].submit();
}
What about something like this using jquery?
<html>
<head>
<title>Test Form</title>
</head>
<body>
<form>
<input type="text" id="test" />
<input type="submit" value="Submit" />
</form>
<input type="button" id="button" value="button" />
<script type="text/javascript">
$("#button").click(function(){
$("#test").val("Hello World!");
});
</script>
</body>
</html>