How to get Javascript to post a form? - javascript

I am using the following code:
document.forms["form_name"].submit();
It doesn't seem to work. Is there another way to submit a form using Javascript?

Not really. It probably doesn't work because you have form element named "submit". Change its name and the code will work.
To confirm this is really the problem, some debug is required:
var sFormName = "form_name";
var oForm = document.forms[sFormName];
if (oForm) {
if (oForm.elements["submit"]) {
alert("form contains element named submit, can't use JS to submit it");
}
}
else {
alert("Form named " + sFormName + " does not exist");
}
Keep us updated. :)

If you're in Internet Explorer, there HAS to be a <input type='submit'> present in the form in order to work. May just be IE7, but we've run into that problem.
To hide the button just use style='display:none;'

Related

Focus specific 'id' after submit action

I want to focus on specific id (ex. using $('#a')) after submit.
There is nothing special with my code yet.
My javascript code is
function get_info(id){
$(user_id).submit();
$('#a).focus();
};
After submit, it should focus on where id='a'.
But after submit window focus on id='a' and reset the page.
I tried using
function get_info(id){
$(user_id).submit(function(e){
e.preventDefault();
$('#a').focus();
});
};
But this code make program worse. I think it stops performing submit.
Can anyone help me?
As Chris's comment says you couldn't focus on the element simply by using $('#a').focus(); after the submit since the page will be redirected/refreshed.
You need to use cookies or local storage, here a suggested sample using local storage like :
function get_info(id) {
localStorage.setItem('focusItem', '#a');
$(user_id).submit();
};
Then in the ready function, you could add :
$(function(){
var focusItem = localStorage.getItem('focusItem');
if( focusItem != null ){
$(focusItem).focus();
localStorage.removeItem('focusItem');
}
});
function SetFocus(){
$("#FocusingID").focus();}
/***********another way **********************//*
$("#submitbtnId").click(function(){
//your submession and other task;
$("#FocusingID2").focus();
});
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=text id=FocusingID>
<button type=submit onclick="SetFocus();">click</button>

Character submitted wrong after replace

i use a greasemonkey script to replace any commas or semicolons from fields.
There are several internal websites where i have to do this, some only with input fields, some with textarea.
The script actually works, but when i submit the form, the replaced characters of the textareas will still get submitted as commas and semicolons.
To be sure that the submit will not be triggered before last blur, i added a alert.
(function() {
'use strict';
$(document).ready(function(){
$("textarea").blur(function(){
this.value=this.value.replace(/[,;]/g, "-");
this.value=this.value.replace(/\n/g, " ");
});
$("input").blur(function(){
this.value=this.value.replace(/[,;]/g, "-");
this.value=this.value.replace(/\n/g, " ");
});
});
var nodes = document.getElementsByTagName('input');
if (window.location.href == "<website-url>")
nodes[39].setAttribute('onclick', 'alert("Data validated")');
else
nodes[0].setAttribute('onclick', 'alert("Data validated")');
Any ideas? Tested with different browsers and different characters.
I'd use the submit event to make sure any lingering changes not handled yet by blur are handled before submission:
$(document).ready(function() {
function updateValue() {
this.value = this.value.replace(/[,;]/g, "-").replace(/\n/g, " ");
}
$("textarea, input").blur(updateValue);
$("form").submit(function() {
$(this).find("textarea, input").each(updateValue);
});
});
Sadly, Stack Snippets don't allow forms, so here's the above live on jsFiddle. Note that if you type, say, cute;kittens into the field and then either tab out of it or submit it, it's changed to cute-kittens and that's the value that gets submitted to Google if you send the form.

How to render a new page in a javascript script

I am using XHTML, JSF and JavaScript to create a form, validate that information has been submitted into selected fields onclick in a h:commandButton, and if validated, redirect to a different page homepage.xhtml. Everything works up to the redirection, which I can't get to work.
In the JavaScript function Validation(), I have tried location="homepage.xhtml", window.location.href="homepage.xhtml", location.url="homepage.xhtml" and a few others, but nothing seems to work. I have a feeling I'm supposed to have some sort of statement which adds href="homepage.xhtml" to the h:commandButton if Validate() returns true, but I am unsure as to how to do that.
Any help is greatly appreciated. I have added the relevant code below.
Button:
<h:commandButton class="btn btn-warning" value="Continue" onclick="Validation()"/>
Validation
function Validation() {
var nameCheck = document.getElementById('formdiv:cardName');
var numCheck = document.getElementById('formdiv:cardNumber');
var expCheck = document.getElementById('formdiv:expDate');
console.log(nameCheck.value);
console.log(numCheck.value);
console.log(expCheck.value);
var variablesToCheck = [nameCheck, numCheck, expCheck];
for(i=0; i < variablesToCheck.length; i++){
if(variablesToCheck[i].value == null || variablesToCheck[i].value == ""){
alert("Fields marked with a * must be completed");
return false;
}
}
// This is where the redirection needs to go, I think...
return true;
}
EDIT: Just noticed the if else statement is incorrect logically, but syntactically it shouldn't make a difference. The else part needs to be a statement outside of the loop without a condition; this code simply tries to redirect when the field it is checking has something in, not when all fields have something in.
EDIT 2: Loop corrected
Why you need h:commandButton anyway you are using simple javascript validation
h:commandButton is rendered as <input type="submit" ../> its mission is
to submit the form so what ever javascript you are writing your form will be submitted and your page is gonna be refreshed, So If you need it this way you have to force it not to submit the form,
However from understanding your needs all you need is simple <a /> or <button /> , Or you can just add type="button" into your h:commandButton ex:<h:commandButton type="button" .../>
You can either use..
window.location.replace('Your_url'); ..
or you can use..
window.location.href= 'Your_url'; .. I guess there must be other functions too. If you want to open it in another window, like a popup, you can use.. window.open('your_url');
Hope this helps!

How to disable button in javascript

Onclick of button,(In clientclick event)I show confrmation box having ok and cancel button.Onclick of ok button,buttonclick event fire.I want to disable button and show to message(Pls wait) to user.I am trying but not working.Unable to disable the button and set text to label.
function validate()
{
var response = confirm(Proceed)
if(response)
{
document.getElementById('btnSave').disabled = true;
document.getElementById('lblMessage').innerText = 'Please Wait';
return true;
}
else
{
return false;
}
}
I am getting error.Error is
JavaScript runtime error: Unable to get property 'innerText' of undefined or null reference in asp.net
First of all there's maybe a problem in your HTML. Javascript cannot find the 'lblMessage' element. Fix that first and you're good to go.
Maybe you're using ASP.NET Web Forms. ASP.NET changes the client ID's of server controls depending on the ID of their container. You can change this behavior easily by reading this article:
http://weblog.west-wind.com/posts/2009/Nov/07/ClientIDMode-in-ASPNET-40
Or, find your elements by class name. That way it won't cause conflict with any configuration you're now using.
I think you need to add your html code. I'm guessing your html looks like this
<button onclick="validate()">
you need to add a return statement into the html code so it looks like this
<button onclick="return validate()">

What can cause form buttons to fail in firefox?

I have some form buttons
<input type="button" onclick="send_away('700302','update_item','0',2)" value="Change Quantity">
and they are calling the functions below: (different buttons call different functions from this script, which is embedded in the HTML file.
<script language="javascript" type="text/javascript">
function send_away(item_c,request_c,change_item_c,quantity_c){
form_c.item.value = item_c;
form_c.request.value = request_c;
form_c.change_item.value = change_item_c;
form_c.quantity.value = quantity_c;
form_c.submit();
}
//sends the form later
function later(){
address.incoming_address.value = 'l';
address.submit();
}
function address_now(){
form_c.incoming_address.value = 'n';
form_c.submit();
}
function remove_item(item_num){
form_c.removal.value = item_num;
form_c.submit();
}
</script>
The problem is, not one of these buttons works in firefox. They all work in every other browser I've tried.
Has anyone run into this kind of problem / know what I could be doing wrong? I've stared at it for a while and can't see anything, other than that my HTML doesn't validate very well, I don't have nearly time to fix all the validation problems though.
You can see the effect at http://www.terra-cotta-pendants.com/ - click a product and add it to cart - the buttons are on the cart page.
Thanks for any help.
add id="form_c" to your form and use document.getElementById('form_c') instead of just form_c
another option would be to access the form by using document.forms.form_c, but I have always preferred using id's

Categories