Repopulating form fields with javascript - javascript

Hi Sorry I'm newbie in Javascript but I need to know how I can do to repopulate a form field when I have this kind of form :
I tried with this code(part) but it doesn't work,the file name is 'testjavascript.html'
<head>
<script language="javascript" type="text/javascript">
function updateUsername(){
var first = document.getElementById("first").value;
document.getElementById("first").value = first;
} </script>
</head>
<body>
<form action="action.php" method="post">
<input type="text" name="usename" value="" id="first" >
Link
<input type="submit" name="submit">
</form>
</body>

This behavior needs to be on the server side. When you change page, the browser will reload your javascript code and you will lose all references.

Related

How does this HTML method = "POST" tag work?

I recently started a project that was going to download some data from a certain site. Unfortunately, when I wanted to download html with r.text, I got this code instead of the code I expected:
<html>
<head>
<title>Working...</title>
</head>
<body>
<form method="POST" name="hiddenform" action="some link"><input type="hidden" name="wa" value="wsignin1.0" /><input type="hidden" name="wresult" value="some links tokens and certificates" /><input type="hidden" name="wctx" value="some link" /><noscript><p>Script is disabled. Click Submit to continue.</p><input type="submit" value="Submit" /></noscript></form>
<script language="javascript">
window.setTimeout('document.forms[0].submit()', 0);
</script>
</body>
</html>
When I open this html code in webbrowser it redirects me to a certain site.
Can I send request with python requests module that will work just like that ?
If I did not explain something enough, I would be grateful to write it in a comment.

Cloudinary jQuery File Upload - image not uploading after selection

I'm trying to test the Cloudinary Uploader (via jquery and PHP).
I follow the instructions there:
http://cloudinary.com/documentation/php_image_upload#direct_uploading_from_the_browser
I'm interested to make it work as browser uploading (not server side).
My final HTML/script text is the following (I put some XXXX).
<html>
<head>
<title></title>
<script src="js/jquery-3.1.1.min.js"></script>
<script src='js/jquery.ui.widget.js' type='text/javascript'></script>
<script src='js/jquery.iframe-transport.js' type='text/javascript'></script>
<script src='js/jquery.fileupload.js' type='text/javascript'></script>
<script src='js/jquery.cloudinary.js' type='text/javascript'></script>
</head>
<body>
<script type='text/javascript'>
$.cloudinary.config({"api_key":"XXXXX","cloud_name":"XXXXX"});
</script>
<form action="uploaded.php" method="post">
<input class='cloudinary-fileupload' data-cloudinary-field='image_id' data-form-data='{"timestamp":1477780986,"callback":"http:\/\/www.XXXXX.XXX\/cloudinary\/cloudinary_cors.html","signature":"96872da4909f6acf00537c78ca41414ea73bXXXXX","api_key":"538456726987XXX"}' data-url='https://api.cloudinary.com/v1_1/di2a8qkzv/auto/upload' name='file' type='file'/> <input type="hidden" name="image_id" id="image_id" />
</form>
</body>
</html>
I just click the "Browse..." button and select a file, but nothing happens.
I have also the Firefox Console ON, but also I don't see any action.
As I understand, the form should automatically submit after the selection of the file. Right?
If not, what exact should I do to submit the file to Cloudinary?
What escapes me?
You have to initialize the input field as well. Try adding your code the following:
$('.cloudinary-fileupload').cloudinary_fileupload();
Make sure that this line is loaded last, so either put it at the end of the HTML or put it in a $( document ).ready() block.
On file input append this:
onchange="this.form.submit();"
Change this line of code:
<form action="uploaded.php" method="post">
<input class='cloudinary-fileupload' data-cloudinary-field='image_id' data-form-data='{"timestamp":1477780986,"callback":"http:\/\/www.XXXXX.XXX\/cloudinary\/cloudinary_cors.html","signature":"96872da4909f6acf00537c78ca41414ea73bXXXXX","api_key":"538456726987XXX"}' data-url='https://api.cloudinary.com/v1_1/di2a8qkzv/auto/upload' name='file' type='file'/> <input type="hidden" name="image_id" id="image_id" />
</form>
to:
<form action="uploaded.php" method="post">
<input onchange="this.form.submit();" class='cloudinary-fileupload' data-cloudinary-field='image_id' data-form-data='{"timestamp":1477780986,"callback":"http:\/\/www.XXXXX.XXX\/cloudinary\/cloudinary_cors.html","signature":"96872da4909f6acf00537c78ca41414ea73bXXXXX","api_key":"538456726987XXX"}' data-url='https://api.cloudinary.com/v1_1/di2a8qkzv/auto/upload' name='file' type='file'/> <input type="hidden" name="image_id" id="image_id" />
</form>

remove focus from an HTML element on load

I am using this theme for my website and I have customised its contents. I have added one more slide (fragment), on for login form. However, due to the username input field in this form, whenever the page loads, the focus shifts from home fragment to this username field and the page looks skewed. I tried adding a hidden field hiddenfield in the first home fragment and writing
<body onload="setfocus()">
where setfocus() is
function setfocus() {
document.getElementById("hiddenfield").focus();
}
but it didn't work.
In short, I need to remove the default focus from an inputbox on page and give it to a fragment. How to do this? Please help as I need to fix this issue immediately.
I haven't been able to reproduce the default focus to the input field, but if you add an id attr to the element you want to be at the top of the page, you should be able to navigate to it after the page loads.
<html>
<head>
<script type="text/javascript">
window.onload = function(){
window.location.hash = '#divToFocus';
}
</script>
</head>
<body>
<div id="divToFocus">fasdfsdfsd</div>
<form action="action">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30" /><br />
E-mail: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>
</body>
</html>
JsFiddle
Try this in either <script> tags or seperate .js file.
(function() {
document.getElementById("hiddenfield").focus();
})();
or:
<!DOCTYPE html>
<html>
<head>
<script>
function setFocus()
{
document.getElementById("hiddenfield").focus();
}
</script>
</head>
<body onload="setFocus()">
<!-- stuff here -->
</body>
</html>
Try window.focus() instead of the hidden element

How to submit form using JS [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
submit is not a function in javascript
I am trying to submit form using JS, but no luck. Here is the code. JSFIDDLE
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function validate () {
alert('start');
$('#myform').submit();
alert('end');
}
</script>
</head>
<body>
<form id="myform" name="myform" method="post" action="">
<input type="button" value="submit" id="submit" onclick="validate();" >
</form>
</body>
</html>
The question is "Why its not working?".
You have an form element with the id submit which conflicts with the form method submit, change the submit button id to something else.
You can access form elements as properties of the form object, so if you have a form say myForm and an input in the form with id or name submit then myForm.submit will be the input element with id submit and not the original submit method.
See http://jsfiddle.net/4kg8c/1/
The error in the console is
Uncaught TypeError: Property 'submit' of object #<HTMLFormElement> is not a function
The problem is you hijacked the sumit() function by naming an element submit. Change the button's id to btnSubmit.
I have modify your code with solution use that.
submit button's name is missing. and don't use name as "submit" of submit. it conflicts with JS so.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function validate () {
document.myform.submit();
}
</script>
</head>
<body>
<form id="myform" name="myform" method="post" action="">
<input type="button" name="save" value="submit" id="submit" onclick="validate();" >
</form>
</body>
</html>
If this is the exact code you have written, then I think you have ot included jQuery library in the page.
You need to include jQuery file before you can use the $("#myform") notation.
Also specify some action URL where you want to submit the page to ?
You use jQuery code (the $ function) but you do not include the jQuery source.

Firefox ignores JavaScript override of form submit

I have this code
<html>
<head>
<script type="text/javascript" src="my-search.js"></script>
</head>
<body onLoad="my_Init();">
<div>
<form name="id_msearchform" onsubmit="my_EventHandler_Action(); return false;">
<input type="text" name="id_searchphrase" value="example"></input>
<br><br>
<input type="submit" name="id_searchsubmit" value="Search"></input>
</form>
<br><br>
<div id="id_searchresults">No search done...</div>
</div>
</body>
</html>
I don't want the browser to request a new URL. That is why "onsubmit" has "return false;". This code works in Internet Explorer, but Firefox generates a new request. Any ideas what I am doing wrong?
FireBug changes between not wanting to acknowledge there is Javascript reference and showing the Javascript file without any errors... I will update this when i have more to add. I will try various thingsm e.g. try upload it to the net and see if FireFox behaves differently when not running JS on local disk.
Are you sure that you haven't got any errors?
I try with a simple html:
<html>
<head>
<script type="text/javascript" src="my-search.js"></script>
</head>
<body onLoad="my_Init();">
<div>
<form name="id_msearchform" onsubmit="my_EventHandler_Action(); return false;">
<input type="text" name="id_searchphrase" value="example"></input>
<br><br>
<input type="submit" name="id_searchsubmit" value="Search"></input>
</form>
<br><br>
<div id="id_searchresults">No search done...</div>
</div>
</body>
</html>
And a simple javascript called my-search.js in the same path of my html with the next code:
var my_Init = function(){
alert('Hello Onload');
}
var my_EventHandler_Action = function(){
alert('Hello OnSubmit');
}
And it works fine.
Can you show a live demo (with dropbox or something)?
Instead of using a submit button, try using a button and link the javascript function to that.

Categories