I have this piece of simple code.
<html>
<head>
<script type="text/javascript">
function changeText()
{
var form = document.forms['detail'];
form.desc.value="success";
}
</script>
</head>
<body>
<form name="detail">
<input type="text" name="desc" id="desc" >
<input type="submit" value="changetext" onClick=changeText()>
</form>
</body>
</html>
When i run this in Mozilla browser the value of the textbox named "desc" changes but disappears immediately...i.e it is not shown forever and becomes empty.
How can I fix it.
Regards,
Vijay
Try using:
<input type="submit" value="changetext" onClick="changeText(); return false;">
It looks like your page is refreshing, and that is probably why your field text disappears. If your onClick listener returns false, it will prevent this default behaviour.
you can give that textbox an id
and then run document.getElementById("textboxid").value ="success";
that will work in all browsers
<input type="text" name="txt" id="txt" value="Name" onblur="if(this.value.length == 0) this.value='Name';" onclick="if(this.value == 'Name') this.value='';" />
guy schaller
document.getElementById("textboxid").value ="success";
is good idea!
vijayakumar-n
try to save var form = document.forms['detail']; in a hidden input! then you will always be able to reach the form data..
The form gets submitted upon clicking the button that is typed as "submit" - the page gets reloaded.
Return false from the changeText() method and change onClick=changeText() to onClick="return changeText();" to prevent the form from getting submitted.
Alternatively, you can change the type of the button from "submit"to "button" to prevent submission. Then you'd have to add another submit button (even returning false will need you to find another way to submit the form).
Related
I have a form with id theForm which has the following div with a submit button inside:
<div id="placeOrder"
style="text-align: right; width: 100%; background-color: white;">
<button type="submit"
class='input_submit'
style="margin-right: 15px;"
onClick="placeOrder()">Place Order
</button>
</div>
When clicked, the function placeOrder() is called. The function changes the innerHTML of the above div to be "processing ..." (so the submit button is now gone).
The above code works, but now the problem is that I can't get the form to submit! I've tried putting this in the placeOrder() function:
document.theForm.submit();
But that doesn't work.
How can I get the form to submit?
Set the name attribute of your form to "theForm" and your code will work.
You can use...
document.getElementById('theForm').submit();
...but don't replace the innerHTML. You could hide the form and then insert a processing... span which will appear in its place.
var form = document.getElementById('theForm');
form.style.display = 'none';
var processing = document.createElement('span');
processing.appendChild(document.createTextNode('processing ...'));
form.parentNode.insertBefore(processing, form);
It works perfectly in my case.
document.getElementById("form1").submit();
Also, you can use it in a function as below:
function formSubmit()
{
document.getElementById("form1").submit();
}
document.forms["name of your form"].submit();
or
document.getElementById("form id").submit();
You can try any of this...this will definitely work...
I will leave the way I do to submit the form without using the name tag inside the form:
HTML
<button type="submit" onClick="placeOrder(this.form)">Place Order</button>
JavaScript
function placeOrder(form){
form.submit();
}
You can use the below code to submit the form using JavaScript:
document.getElementById('FormID').submit();
<html>
<body>
<p>Enter some text in the fields below, and then press the "Submit form" button to submit the form.</p>
<form id="myForm" action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").submit();
}
</script>
</body>
</html>
HTML
<!-- change id attribute to name -->
<form method="post" action="yourUrl" name="theForm">
<button onclick="placeOrder()">Place Order</button>
</form>
JavaScript
function placeOrder () {
document.theForm.submit()
}
If your form does not have any id, but it has a class name like theForm, you can use the below statement to submit it:
document.getElementsByClassName("theForm")[0].submit();
I have came up with an easy resolve using a simple form hidden on my website with the same information the users logged in with. Example: If you want a user to be logged in on this form, you can add something like this to the follow form below.
<input type="checkbox" name="autologin" id="autologin" />
As far I know I am the first to hide a form and submit it via clicking a link. There is the link submitting a hidden form with the information. It is not 100% safe if you don't like auto login methods on your website with passwords sitting on a hidden form password text area...
Okay, so here is the work. Let’s say $siteid is the account and $sitepw is password.
First make the form in your PHP script. If you don’t like HTML in it, use minimal data and then echo in the value in a hidden form. I just use a PHP value and echo in anywhere I want pref next to the form button as you can't see it.
PHP form to print
$hidden_forum = '
<form id="alt_forum_login" action="./forum/ucp.php?mode=login" method="post" style="display:none;">
<input type="text" name="username" id="username" value="'.strtolower($siteid).'" title="Username" />
<input type="password" name="password" id="password" value="'.$sitepw.'" title="Password" />
</form>';
PHP and link to submit form
<?php print $hidden_forum; ?>
<pre>Forum</pre>
I'm simply trying to get the value of an input box embedded in a form tag.
For example, this works just fine.
<div>
<label>First Name</label>
<input id="firstName" type="text" required />
</div>
<button type="submit" onclick="getName()">Submit</button>
<script type="text/javascript">
function getName() {
var name = document.getElementById('fistName').value;
console.log(name);
}
</script>
This outputs whatever value is enter in the console when the submit button is clicked. However if I put it in a form like below it doesn't return anything.
<form>
<div>
<label>First Name</label>
<input id="firstName" type="text" required />
</div>
<button type="submit" onclick="getName()">Submit</button>
</form>
Does the form tag add some protection? How can I get the value out of an input tag inside a form?
it doesn't return anything
Yes it does.
However, since you're submitting a form, the page is also immediately refreshing and you're starting over from scratch.
The form isn't "protecting" anything. The code is doing exactly the same thing in both cases. But in the second case the form is also doing something else (loading the page) before you've physically had time to see the result.
Button of type submit refreshes the page. Also the console gets cleared. So it does output but gets immediately cleared. Try changing the button type to "button". Then it will not refresh the page and you will see the output.
For some reason, when the form button is clicked, the jQuery script I wrote isn't running, does anyone know why?
<body>
<form id="inputform" action="google.com">
<text id="text">Enter Your Number:</text>
<input id="input" name="input" type="text">
<input id="submitArea" type="submit" value="">
</form>
</body>
$('#inputform').submit(function() {
window.location = "http://mysite.com/";
});
Yes, I imported the jQuery library and everything, I've sourced the external JS file, but I can't figure out why it still isn't working.
You need to prevent the default action from occuring. You can do that by using preventDefault action on the event e. Something like this:
$(function(){
$('#inputform').submit(function(e) {
e.preventDefault();
window.location = "http://mysite.com/";
});
});
Assuming your script is inside document ready, else you need to move the script inside `jQuery(function($){.....});
You need to prevent the default action of the submit button
$('#inputform').submit(function(e) {
window.location = "http://mysite.com/";
return false; // or call e.preventDefault();
});
Ideally you should not do a window.location call from inside a submit button. The data you entered in the Form's text input field wont be automatically posted to the action page if you do so.
<body>
<form id="inputform" action="http://mysite.com/">
<text id="text">Enter Your Number:</text>
<input id="input" name="input" type="text">
<input id="submitArea" type="submit" value="">
</form>
Okay, I'm pretty sure I'm missing something very obvious here, but I just couldn't find a proper solution so far. What I'm trying to do is simple: Have a user write something into a form, have him submit the form, and write that input into a textarea on the same page.
This is my code:
<html><head></head>
<body>
<form name='registration'>
<label for="input">Input:</label>
<input type="text" id="input"/>
<input type="submit" id="submit" value="Submit" onclick="execute()"/>
</form>
<div id="results">
<span>Result</span>
<span><textarea cols="30" rows="5" id="resulttext" readonly="readonly"></textarea> </span>
</div>
<script>
function execute()
{
var result = document.getElementById("input").value
document.getElementById("resulttext").value=result;
}
</script>
</body>
</html>
Now what happens if I enter something into the form is that the textarea briefly shows my input before reverting back to showing nothing. My guess is that the textarea field is only changed for the duration of the execute() function.
When I change input type="submit" to a <button> everything works as intended, but I'm pretty sure I'm not supposed to do that.
You need to cancel the default event for the submit button, otherwise it just submits the form (which in this case essentially reloads the page since there are no form elements with names). Add return false;after execute() (put a ; in between the two pieces)
Because your button is of type submit, it will submit your form after executing the execute() method. You can change the button type to type="button" and you will not have this submit behavior.
http://jsfiddle.net/PCCbh/
Note - using <button> is okay in this case. It is essentially the same as <input type="button".
I have a form with an input text field which imports data every couple of seconds and display it in the form field , let us say :
<input name="code" id="code" type="text" size="64" maxlength="128" />
and a submit button and my form has the formname form1.
I want the submit button to be clicked as soon as the data in the form field is changed.
I did try to do the following. In the header I did add the follwoing javascript:
<SCRIPT LANGUAGE="javascript">
function send_data()
{
document.form1.submit();
}
</SCRIPT>
and on the form :
<input name="code" id="code" type="text" size="64" maxlength="128" onchange="send_data();" />
but it didn`t work..
Any help ?
Thanks
Something like this would work:
<form action="#">
<input type="" id="input" />
<button type="submit"></button:>
</form>
<script>
function send_data() {
document.forms[0].submit();
}
window.onload = function(){
var input = document.getElementById('input');
input.onchange = send_data;
}
</script>
But I'd add a few caveats:
I'm assuming there is only one form on the page. You would be safer assigning and ID to your form and using getElementById and referencing that instead of document.forms[x]
The change event will only happen after you lose focus on the input, which I probably what you want? Just making sure it's expected behavior
Without knowing why you need to do this, I'd note that it could potentially be very annoying to the user, as submission will trigger a new page load. You may be better off doing a submission via ajax so as not to disrupt the user's browsing. If you do this, I strongly recommend a JS library to handle this.