Is it possible to set a hashmap varialbe in HTML code ?
for example:
<form name="f1234">
<input type="text" name="map['foo1']" value="dog" />
<input type="text" name="map['foo2']" value="cat" />
</form>
<script type="text/javascript">
document.f1234.map['foo1'].value="pig";
</script>
Thank you for your help.
Try
<form name="f1234">
<input type="text" name="map[foo1]" id="map_foo1" value="dog" />
<input type="text" name="map[foo2]" id="map_foo2" value="cat" />
</form>
<script type="text/javascript">
document.getElementById('map_foo1').value="pig";
</script>
Related
I have an HTML Form with some fields. I want to add two buttons to it. First two recreate a new set of all the fields in this form on the next line. Second to delete any of the newly recreated set of fields.
<form action="">
<label for="college">College</label>
<input name="college" type="text" />
<label for="degree">Degree</label>
<input name="degree" type="text" />
<label for="discipline">Discipline</label>
<input name="discipline" type="text" />
<label for="passout-year">Passout Year</label>
<input name="passout-year" type="number" min="2000" max="2021" />
<input type="submit" value="Submit" />
</form>
Yes, you can use only html, or you can use JS or if you want you can use HTML and JS to make it more dynamic,:-
You can refer this
you can use var cln=form.cloneNode(true); to clone a particular element or a whole form and then just append it to the body of the document using document.body.appendChild(cln);
run the code snippet to see how it works
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function copyForm(){
var form=document.getElementById("form1");
var cln = form.cloneNode(true);
document.body.appendChild(cln);
}
function deleteForm(event){
event.parentElement.remove();
}
</script>
</head>
<body>
<input type="button" name="copy" value="add new form" onclick="copyForm();">
<form id="form1" action="">
<label for="college">College</label>
<input name="college" type="text" />
<label for="degree">Degree</label>
<input name="degree" type="text" />
<label for="discipline">Discipline</label>
<input name="discipline" type="text" />
<label for="passout-year">Passout Year</label>
<input name="passout-year" type="number" min="2000" max="2021" />
<input type="submit" value="Submit" />
<input type="button" value="delete form" onclick="deleteForm(this);" />
</form>
</body>
</html>
I know that I cannot make a POST directly through < a> tag, but can I wrap it in a form, like:
<form action="theUrl" method="POST">
<input type="hidden" name="param1" value="key1" />
key1
<input type="hidden" name="param2" value="key2" />
key2
</form>
In this way, when I click on the url1, how can the form make a POST with the value='key1'? Thank you very much!
Clicking either of the <a>s will POST both keys. The simplest solution is to have two <form>s. Here:
<form action="theUrl" method="POST">
<input type="hidden" name="param1" value="key1" />
key1
</form>
<form action="theUrl" method="POST">
<input type="hidden" name="param2" value="key2" />
key2
</form>
Alternatively, you can do the following to submit the forms:
<script type="text/javascript">
function s(x)
{
x.parentNode.submit();
}
</script>
<form action="theUrl" method="POST">
<input type="hidden" name="param1" value="key1" />
key1
</form>
<form action="theUrl" method="POST">
<input type="hidden" name="param2" value="key2" />
key2
</form>
Call js function in onclick of a tag. And then submit the form inside the function.
<a href="javascript:void(0);" onclick="submitform()">
<script type="text/javascript">
function submitform() {
document.formName.submit();
}
</script>
The following code should have all the fields with input required, but when I run it in Chrome Version 26.0.1410.64 m, after I press the submit button, only the first field (e.g., name) is labeled as "This field is required." I used the example here: http://www.raymondcamden.com/demos/2012/jul/30/round2/register.html
save the html, and his local javascript, the example code works properly except the "This field is required." is in red. What's wrong here? Please help :(
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="jquery.validate.js"></script>
<script>
$(document).on("pageshow", "#somePage", function() {
$("#someForm").validate();
});
</script>
</head>
<body>
<div data-role="page" id="somePage">
<div data-role="content">
<form id="someForm" method="get" action="">
<fieldset>
<label>Name</label>
<input id="name" size="25" class="required"/>
</fieldset>
<fieldset>
<label">E-Mail</label>
<input id="email" size="25" class="required"/>
</fieldset>
<fieldset>
<label">Your comment</label>
<textarea id="comment" cols="22" class="required"></textarea>
</fieldset>
<input type="submit" value="Submit"/>
</form>
</div> <!--content-->
</div>
</body>
</html>
You have double quotes in label tags that make your html invalid
<label">E-Mail</label>
^
Use for attribute in label tags and name in inputs
This being said change
<fieldset>
<label>Name</label>
<input id="name" size="25" class="required"/>
</fieldset>
<fieldset>
<label">E-Mail</label>
<input id="email" size="25" class="required"/>
</fieldset>
<fieldset>
<label">Your comment</label>
<textarea id="comment" cols="22" class="required"></textarea>
</fieldset>
to
<fieldset>
<label for="name">Name</label>
<input name="name" id="name" size="25" class="required"/>
</fieldset>
<fieldset>
<label for="email">E-Mail</label>
<input name="email" id="email" size="25" class="required"/>
</fieldset>
<fieldset>
<label for="comment">Your comment</label>
<textarea name="comment" id="comment" cols="22" class="required"></textarea>
</fieldset>
Here is jsFiddle
I have a form on a remote server I'm trying to submit data to, example below
<html>
<head>
</head>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
<input type="submit" name="send" value="Submit" />
</form>
</body>
</html>
I'm trying to auto submit the data like this
<html>
<head>
</head>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
<script type="text/javascript">
document.forms[0].submit();
</script>
</form>
</body>
</html>
It works fine if the first example didn't have a (name="send") name but when it does have a name nothing submits. My question is how would I go about sending the data with a input button that has a name.
Thank you
Note: The answer turned out to be type="hidden" instead of type="submit", in which the second does not allow DOM submission while also submitting that input's value in the GET/POST data. type="hidden" does, and it works here since the button does not need to be physically clicked.
Pick one:
<form name="formname" id="formid" action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
<input type="submit" name="send" value="Submit" />
</form>
<script type="text/javascript">
if (confirm('Ok for "formname", Cancel for "getElementById"')) {
console.log('document.formname.submit()');
document.formname.submit();
} else {
console.log('document.getElementById("formid").submit()');
document.getElementById('formid').submit();
}
</script>
http://jsfiddle.net/userdude/EAmwj/3
Your JavaScript code will get executed as soon as the page is loaded. That is why it gets submitted immediately.
You need to wrap the JS code in a function and let an event call it from the page.
You can use a regular button and set the function for the onclick event of a button.
<html>
<head>
<body>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
<input type="button" name="send" value="test2" onclick="doSubmit()" />
<script type="text/javascript">
function doSubmit() {
document.forms[0].submit();
}
</script>
</form>
</body>
</html>
I have a form and when the form is loaded through a browser, I want it to submit the data automatically.
The problem is I wrote a PHP script that will submit it all fine on a test form. My problem is the server I'm trying to submit the data to named the button "submit".
Here is the example form:
<html>
<head>
</head>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
</form>
<script type="text/javascript">
document.forms[0].action="submit"
</script>
</body>
</html>
The person that created the form on the other server named it "submit". Is there a workaround until they fix it?
Here is a example of the person's form
<html>
<head>
</head>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
<input type="submit" name="submit" class="submit" value="Send Data" />
</form>
</body>
</html>
You want to submit the form? Then simply use its submit() method:
document.forms[0].submit();
If the server expects submit to be POSTed, i.e. the button being clicked, you can simply trigger the click() event of the button. Since you cannot access it using its name, I'd use jQuery for it:
$('input[name="submit"]').click();
Instead of:
<html>
<head>
</head>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
</form>
<script type="text/javascript">
document.forms[0].action="submit"
</script>
</body>
</html>
Try this:
<html>
<head>
</head>
<form name="MyForm" action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
</form>
<script type="text/javascript">
document.MyForm.submit();
</script>
</body>
</html>
If I understand your question correctly, the input element has name="submit" and type="submit". They are different things.
So you can also create the same behavior easily.