i am new in php.I am trying to send a html registration page in php and want it,s response in another handler.php.But when i lick submit button it is not moving or refreshing
**Registration.html**
<html >
<form action="handler.php" method="post" >
<label>First Name</label>
<input type="text" name="firstname" id="firstname" value="" /> <br/><br/>
<label >Last Name</label>
<input type="text" name="lastname" id="lastname" value=""/> <br/><br/>
<input name="Submit" type="button" value="Submit Details" />
</form>
</html>
**handler.php**
<?php
$FirstName=$_REQUEST['firstname'];
$LastName=$_REQUEST['lastname'];
echo 'welcome'.$FirstName;
?>
Change this line
<input name="Submit" type="button" value="Submit Details" />
To
<input name="Submit" type="submit" value="Submit Details" />
Adding Javascript function
<input name="Submit" type="button" value="Submit Details" onclick="submitfunction();"/>
<script type="text/javascript">
function submitfunction()
{
document.getElementById("YOURFORMID").submit();
}
</script>
Related
I have two forms .. each form has a reser button with the id called "formReset"
no all the form are showing in the same time, one shows after the other one
I used the below code but it only works on the first form, I can o it by doing two click buttons with different id's but is there a way to do it with one click only?
document.getElementById("formReset").addEventListener("click",resetForm);
function resetForm(){
document.getElementById("login").reset();
document.getElementById("cal").reset();
}
<form id="login">
<label>Enter your name : <span id="nameMsg"></span></label><br>
<input type="text" id="name"><br>
<input type="submit" id="submit" value="submit" >
<input type="button" id="formReset" value="reset" ><br>
</form>
<form id="cal">
<input type="number" id="answer" ><br><br>
<input type="button" id="submit2" value="submit2" >
<input type="button" id="formReset" value="reset" >
</form>
try this
document.querySelectorAll(".formReset").forEach(btn=>{
btn.addEventListener("click",resetForm)
});
function resetForm(e){
e.target.parentElement.reset()
}
<form id="login">
<label>Enter your name : <span id="nameMsg"></span></label><br>
<input type="text" id="name"><br>
<input type="submit" id="submit" value="submit" >
<input type="button" class="formReset" value="reset" ><br>
</form>
<form id="cal">
<input type="number" id="answer" ><br><br>
<input type="button" id="submit2" value="submit2" >
<input type="button" class="formReset" value="reset" >
</form>
Attribute id should be unique in a document, use class instead with querySelectorAll() and forEach() like the following way:
document.querySelectorAll(".formReset").forEach(function(reset){
reset.addEventListener("click",resetForm);
});
function resetForm(){
document.getElementById("login").reset();
document.getElementById("cal").reset();
}
<form id="login">
<label>Enter your name : <span id="nameMsg"></span></label><br>
<input type="text" id="name"><br>
<input type="submit" id="submit" value="submit" >
<input type="button" class="formReset" value="reset" ><br>
</form>
<form id="cal">
<input type="number" id="answer" ><br><br>
<input type="button" id="submit2" value="submit2" >
<input type="button" class="formReset" value="reset" >
</form>
easy way using closest.
document.querySelectorAll(".formReset").forEach(btn=>{
btn.addEventListener("click",resetForm)
});
function resetForm(e){
e.target.closest('form').reset()
}
<form id="login">
<label>Enter your name : <span id="nameMsg"></span></label><br>
<input type="text" id="name"><br>
<input type="submit" id="submit" value="submit" >
<input type="button" class="formReset" value="reset" ><br>
</form>
<form id="cal">
<input type="number" id="answer" ><br><br>
<input type="button" id="submit2" value="submit2" >
<input type="button" class="formReset" value="reset" >
</form>
You should add click listeners for each reset button, then reset parent by click
.html
<form id="login">
<label>Enter your name : <span id="nameMsg"></span></label><br>
<input type="text" id="name"><br>
<input type="submit" id="submit" value="submit">
<input type="button" class="formReset" value="reset"><br>
</form>
<form id="cal">
<input type="number" id="answer"><br><br>
<input type="button" id="submit2" value="submit2">
<input type="button" class="formReset" value="reset">
</form>
.js
document.querySelectorAll(".formReset").forEach((e) => {
e.addEventListener("click", () => {
document.querySelectorAll("form").forEach((f) => {
f.reset();
})
});
});
I have multiple forms on one page with same structure.
They all have a file input field that has 'onchange' event, which removes the 'disabled' attribute from my submit button when a file is chosen.
The problem is, my function only works for the first element with that class name. How can I make it work for every item with that class?
index.php:
<form class="form">
<input type="file" name="image" onchange="unlock();">
<input type="text" name="title" placeholder="Image title"/>
<input type="submit" value="Add image" class="submit" disabled/>
</form>
<form class="form">
<input type="file" name="image" onchange="unlock();">
<input type="text" name="title" placeholder="Image title"/>
<input type="submit" value="Add image" class="submit" disabled/>
</form>
scripts.js:
function unlock() {
document.querySelector('.submit').removeAttribute("disabled");
}
Any help is appreciated!
Use eventListener
address relatively using selectors
make it a habit to never call anything submit in a form
document.querySelectorAll("[name=image]").forEach(
ele => ele.addEventListener("change",
(e) => e.target.closest(".form").querySelector(".sub").disabled = false
)
);
<form class="form">
<input type="file" name="image">
<input type="text" name="title" placeholder="Image title" />
<input type="submit" value="Add image" class="sub" disabled/>
</form>
<form class="form">
<input type="file" name="image">
<input type="text" name="title" placeholder="Image title" />
<input type="submit" value="Add image" class="sub" disabled/>
</form>
More compatible version
[...document.querySelectorAll("[name=image]")].forEach(function(ele) {
ele.addEventListener("change",
function(e) {
e.target.parentNode.querySelector(".sub").disabled = false;
})
});
<form class="form">
<input type="file" name="image">
<input type="text" name="title" placeholder="Image title" />
<input type="submit" value="Add image" class="sub" disabled/>
</form>
<form class="form">
<input type="file" name="image">
<input type="text" name="title" placeholder="Image title" />
<input type="submit" value="Add image" class="sub" disabled/>
</form>
Give ID's to all submit buttons and pass the respective ID's in unlock() function.
This removes the disabled from the submit
function unlock(form_id) {
document.getElementById(form_id).removeAttribute("disabled");
}
<form class="form">
<input type="file" name="image" onchange="unlock('form1');">
<input type="text" name="title" placeholder="Image title" />
<input type="submit" id="form1" value="Add image" class="submit" disabled/>
</form>
<form class="form">
<input type="file" name="image" onchange="unlock('form2');">
<input type="text" name="title" placeholder="Image title" />
<input type="submit" id="form2" value="Add image" class="submit" disabled/>
</form>
I have HTML code which displays a pre-compiled login form. Is it possible to improve this code in order to make the login automatic, so it autofills the user information (name, password)?
<html><body>
<form
id="myForm"
action="http://***.***.***.***/***/****/*******="
method="post">
Account name:<br>
<input name="****" value="****" />
<br>
Password:<br>
<input type="password" name="pwd" value="****" />
<br><br>
<input type="submit" value="Login">
</form>
</body></html>
What you can do is use JavaScript:
function login() {
document.getElementById("username").value = "username";
document.getElementById("password").value = "password";
}
<html><body>
<form id="myForm" action="http://***.***.***.***/***/****/*******=" method="post">
Account name:<br>
<input name="****" value="****" id="username" />
<br>
Password:<br>
<input type="password" name="pwd" value="****" id="password"/>
<br><br>
<input type="submit" value="Login" onclick="login()" />
</form>
</body></html>
you can also use the jQuery submit event for your form. In your javascript use:
$(document).ready(function(){
$("#myForm").submit();
});
Of course, just click on the button on load:
<html><body onload="document.getElementById('login').click();">
<form
id="myForm"
action="http://***.***.***.***/***/****/*******="
method="post">
Account name:<br>
<input name="****" value="****" />
<br>
Password:<br>
<input type="password" name="pwd" value="****" />
<br><br>
<input type="submit" value="Login" id="login">
</form>
</body></html>
I have made form and it is hidden using CSS display property. I have button. I want to show the form when I click that button. I have done everything from my end but still form does not show up.
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Below is my JS function which is not trigerring.
$("button").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});
The function showLoginForm() is not defined. Your jquery was listening for a button click, when your button is of type input.
$("input[type=button]").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" />
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Or with the function defined:
function showLoginForm(){
$("#loginForm").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Your issue is that your input is type button, not a button element itself.
so either changing your input to a button or changing your jquery binding to $('input[type=button]') ought to work
http://jsfiddle.net/4Lz5rsq3/
I have multiple forms in same page with submit , i want to hide the form after form submit and display a link for the respective forms
Below is the html i have the same class name for all the forms
and for the submit class also.
<div id="wpcf7-f63-p1-o1">
<form name="" class="wpcf7-form" action="" method = "post">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</form>
</div>
<div id="wpcf7-f63-p1-o2">
<form name="" class="" action="" method = "post">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</form>
</div>
i tried the below code
<script>
jQuery(".wpcf7-form").submit(function()
{
jQuery("^wpcf7-f63-p1-").hide();
});
</script>';
In your example typed:
jQuery("^wpcf7-f63-p1-").hide();
i think should be:
jQuery("#wpcf7-f63-p1-o1").hide();
Use this on form submit
$('input[type="submit"]').click(function() {
$form = $(this).parent();
$('<p>link to form</p>').insertBefore($form);
$form.hide();
});
Are you looking for jquery .find() ?
you could do something like this:
$('form').submit(function(){
$(this).find('.myForm').hide();
$(this).find('.link').show();
}
.link {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="" class="" action="" method = "post">
<div class="myForm">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</div>
<a class="link" href="#">Link</a>
</form>
ah error on your jquery selector, change your js to:
jQuery(".wpcf7-form").submit(function()
{
jQuery("[id^='wpcf7-f63-p1-']").hide()
return false;
});
working jsfiddle code
NB. you may need to delete the return false, I added it to see the elements getting disappeared after submit.