I am trying to get a hyperlink element to act as a form submit button. This sort of question has been answered multiple times over the years but, for some reason, I am not able to get it to work even with cut-n-pasted code and I'm wondering if I'm missing something trivially simple that my eyes are too bugged out to see. The full code is here:
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
function signup() {
alert("Form is " + document.signup_form);
document.signup_form.submit() ;
}
-->
</script>
</head>
<body>
<?php
echo("Submit is [" . $_POST['submit'] . "]");
?>
<form method="post" name="signup_form" id="signup_form" action="" >
<input type="text" name="from_email" placeholder="e-mail address"><br>
<input type="submit" name="submit" value="Send Email">
Sign Up!<br>
</form>
</body>
</html>
The input submit element ("Send Email") works fine. The hyperlink ("Sign Up!") also works fine and calls the javascript function so that the alert() box in the function shows up.
So, it's just the submit() call that's not doing anything--I even printed out document.signup_form in an alert() box to confirm that it's defined (it is). So what am I missing here?
Thanks for any help!
There is a weird thing with how forms work with Javascript - each field is accessible by using formElement.fieldName. Unfortunately, that means that if you name a field input submit, all of a sudden the built-in formElement.submit() function is replaced by your input element. So in your code, document.signup_form.submit() is failing because it is calling the element, not the method, and you can't call an element as a function. See this SO QA for details.
The fix is easy - change:
<input type="submit" name="submit" value="Send Email">
to:
<input type="submit" name="submitBtn" value="Send Email">
Also, as others have noted, you will want to give your form a valid action. Also, in general it might be preferred to access things by id (document.getElementById()) instead of by things like document.signup_form.
Your <form> element is missing a value in it's action attribute. Quoting the specs:
You also have to specify the URL of the service that will handle the
submitted data, using the action attribute
Link here
Related
I am new to java script. I have created an input which is requires the user to input some text to enable the submit button.
<input class="param" name="test" id="test" required ng-model="test">
How can I fill in the input text box using Java Script so I can submit the form (as if the user has entered the text). Currently, when I use for example the following script to update the value, the submit button on the form is not active.
document.getElementById("test").value =1
Could you update the attribute that ng-model is bound to? That should apply the value to the text field correctly.
I have created this example code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function updateValue() {
document.getElementById("test").value = 'test';
}
window.onload = function () {
updateValue();
}
</script>
</head>
<body>
<form action="" method="post">
<input type="text" id="test" name="test" required>
<input type="submit" value="Okay">
</form>
</body>
</html>
This is what Phani Kumar M and Claies were asking for. I tested it on Windows 10 in Firefox 55.0.3 and Chrome 60.0.3112.113. In both browsers it works correctly. The form can be submitted without adding anything to the field.
Others can check other platforms. As mentioned, the required attribute will not work in Safari.
Your problem is somewhere else. I don't know anything about AngularJS, which you seem to be using without even mentioning it, but it might be there.
I have following simple HTML Form & i tried to submit the form automatically during page load.
Below Javascript code is not automatically submitting the form.
HTML :
<form action="SSL.php" method="POST" name="TForm" id="transactionForm">
<input type="hidden" name="merchantTxnId" id="merchantTxnId" value="test">
<input type="submit" name="submit" id="submit" value="submit" style="visibility:hidden">
</form>
Redirecting ... Please wait...
Java script:
<script>
window.onload = function(){
alert(1); // this is working..
document.getElementById("transactionForm").submit(); //nothing is happening with this line . form is not getting submitted
}
</script>
I found following error in Chrome console mode says:
Kindly suggest me where the problem is...
You may not use submit as the name or id of any of your form elements.
The reason is, that you can reach each child of your form via document.getElementById('form').nameOfTheChild where nameOfTheChild is the name of the child. If you have a child with the name submit, document.getElementById('form').submit is a shortcut to address that child.
The documentation of .submit() says that :
Forms and their child elements should not use input names or ids that
conflict with properties of a form, such as submit, length, or method.
Name conflicts can cause confusing failures.
Hello and thank you for viewing my question. I am a complete beginner and am looking for simple ways to do the following...
What I have in seperate linked documents:
HTML, CSS, Javascript, PHP
What I am having trouble with:
I need to use something like JSON (although I would also accept XML requests or Ajax at this point if they work) to transfer variables from Javascript to PHP. I need the variables to search in a database, so they need to be literally available within PHP (not only seen on a pop-up message or something).
I have seen a LOT of different ways to do this, I have even watched tutorials on YouTube, but nothing has worked for me yet. The things I am having the biggest problem with is that when I add a submit button to my form it doesn't submit my form and I don't know why.
Form code snippet:
<form id="form" name="input" method="post" action="javascript:proofLength();">
<input id="userinput" type="text" autofocus />
<input id="submit" type="button" value="submit" onsubmit="post();">
</form>
The second to last line there doesn't work. Do I need javascript to submit the form? Because I really thought that in this case it was part of the functionality of the form just like method="post"...
The other thing is that for JSON, I have no idea what to do because my variables are determined by user input. Therefore, I cannot define them myself. They are only defined by document.getElement... and that doesn't fit the syntax of JSON.
Those are really my main problems at the moment. So if anyone could show me a simple way to get this variable transfer done, that would be amazing.
After this I will need to search/compare in my database with some php/sql (it's already connecting fine), and I need to be able to return information back to a in HTML based on what I find to be true. I saw one example, but I am not sure that was very applicable to what I am doing, so if you are able to explain how to do that, that would be great also.
Thank you very, very much.
April
You don't need ajax to submit this form. You don't even need javscript. Just do this:
<form id="form" name="input" method="post" action="mytarget.php">
<input id="userinput" name="userinput" type="text" autofocus />
<input id="submit" type="submit" value="submit" />
</form>
This will send the form data to mytarget.php (can be changed of course)
See that i have added the name attribute to your text-field in the form and i changed the type of the button to submit.
Now you can work the Data in mytarget.php like this:
<?
$username = $_POST['userinput'];
echo "Your name is: ".$username;
?>
You wanted to have a check for length in the submit. There are two ways to this:
Before the input is send (the server is not bothered)
Let the server Check the input
for 1 you will have to append a event listener, like this:
var form = document.getElementById("form");
form.addEventListener("submit", function(event){
console.log("test");
var name = form.elements['userinput'].value;
if(name.length < 3){
alert("boy your name is short!");
event.preventDefault();
}
});
Enter a name with less then 3 characters and the form will not be submitted. test here: http://jsfiddle.net/NicoO/c47cr/
Test it Serverside
In your mytarget.php:
<?
$username = $_POST['userinput'];
if(strlen($username) > 3)
echo "Your name is: ".$username;
else
echo "your name was too short!";
?>
You may also do all this with ajax. You will find a lot of good content here. But I'd recommend a framework like jQuery to do so.
The problem is in this line
<form id="form" name="input" method="post" action="javascript:proofLength();">
The action should be a PHP page (or any other type of server script) that will process the form.
Or the proofLength function must call submit() on the form
In the php page you can obtain variable values using $_GET["name"] or $_POST["name"]
To summarize; your code should look like this
<form id="form" name="input" method="post" action="yourpage.php">
<input id="userinput" type="text" autofocus />
<input id="submit" type="button" value="submit">
</form>
and for your php page:
<?php
$userinput = $_POST["userinput"];
//Do what ever you need here
?>
If you want to do something in your javascript before submitting the form, refer to this answer
I am currently in the middle of the development of a website. If a user presses a button an javascript function needs to be called. I simplified this function to:
<html>
<head>
<script type="text/javascript">
function newProd(number,customer,software,hardware,name)
{
//I simplified this function
alert('number is: '+number+'customer is: '+customer+' software is: '+software+' hardware is: '+hardware+' name is: '+name);
}
</script>
</head>
<body>
<input type="text" name="textfieldCustomer"><br>
<input type="text" name="textfieldSoftware"><br>
<input type="text" name="textfieldHardware"><br>
<input type="text" name="textfieldDescription"><br>
<input type="button" name="button" value="go to function" onClick="newProd('a number',textfieldCustomer.value,textfieldSoftware.value,textfieldHardware.value,textfieldDescription.value)">
</body>
when the user presses the button in Internet explorer, the function works perfectly! Unfortunately the function does not work in Chrome or Safari.
Does anyone have any idea what is going wrong?
The form fields are not supposed to be defined as global variables. Maybe in IE they are but that's not a behavior you can depend on. Try this:
onClick="newProd('a number',
this.form.textfieldCustomer.value,
this.form.textfieldSoftware.value,
this.form.textfieldHardware.value,
this.form.textfieldDescription.value)">
Oh, and add a form to wrap the inputs of course.
Demo: http://jsfiddle.net/kdUMc/
In my eyes there are two big mistakes in your code. First, the access to inputs fields is wrong. It needs a connection to an instance variable, like 'document'. The second one, the form tag is missing. If you wrap the input fields into a form tag you can access the values as Esailija has posted.
I'm having a strange behaviour with this code:
<script type="text/javascript">
function get()
{
alert("gggg");
jQuery.get (
"http://localhost:8080/c/portal/json_service",
{
serviceClassName: "com.liferay.test.service.TrabajadorServiceUtil",
serviceMethodName: "findByName",
servletContextName: "TrabajadorPlugin-portlet",
serviceParameters: "[param]",
param : document.getElementById("nombre")
}
);
}
</script>
<div>
<form>
<input type="text" id="nombre" value="<%=searching%>"/>
<input type="button" value="Submit" onClick="javascript:get()"/>
</form>
</div>
Liferay portal gets blocked when the button "Submit" is pressed. The pop-up with the message "gggg" is showed, but after click ok on it, the page becomes blocked.
If I remove the line 'param : document.getElementById("nombre")', it doesn't block.
Can anyone explain me where is the error, or the reason of this behaviour?
Thanks in advance,
Rafa
The problem is that you're trying to pass an entire DOM element as the value for param, which jQuery isn't going to like. What type of element has ID nombre, and what property from that element do you want? If it's some kind of input, you likely want the value property, so you'd do:
param : document.getElementById("nombre").value
Updated Answer:
Thinking this through a little more, you should probably do this in a different way altogether. You're sending the data when the user clicks on the submit button, but remember if a user hits enter while typing in the input text box the form will submit but your code will not catch that.
A more robust solution would be to do it this way instead:
<div>
<form id="nombre_search">
<input type="text" id="nombre" value="<%=searching%>"/>
<input type="submit" value="Submit"/>
</form>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#nombre_search").submit(function(){
$.get("http://localhost:8080/c/portal/json_service", {
serviceClassName: "com.liferay.test.service.TrabajadorServiceUtil",
serviceMethodName: "findByName",
servletContextName: "TrabajadorPlugin-portlet",
serviceParameters: "[param]",
param : $("#nombre").val()
});
return false;
});
});
</script>
Changes to your code:
Added an id to the form.
Made the submit button a submit button instead of just a button.
Placed code inside $(document).ready block.
Code runs when form is submitted not when button is clicked.
Hope this helps,
Sandro