Javascript Form Submit Failure - javascript

I have code on my website that isn't working, and I haven't been able to figure out why...
Here is the code:
if (self.location.href == top.location.href) {
document.fastform.submit();
document.getElementById(fastform).submit();
}
Now if I put something other than a form submit into the if statement, it works just fine. It's just when I do the form submit code it never works...
Here is the form code:
<form id="fastform" name="fastform" ACTION="/amember.php">
<INPUT TYPE="text" NAME="myurl" ID="myurl">
<input type="submit" />
</form>
Thanks for the help guys!
So far none of the suggestions work, I have tried several different variations like putting quotes around the fastform in getelementbyid. Here is my entire javascript program:
<script type="text/javascript">
function geturl() {
var locate = document.location
document.fastform.myurl.value = locate
}
window.onload = geturl;
if (self.location.href == top.location.href) {
var f=document.forms.fastform; f.submit();
}
</script>
Thanks for the suggestions!
Okay, so using some of the suggested code here I got it working. The problem was the if statement was not being executed at the right time, I moved things around so that the if statement was executed LAST and everything started working. Here is the complete (functioning) code:
<script type="text/javascript">
function geturl() {
var locate = document.location
document.fastform.myurl.value = locate
getmeoutofhere()
}
window.onload = geturl;
function getmeoutofhere() {
if (self.location.href == top.location.href) {
document.getElementById('fastform').submit();
}
}
</script>
<form id="fastform" name="fastform" ACTION="/amember.php" style="visibility:hidden;">
<INPUT TYPE="text" NAME="myurl" ID="myurl" />
<input type="submit" />
</form>

You can use this in your function:
var f=document.forms.fastform;
f.submit();
and it's working completely fine

document.getElementById('fastform').submit();
OR
var frm = document.getElementById('fastform');
frm.submit();

I'm not sure if it's the problem, but there's certainly one problem with the line:
document.getElementById(fastform).submit();
The problem, I think, is that you're trying to get an element by its id, but getElementById() requires a quoted string, unless you've already assigned the string to the variable represented by fastform. Therefore it should be either:
document.getElementById('fastform').submit();
or:
var fastform = 'fastform';
document.getElementById(fastform).submit();
Further, you seem to be trying to work with the fastform variable before it seems to have been set, in the first line contained within the if statement:
document.fastform.submit();
I'd suggest amending your script a little, to be something like:
if (self.location.href == top.location.href) {
var fastform = document.getElementById('fastform');
fastform.submit();
}
References:
document.getElementById().

Related

Unable to change a value inside a variable?

I am currently working on a project that I took over with the input reads from a barcode, currently iam having trouble with my output giving me a fix value which the code reads from and does not read from the actual input.
below is the html code for the scanner. it reads fine
<div class="section" id="instruction-3">
<p>Otherwise, scan your code at the bottom, or manually type it in here:</p>
<span>
<input type="text" id="IC-input" name="IC" onclick="openKeyboard()" onkeyup="autofill(this.value)" placeholder="Enter your IC Number" required maxlength="9">
<label><button type="button" id="theButton" onclick="theButtonIsPressed()">Submit</button></label>
</span>
</div>
follow by the javascript (which i suspect is where the problem lies but am not sure)
<script>
var NRIC = '{"NRIC":"0"}';
function theButtonIsPressed(){
closeKeyboard();
console.log('button clicked');
NRIC = '{"NRIC":"123456789"}';
//var IcNum = document.getElementById("IC-input").value;
//NRIC = NRIC.replace("0", IcNum);
document.getElementById("IC-input").value = "";
doWork(NRIC)
}
</script>
function doWork(NRIC) {
// ajax the JSON to the server
$.post("receiver", NRIC, function(){
});
// stop link reloading the page
function update() {
setInterval(function(){$.post("receiver", '{"NRIC":NRIC}', function(){});}, 900);
It keeps giving me the value inside NRIC = '{"NRIC":"123456789"}'; which is 123456789, i realize this might be a simple fix but i am still learning and am unsure.
thank you in advance.
If I correctly understanded you want to have in the obj the input value, so try this:
function theButtonIsPressed(){
closeKeyboard();
console.log('button clicked');
var IcNum = document.getElementById("IC-input").value;
NRIC.NRIC = IcNum;
doWork(NRIC)
}
Why quotes around an object?
var NRIC = {"NRIC": 0};
function theButtonIsPressed() {
NRIC = {"NRIC": 123456789};
doWork(NRIC)
}
all but I have solved the problem, it was my fault that I did not mention I wanted to transfer the data to another webpage, and the problem with that was that the data was not transferred over to the other html.
function autofill(value){
console.log("Autofill:"+value)
//console.log(9 digits);
button = document.getElementById("theButton");
if(value.length == 9){
console.log('form is ready to submit');
theButtonIsPressed(value);
}
}
function theButtonIsPressed(value){
closeKeyboard();
console.log('button clicked');
//NRIC = '{"NRIC":"123456789"}';
console.log(value)
doWork(value)
}
by doing this it read the value as accordingly from the input and worked after, sorry again for my confusing question and thanks to everyone who tried to help.

Javascript can't read null

I'm using javascript integration to submit a form that will call the factorial function in my javascript. I use the scripts and style plugin to integrate the javascript code. But it ends with an error at var n in the script.
Cannot read property 'value' of null at HTMLInputElement.factorial
Below is the code.
In my post I put:
<form id="cal_factorial">
Enter No:<input type="number" id="num" name="number"/><br/>
<input type="button" value="factorial" id="factorialize"/>
</form>
<p id="answer"></p>
In the head I have the script as:
document.addEventListener("DOMContentLoaded", function(){
document.querySelector("#factorialize").onclick = factorial;
});
function factorial(){
var n=document.getElementById("#num").value;
var ans =1;
if(n>1){
var trail = n*(n-1)
ans = ans *trail;
n-=1;
}
document.querySelector("#answer").innerHTML = ans;
}
Anything wrong with the definition?
document.getElementById("#num").value;
is incorrect.
it should be
document.getElementById("num").value;
without the #
Remove the hashtag in getElementById,
var n=document.getElementById("num").value;
There might be something wrong with scope, the code look ok
have a look here
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onsubmit

I want to join two inputs in one var at html on Wordpress

I'm using wordpress but making my own form for payments, i have two inputs of type select, like this:
<div id="S03" class="Selectos"><select tabindex="4" name="Mes" required="">
<option...[Code goes on]
And this:
<div id="S04" class="Selectos"><select tabindex="5" name="Ano" required="">
<option...[Code goes on]
Those works fine, but i want to join them in one input, i have research all day long, i found some clues about what i have to do, but in especifics no one does help me.
This is the input for the joining:
<input id="Expires" name="Expires" type="hidden" />
And the way i call the form:
<div class="container"><form id="contact" class="RV_donateForm" action="https://eps.banorte.com/secure3d/Solucion3DSecure.htm" method="post">
And how it close:
<fieldset><button id="contact-submit" name="submit" type="submit" data-submit=" ">Donar</button></fieldset>
</form></div>
Then i look for some way to joining and this one looks the better way to do it at the submit event:
<script type="text/javascript">
button.onclick = function (){
document.getElementById('Expires').value = document.getElementById('S03').value + '/' + document.getElementById('S04').value; cn = document.getElementById('Expires').value ;
alert(cn);
};
</script>
Well, at the bank 'post' they throw me all the vars ok, except for Expires that never joins and shows null, and i notice also because it never show me the alert. I'm new at html and JavaScript, and i'm not sure what could be wrong. All the code on the file are on this order for exception that the call of the form is at the beginning of everything, ¿maybe is the position on line that i have to put the javascript?
I appreciate any help. Thanks a lot stackfellas!
You may want to check this https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener
I guess you first need to get the button, then add the listener
<script type="text/javascript">
var button = document.getElementById('contact-submit')
button.addEventListener('click', function () {
document.getElementById('Expires').value = document.getElementById('S03').value + '/' + document.getElementById('S04').value;
cn = document.getElementById('Expires').value ;
alert(cn);
});
</script>
Finally! It does work like Omar says, but loading the addEventListener at onload body function, it will run the function that the event refers when you click on submit button.
<script type="text/javascript">
function putExpires(){
var cm = document.getElementById('S03').value;
var ca = document.getElementById('S04').value;
document.getElementById("Expires").value = cm + '/' + ca;
var cn = document.getElementById("Expires").value;
}
function load() {
var button = document.getElementById("contact-submit");
button.addEventListener("click", function(){putExpires()}, false);
}
</script>
<body onload="load();">
Thanks Omar!

adding an input value and submitting the form on load

I have the following form:
<form action="http://example.co.uk/order" method="post" id="voucher" class="AVAST_PAM_nonloginform">
<fieldset>
<h4>Vouchers</h4>
<input type="text" class="discount_name form-control" id="discount_name" name="discount_name" value="">
<input type="hidden" name="submitDiscount">
<button type="submit" name="submitAddDiscount" class="button btn btn-default button-small"><span>OK</span></button>
</fieldset>
</form>
and am using the following script:
<script>
window.onload = function(){
document.getElementById(\"discount_name\").value = \"50681\";
}
</script>
to populate the input. I then use:
<script>
window.onload = function(){
document.forms['voucher'].submit();
}
</script>
to activate the submit.
However, use the second script, it stops the "50681" from being inputted into the text box (instead submits a blank input).
Originally I had the code as :
<script>
window.onload = function(){
document.getElementById(\"discount_name\").value = \"50681\";
document.forms['voucher'].submit();
}
</script>
(I split it up thinking it may be a timing issue).
Any ideas?
p.s. the reason for the backslash's is due to it currently being run under php until I can get it working
The issue seems to be with (\"discount_name\").value = \"50681\"; & document.forms['voucher'].submit();
In either of the case you can avoid \ & for form you need to target by the index number. Assuming there is only one form present , so passing 0 in index
window.onload = function(){
document.getElementById("discount_name").value = "50681";
document.forms[0].submit();
}
Note: In the demo I have changed the action url to https else it will prohibit to make call from jsfiddle. In your case you can still keep http in code
DEMO USING ID

Javascript: I cant get a textbox to display a value updated on the client side

I'm trying to simply have a button update the contents of ah HTML textbox (on the client side).
Clicking the button fires the updateBox() method fine. Stepping through the code, I can see the text1.value field update fine but the text1 does not seem to get updated by changes to the dom.
Am I mistaken to think that you can do updates on the client side only by modifying dom data?
<input type=text name="text1" value="100"/>
<button name="but1" id="but1" onclick="updateBox" >clickme!</button>
<script type="text/javascript" >
var text1 = document.getElementsByName('text1');
function updateBox() {
//text1.value = "22"; <----tried this way, no good either :(
text1.innerHTML = "99";
}
</script>
Few things:
onclick="updateBox" should be onclick="updateBox()"
var text1 = document.getElementsByName('text1'); should be var text1 = document.getElementsByName('text1')[0]; (note the [0])
text1.value = "22"; is the one to use
jsFiddle example
Try use below,
var text1 = document.getElementsByName('text1')[0];
function updateBox() {
text1.value= "99";
}
Ref: https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByName
Thanks for everyone's responses.
With your advice I got the button to update. I appreciate the advice on how to implement the function correctly. This was just a test so I didn't pay much attention.
1) I had to use: onclick="updateBox" rather than "updateBox() in the button HTML because "updateBox" caused the event to fire with out clicking the button.
2) Big thanks for pointing out that I was referencing a collection instead of an item in the collection. Had to use: var tb1 = document.getElementsByName('tb1')[0];
3) For some reason the box would not update when I used:tb1.innerHTML = "99";
This worked: tb1.value = "99";
text1[0].innerHTML = "99"
Use innerHTML instead of value
try passing the variable to your function instead of declaring it outside of your function.
<input type=text name="text1" value="100"/>
<button name="but1" id="but1" onclick="updateBox('text1',99)" >clickme!</button>
<script type="text/javascript" >
function updateBox(t,v) {
var tv = document.getElementsByName(t)[0];
tv.value = v;
}
</script>

Categories