Like if I have element of array name[1]='ahmad' and I want it to be posted in html form.
I used
document.getElementById('n').value=name[1];
but it's not posting.
Form has:
<input type="text" id="n" readonly="true">
i want to fill array by user and show these values in input readonly boxes on web page.
full code is:
<!dochtml html>
<title>Arrays of Js</title><!--different methods of using declaring arrays-->
<head>
<h3>Arrays usage by AFRN</h3>
<script>
alert('hey');
var names=[];
//var n = prompt('enter name');
for(var i=0; i<=4; i++){
names[i]=prompt('enter name: ');
}
/*var ids=['r1','r2','r3','r4','r5']
for(var i=0; i<=4; i++){
document.getElementById(ids).value=name[i];
}*/
document.getElementById("r1").value=names[0];
document.getElementById("r2").value=names[1];
document.getElementById("r3").value=names[2];
document.getElementById("r4").value=names[3];
document.getElementById("r5").value=names[4];
</script>
<noscript>JS not supported</noscript>
</head>
<body bgcolor="yellow">
<form name="arryForm">
<input type="text" id='r1' name="a1" readonly="true">
<input type="text" id='r2' name="a2" readonly="true">
<input type="text" id='r3' name="a3" readonly="true">
<input type="text" id='r4' name="a4" readonly="true">
<input type="text" id='r5' name="a5" readonly="true">
</form>
</body>
</html>
If you move your <script> tag with its contents to the bottom just before the closing </body> tag and it will work.
You can try this code !
Place your javascript code below the input tag in body and you cannot use the variable name 'name' , I think this is not allowed in javascript because I am also facing problem with the varaible name 'name' so I am using '_name' .
var _name = ["usman","ahmed"];
document.getElementById("n").value = _name[1];
<input type="text" id="n" readonly="true"/>
Related
I am using Ajax to submit forms in serial. I am trying to make the first s_referee_email + s_referee_fname pair required while the second or others not - there will be up to five of these pairs. I cant seem to figure how to make just the first pair required without breaking the form. I have tried using HTML5 and some answers from stack but havent been able to get anything to work. Any advice is greatly appreciated!
fiddle: https://jsfiddle.net/badsmell/gcrvqbna/
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!--serial submit ajax-->
<script>
function mySubmit(){
var myForms = $("form");
myForms.each(function(index) {
var form = myForms.eq(index);
var serializedForm = form.serialize();
serializedForm += '&s_referer_fname='+$('#s_refererFname').val();
$.post("http://post.aspx", serializedForm, function (data, status) {
if (status === "success"){
window.location.href= "http://redirect";
}
});
});
}
</script>
<title>Forward a copy to a friend</title>
<style type="text/css">
*[class=hide] {
display: none
}
</style>
</head>
<body>
<!--hidden iframe-->
<iframe class="hide" id="myIframe"></iframe>
<form method="post" action="post.aspx" target="myIFrame">
<input type="hidden" name="s_referer_email" value="test#test.com" />
<input type="text" size="30" maxlength="255" name="s_referee_email" value="" required >
<input type="text" size="22" maxlength="50" name="s_referee_fname" value="" required >
</form>
<form method="post" action="post.aspx" target="myIFrame">
<input type="hidden" name="s_referer_email" value="test#test.com" />
<input type="text" size="30" maxlength="255" name="s_referee_email" value="" >
<input type="text" size="22" maxlength="50" name="s_referee_fname" value="" >
</form>
<label for="s_referer_fname">Your name:</label> <br /> <input type="text" name="s_referer_fname" value="" size="20" id="s_refererFname" ><br>
<p><button onclick="mySubmit();">Submit</button> </p>
</body>
</html>
Adding required="required" to the tags can let you make any field compulsory to be filled by user.
You should never use .onclick(), or similar attributes from a userscript.
Userscripts operate in a sandbox, and onclick operates in the target-page scope and cannot see any functions your script creates.
Always use addEventListener() (or an equivalent library function, like jQuery .on()).
So instead of code like:
something.outerHTML += '<input onclick="func()" id="button_id" ...>'
You would use:
something.outerHTML += '<input id="button_id" ...>'
document.getElementById ("button_id").addEventListener ("click", func, false);
And for your answer, one method is to perform a check before actually submitting the forms. Check if the required fields have been filled, if yes, go ahead and submit the form, or else don't submit and show an error message instead.
I'm trying to auto-fill text boxes 1 to 3 with the main text box content so that whatever is typed into the text box "Title" will also appear in the text boxes
Input1, Input2 and Input3. Here is what I have, but I get an error.
<html>
<head>
<script type="text/javascript">
function CopyData(val){
var a = document.getElementById(val.id).value
document.getElementById("CopyText").value=Title
}
</script>
</head>
<body>
Title:<input type="text" name ="Title" id="Text" onkeyup="CopyData(this)"/><br /> <br />
Input 1:<input type="text" name ="Input1" id="CopyText"/><br />
Input 2:<input type="text" name ="Input2" id="CopyText"/><br />
Input 3:<input type="text" name ="Input3" id="CopyText"/><br />
</body>
</html>
try this out:
<html>
<head>
<script type="text/javascript">
function CopyData(val){
var a = document.getElementById(val.id).value
var inputs = document.querySelectorAll(".input");
for(var i=0;i < inputs.length;i++)
{
inputs[i].value = a;
}
}
</script>
</head>
<body>
Title:<input type="text" name ="Title" id="Text" onkeyup="CopyData(this)"/><br /> <br />
Input 1:<input type="text" class="input" name ="Input1" /><br />
Input 2:<input type="text" class="input" name ="Input2" /><br />
Input 3:<input type="text" class="input" name ="Input3" /><br />
</body>
</html>
remarks:
do not use same id for multiple elements. try class instead
you use 'Title' which is not defined, use "a", that was where you stored the input's value
to get many elements at once with simple js, good method is to use "querySelectorAll" with the proper selector.
good luck.
I guess you cannot assign the same id tag to more than one TextBox, so you must end up with a more "hard-coded" javascript function. Moreover, I would use Title.value and not only Title
function CopyData(){
document.getElementById("CopyText1").value=Title.value;
document.getElementById("CopyText2").value=Title.value;
document.getElementById("CopyText3").value=Title.value;
}
The problem: I have a page with many <input> fields (just say all are text fields)
I would like to have a button, when click on it, all input fields will become plaintext only.
e.g. <input type="text" value="123" /> becomes 123
and if I click on another button, the text will change back to
e.g. 123 becomes <input type="text" value="123" />
Is there an automatic way to scan for all the <input>s and change them all at once using javascript and jquery.
Thank you!
Edited
Seems you guys are getting the wrong idea.
Read what I have written again: e.g. <input type="text" value="123" /> becomes 123
I have value="123" already, why would I want to set the value again???
What I want is e.g.
<body><input type="text" value="123" /><input type="text" value="456" /></body> becomes <body>123456</body> and later <body>123456</body> back to <body><input type="text" value="123" /><input type="text" value="456" /></body>
Use this to go one way,
$('input').replaceWith(function(){
return $('<div />').text(this.value).addClass('plain-text');
});
and this to go the other.
$('.plain-text').replaceWith(function(){
return $('<input />').val($(this).text());
});
Check this link http://jsfiddle.net/Evmkf/2/
HTML:
<div id='divInput'>
<input type="text" value='123' />
<br/>
<input type="text" value='456' />
<br/>
<input type="text" value='789' />
</div>
<div id='plainText' style='display:none'></div>
<div>
<input type="button" id='btnPlain' value='Make It Plain' />
<input type="button" id='btnInput' value='Make It Text' />
</div>
Javascript:
$("#btnPlain").bind('click',function(){
$("#plainText").html('');
$("#divInput input[type=text]").each(function(index){
$("#plainText").append('<span>'+$(this).val()+'</span>');
$("#divInput").hide();
$("#plainText").show();
});
});
$("#btnInput").bind('click',function(){
$("#divInput").html('');
$("#plainText span").each(function(index){
$("#divInput").append('<input type="text" value="'+$(this).text()+'"/><br/>');
$("#plainText").hide();
$("#divInput").show();
});
});
Try this FIDDLE
$(function() {
var arr = [];
$('#btn').on('click', function() {
var $text = $('#inp input[type="text"]');
if( $text.length > 0){
$text.each(function(i) {
arr[i] = this.value;
});
$('#inp').html(arr.join());
}
else{
if(arr.length <= 0){
}
else{ // Add Inputs here
var html = '';
$.each(arr, function(i){
html += '<input type="text" value="' + arr[i]+ '"/>'
});
$('#inp').html(html);
}
}
});
});
You need to create a hidden element for each input, then use jquery to hide the input, show the hidden element and give it the inputs value.
<input type="text" value="123" id="input_1" />
<div id="div_1" style="display:none;"></div>
$("#div_1").html($("input_1").val());
$("#input_1").hide();
$("#div_1").show();
My shopping cart script is intended to check if an article is already in the shopping cart; then the numbers must be filled in the survey.
I work with Javascript. I give the ID number through a position() function.
This is a part of the script where I pick list:
<input type="text" size="2" name="aantalArts_{position()}" id="aantalArts_{position()}"/>
The output:
<input type="text" size="2" value="" name="aantalArts_1" id="test" class="infoButton">
<input type="text" size="2" value="" name="aantalArts_2" id="test" class="infoButton">
<input type="text" size="2" value="" name="aantalArts_3" id="test" class="infoButton">
<input type="text" size="2" value="" name="aantalArts_4" id="test" class="infoButton">
I am just filling the numbers, but how do I deal with the positions?
<script language="javascript" type="text/javascript">
if(document.all.artNr.value = <%=artNrWW%>);{
document.all.aantalArts_??????.value = <%=aantalWW%>;
}
</script>
You are probably looking for the following syntax:
var i = 1; // or whichever
document.all["aantalArts_" + i].value = <% aantalWW %>;
Suppose an entry is made in a textbox. Is it possible to retain the same entered text in a second text box? If so, how is this done?
<html>
<label>First</label>
<input type="text" name="n1" id="n1">
<label>Second</label>
<input type="text" name="n1" id="n1"/>
</html>
<script>
function sync()
{
var n1 = document.getElementById('n1');
var n2 = document.getElementById('n2');
n2.value = n1.value;
}
</script>
<input type="text" name="n1" id="n1" onkeyup="sync()">
<input type="text" name="n2" id="n2"/>
More efficiently it can be done as :
For the one who will see the post now should use best practices of javascript.
<script>
function sync(textbox)
{
document.getElementById('n2').value = textbox.value;
}
</script>
<input type="text" name="n1" id="n1" onkeyup="sync(this)">
<input type="text" name="n2" id="n2"/>
<html>
<script type="text/javascript">
function copy()
{
var n1 = document.getElementById("n1");
var n2 = document.getElementById("n2");
n2.value = n1.value;
}
</script>
<label>First</label><input type="text" name="n1" id="n1">
<label>Second</label><input type="text" name="n2" id="n2"/>
<input type="button" value="copy" onClick="copy();" />
</html>
Well, you have two textboxes with the same ID. An Id should be unique, so you should prbably change this.
To set the value from one text box to another a simple call to getElementById() should suffice:
document.getElementById("n1").value= document.getElementById("n2").value;
(assuming, of course you give your secodn text box an id of n2)
Tie this up to a button click to make it work.
This worked for me and it doesn't use JavaScript:
<form name="theform" action="something" method="something" />
<input type="text" name="input1" onkeypress="document.theform.input2.value = this.value" />
<input type="text" name="input2" />
</form>
I found the code here
Use event "oninput". This gives a more robust behavior. It will also trigger the copy function when you copy paste.
You can this way also used copy contents of one textbox to another
function populateSecondTextBox() {
document.getElementById('txtSecond').value = document.getElementById('txtFirst').value;
}
<label>Write Here :</label>
<input type="text" id="txtFirst" onkeyup="populateSecondTextBox();" />
<br>
<label>Will be copied here :</label>
<input type="text" id="txtSecond" />