Good morning,
I'm doing a basic website for the university.
I should provide a login form where the user can insert username and password... If those are correct a cookie is saved with username value; thanks to this cookie, when the user closes the session and opens again the browser to login, the username field is already there (I did this with a php script inside the form).
The only problem is that the button that should clear both the textfields in the form doesn't work.
<form name="f" action="controlAndErrorLogin.php" method="POST">
<p>Username: <input type="text" name="username" value=<?php if(isset($_COOKIE["username"])){echo "\"".$_COOKIE["username"]."\"";}else{echo "\"\"";}?>>
</p>
<p>Password: <input type="password" name="password" value=""></p>
<p>
<input type="submit" value="OK">
<input type="reset" value="PULISCI" onclick="document.getElementById('username').value = '';">
</p>
</form>
What is the problem?
Thanks
First of all, your input field is missing the id that you are trying to select it by.
Second, a reset button resets form fields to the default value they had specified in the initial HTML. You specified the user name in there, not an empty value - so that’s what the field will get reset to.
Third, .value = '' only resets the current value of the element, but not the default value. You need to set the actual defaultValue property, to achieve that.
<form name="f" action="controlAndErrorLogin.php" method="POST">
<p>Username: <input type="text" id="username" name="username" value="foo"></p>
<p>Password: <input type="password" name="password" value=""></p>
<p>
<input type="submit" value="OK">
<input type="reset" value="PULISCI"
onclick="document.getElementById('username').defaultValue = '';">
</p>
</form>
try to add attribute id="username" in the input tag with name="username"
Related
This question already has an answer here:
How to change the textbox value from checkbox
(1 answer)
Closed 6 years ago.
I have built an order form in which the user would enter in a company name, last name, email and an address and an optional checkbox for shipping priced at $19.99. I downloaded the paypal payment form module for my dreamweaver cs5 program which converts the form into a paypal form.
The nice thing about this program is that it automatically creates a mysql database with all the input fields when a person clicks the "pay now" button It also generates the files automatically in a folder called "PPPaymentForm" which i then upload in the root of my site and gives me a backend as well so i can monitor all the payment transactions.
So back to my original issue, i need some way so that if a person decides to click the checkbox which is set at $19.99, that it will automatically add to the price which is set in an hidden input named "hdwppamount" where the value is set to $175.00. So therefor if the shipping option is clicked, the person would click the "Pay Now" button and would be redirected to the paypal payment page, with the new calculated price at $194.99.
I am not proficient with javascript or php, and tried many functions myself but nothing worked. Could someone help me with this please?
Thank You
<form action="PPPaymentForm/PPPaymentForm.php" method="post" name="topchoiceform" id="topchoiceform">
<input placeholder="Company Name" type="text" name="companyname" required>
<input placeholder="First Name" type="text" name="firstname" required>
<input placeholder="Last Name" type="text" name="lastname" required>
<input placeholder="Email" type="email" name="email" required>
<input placeholder="Address" type="text" name="address" required>
<input type="checkbox" id="shipping" name='shipping' />$optional Shipping($19.99)
<button name="submit" type="submit">Pay Now</button>
<input type="hidden" name="hdwtablename" id="hdwtablename" value="1">
<input type="hidden" name="hdwppproductname" id="hdwppproductname" value="Basic 175 Plan">
<input type="hidden" name="hdwppamount" id="hdwppamount" value="175">
<input type="hidden" name="hdwppcurrency" id="hdwppcurrency" value="USD">
<input type="hidden" name="hdwpplanguage" id="hdwpplanguage" value="en_US">
<input type="hidden" name="hdwok" id="hdwok" value="">
<input type="hidden" name="hdwemail" id="hdwemail" value="email+gmail.com">
<input type="hidden" name="hdwnook" id="hdwnook" value="http://">
<input type="hidden" name="hdwactivation_email" id="hdwactivation_email" value="email">
</form>
First, we detect when the shipping checkbox is changed, then we check to see if it is in a checked state. If it is in a checked state, we add the shipping cost to the hidden text box. We also need to reset the value if the user changes their mind about shipping so you need a basic IF ELSE condition on it.
Try this:
$('#shipping').change(function(){
var hdwppamount = Number($("#hdwppamount").val())
var shippingcost = 19.99;
if (this.checked) {
$("#hdwppamount").val(hdwppamount+shippingcost)
} else {
$("#hdwppamount").val(hdwppamount-shippingcost)
}
})
JSFiddle: https://jsfiddle.net/rdawkins/8qrm3mf1/14/
I need to have a form with a button which on submit, check for required field but does not refresh the page.
<form>
<fieldset>
<input type="text" id="firstname" placeholder="First Name" required/>
<input type="submit" value="Send"/>
</fieldset>
</form>
If I disable on submit for form, it wont check for required fields anymore. I need all the functionality of onSubmit but without refreshing the page.
I will appreciate any help.
I'm unsure why you are getting an error. The code provided should work. Try adding an action and a method just in case as follows:
<form action="" method="POST" onsubmit="myFunction()">
<fieldset>
<input type="text" id="firstname" placeholder="First Name" required>
<input type="submit" value="submit">
</fieldset>
</form>
You can then add a function called myFunction down below as follows:
<script>
function myFunction() {
alert("Form was submitted");
}
</script>
I've got a problem regarding my contact form page. I did callback after clicking the submit button. I tried not to fill name textbox but form still submits.
My code:
function sendFeedback() {
alert("Thank you for the feedback :)");
}
<form>
<p class="font3">Name:</p>
<input name="name" type="text" maxlength="50" size="30" required/>
<br />
<p class="font3">Email:</p>
<input name="email" type="email" placeholder="" required/>
<br />
<p class="font3">Subject:</p>
<input name="subject" type="text" required/>
<br />
<p class="font3">Message:</p>
<textarea name="comment" row="80" cols="30" required></textarea>
<br>
<br>
<input type="submit" value="Submit" onclick="sendFeedback()">
<input type="reset" value="Reset">
</form>
You should change <form> to <form onsubmit="test()",where test() would go something like this:
test(e){
e.preventDefault();
/* do some validations here */
document.querySelector("form").submit();
}
Hope it helps
The form submitting and your alert triggering are two completely different things. The required attributes you have on the inputs are working correctly. If you leave any of the required inputs blank, the form will not submit to the server, instead you'll trigger standard error messaging in whatever browser you're using (usually a red outline and a popover).
The bit of JavaScript you have (i.e. your alert) will trigger regardless of whether the form submits successfully or not since it's executed BEFORE the submit goes through. You need to either do something like e.preventDefault() or return false at the end of your function, but that will prevent the form from being submitted altogether.
As #dvenkatsagar said, your best option is to change your onclick to onsubmit.
Is it possible to Submit a form with JAVASCRIPT? if yes please help me...
I have a form with input fileds in it. So I want javascript to count if all fields are field in and then press on the submit button.
The submit button "Save" will be hidden from visitors eyes.
<form id="my form" action="">
<input type="text" name="fname" id="fname" value=""/>
<input type="text" name="sname" id="sname" value=""/>
<input type="text" name="email" id="email" value=""/>
<button type="submit" name="submitAccount" id="submitAccount">save</button>
</form>
here is a opened FIDDLE
Thanks to all for any help!
you can submit form via JavaScript even without submit button, form element has method .submit() which submits whole form.
var myForm = document.getElementById('myform');
myForm.submit();
Before submiting form you can get values from every field in form and make you own validation.
P.S. don't use values for id attribute with whitespace, you should rename it to 'myform' or 'myForm'.
There is a required attribute
<form id="myForm" action="">
<input type="text" name="fname" id="fname" value="" required/>
<input type="text" name="sname" id="sname" value="" required/>
<input type="text" name="email" id="email" value="" required/>
<button type="button" name="submitAccount" id="submitAccount" onclick="checkForm();">save</button>
</form>
Form gets submitted only if the required fields are filled
If I have a form element as given below, then calling the form's submit will automatically generate the request body/query parameters in the url-encoded form as "username={username}&password={password}&submit=submit" where values in {} are taken from the corresponding input element's text boxes.
<form action="/action.php" method="POST">
<input id="username" type="text" />
<input id="password" type="password" />
<input type="submit" id="submit" value="submit" />
</form>
But if I am going to place my input elements in multiple levels of div's, then the form submit will fail to generate the request body/query parameters.
<form action="/action.php" method="POST">
<div id="inside_formdiv">
<div id="userdiv">
<input id="username" type="text" />
</div>
<div id="passworddiv">
<input id="password" type="password" />
</div>
<div id="submit_div">
<input type="submit" id="submit" value="submit" />
</div>
</div>
</form>
Can anyone tell me the reason why it is like that? The specification doesn't mention that the input elements should be immediate children of Form element. I was wondering a proper reason for this behavior.
The values will be populated to the elements and you can check the values also if you edit the changes as given below
<script type="text/javascript">
function logincheck() {
alert ('hi ' + document.getElementById('username').value);
alert ('hi ' + document.getElementById('password').value);
}
</script>
<form action="/action.php" method="POST">
<div id="inside_formdiv">
<div id="userdiv">
<input id="username" type="text" />
</div>
<div id="passworddiv">
<input id="password" type="password" />
</div>
<div id="submit_div">
<input type="submit" onclick="logincheck()" />
</div>
</div>
</form>
A bit more detail:
I am assuming you are using PHP for the rest of this, you can substitute any other server side language.
You are missing the name attribute on your inputs. Unless you are actually using the id attributes for something you can get rid of them. Form data is listed by the name attribute - for instance the PHP $_GET, $_POST, and $_REQUEST arrays which will be keyed by names of your inputs. No name and the data is ignored.
You can also create an array of inputs by using a pair of brackets after matching names.
Example:
<input name="answers[]" type="text" id="answer1" />
<input name="answers[]" type="text" id="answer2" />
This will create one GET/POST entry that is an array. It will have the key answers with two elements inside the array.
For checkboxes, you will only get a value in the GET/POST when they are checked. You will not get a result if it isn't checked. Important to know. If someone, for instance, turns something "off" you will need to know the list of original inputs to compare against.
The first thing I notice is that your inputs are missing the "name" attribute. It's not required by the HTML spec afaik, but I think this is why the values are not sent with the request.
<form action="/action.php" method="POST">
<div id="inside_formdiv">
<div id="userdiv">
<input id="username" name="username" type="text" />
</div>
<div id="passworddiv">
<input id="password" name="password" type="password" />
</div>
<div id="submit_div">
<input type="submit" onclick="logincheck()" />
</div>
</div>
</form>
This should do the trick
The input elements don't have to be directly inside the form element! they can be inside divs tables etc... How about trying to use names along with the ids in the text fields, like the following:
<input type="text" id="username" name="username" />
note the name="username" in the previous example -
to all input elements.