We are making a booking system. All the information that the user types will be saved in a file. Everything works beside the submit button...
<input
type="text"
name="SocialUsername"
id="Username"
placeholder="Username I can contact you on"
/>
<div>
<input
type="button"
id="submitbtn"
value="Book"
onclick="saveFile()"
/>
</div>
type attribute in input tag should be set as "submit"
<input
type="text"
name="SocialUsername"
id="Username"
placeholder="Username I can contact you on"
/>
<div>
<input
type="submit"
id="submitbtn"
value="Book"
onclick="saveFile()"
/>
</div>
</div>
Or you could even go for button tags
<input
type="text"
name="SocialUsername"
id="Username"
placeholder="Username I can contact you on"
/>
<div>
<button type="submit" id="submitbtn" value="Book" onclick="saveFile()">Submit</button>
</div>
</div>
Related
I Am trying to implement default required field into HTML5 form but it is not working if I have it inside a div.
Not working code:
<form>
<div class="form-phone">
<label for="phone" id="lphone">Phone no:</label><br>
<input type="number" id="phone" name="phone" placeholder="Phone-Number" required/><br>
</div>
<div id="confirmDetails">
<input id="submitbtn" type="submit" value="Call Me!" />
</div>
</form>
Working code:
$('#confirmDetails').on('click', 'input', function(e) {
alert(test);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="form-phone">
<label for="phone" id="lphone">Phone no:</label><br>
<input type="number" id="phone" name="phone" placeholder="Phone-Number" required/><br>
</div>
<input id="submitbtn" type="submit" value="Call Me!" />
</form>
Add an id to the form:
<form id="myForm">
<div class="form-phone">
<label for="phone" id="lphone">Phone no:</label><br>
<input type="number" id="phone" name="phone" placeholder="Phone-Number" required/><br>
</div>
<div id="confirmDetails">
<input id="submitbtn" type="submit" value="Call Me!" />
</div>
</form>
And listen for the event "submit" of the form:
$('#myForm').on('submit',function (e) {
alert(test);
})
This way you leave the navigator to make the validation. And don't forget to add validation on the server side
Hope this helps
You have wrong logic with js.
Add click event to the submit button, not the div
use this
$('#submitbtn').on('click', 'input',function (e) {
alert(test);
})
I'm trying to create 2 form stacking in 1 php code.
But the form cannot submit at all. It just sit there without passing this form to action="..."
Here the coding for first form (Registration)
<form id="RegForm" class="form" action="PHP/Enter_New.php" method="post">
<!-- Progress Bar -->
<ul id="ProgressBar">
<li class="active">Access Code</li>
<li>Account Setup</li>
<li>User Agreement</li>
</ul>
<!-- Fieldsets -->
<fieldset>
<h2 class="fs-title">Are you lost?</h2>
<h3 class="fs-subtitle">Get your access code before enter!!</h3>
<input type="text" name="invite" class="invite field" placeholder="Access Code" onkeyup="checkAvAccess()" autocomplete='off' required />
<br />
<img src="/Images/Gif/Checking.gif" id="loaderIcon-access" style="display:none" />
<span id="availability-status-access"></span>
<br />
<input type="button" name="login" class="action-button" id="toLog" value="Login" />
<input type="button" name="next" class="next action-button" id="access" value="Next" disabled="disabled" />
</fieldset>
<fieldset>
<h2 class="title">Account setup</h2>
<h3 class="subtitle">Login information</h3>
<input type="text" name="username" class="username field" id="regUsername" placeholder="Username" onkeyup="checkAvReg()" autocomplete='off' />
<img src="/Images/Gif/Checking.gif" id="loaderIcon-reg" style="display:none" />
<span id="availability-status-reg"></span>
<input type="password" name="password" class="password field" id="password" placeholder="Password" required />
<div class="pwstrength_viewport_progress"></div>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" id="logInfo" value="Next" disabled="disabled" />
</fieldset>
<fieldset>
<h2 class="fs-title">User Agreement</h2>
<h3 class="fs-subtitle">By signup at our website... </h3>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" id="subRegister" value="Submit" disabled="disabled"/>
</fieldset>
After registration form closing, there's no other code there.. The next code after that login code
<form id="LoginForm" class="form" name="login" action="PHP/Redirrect_to.php" method="post">
<fieldset>
<h2 class="fs-title">Enter Website</h2>
<h3 class="fs-subtitle">Please login to continue!!</h3>
<input type="text" name="username" class="username field" id="login" placeholder="Username" onkeyup="checkAvLogin()" autocomplete='off' required />
<img src="/Images/Gif/Checking.gif" id="loaderIcon-login" style="display:none">
<span id="availability-status-login"></span>
<input type="password" name="password" class="password field" placeholder="Password" required />
<div class="pwstrength_viewport_progress"></div>
<input type="button" name="register" class="action-button" id="toReg" value="Register" />
<input type="submit" name="submit" class="submit action-button" id="subLogin" value="Submit" formaction="PHP/Redirrect_to.php" formmethod="post" disabled="disabled" />
</fieldset>
note that Disable on submit input will be remove by js after onkeyup=".." value = true
The where you will see there's many next and previous because i'm using multistep form basic. Here the original code. I have remove return false value from js
Never name your submit button "submit"
<input type="submit" name="submit" ... /> <-- bad name
<input type="submit" name="anyNameButSubmit" ... /> <-- good name
Form submit button will not submit when name of button is "submit"
I am developing Universal windows 8.1 app and I have a page for creating new contact.
In purpose to validate input fields I put them in form. My form action not supposed to go to service it just need to validate fields and call custom function.
HTML:
<form name="myform" onSubmit="JavaScript:OnSubmitForm()">
<div>
<label>
First name<br />
<input id="contactFirstName" class="win-textbox" type="text" name="firstName" required />
</label>
</div>
<div>
<label>
Last name<br />
<input id="contactLastName" class="win-textbox" type="text" name="lastName" />
</label>
</div>
<input type="submit" value="Submit"/>
<input type="button" value="Cancel"/>
</form>
JavaScript:
document.addEventListener('DOMContentLoaded', function() {
function OnSubmitForm()
{
alert('click');
}
});
My alert is never calls in plain HTML project neither in WinJS app. I also tried with:
<form name="myform" onsubmit="return OnSubmitForm();">
and the same.
Does it a good approach at all, to use form just for input fields validation or there is better way, and why this does not work ?
Inline event-binding expects functions to be under global-scope and that is one of the reason one should not use it!
In your example, OnSubmitForm is under the local scope of DOMContentLoaded handler. Best approach would be to use addEventListener and with the current code, place OnSubmitForm out of DOMContentLoaded.
document.getElementById('myform').addEventListener('submit', function(e) {
e.preventDefault(); //to prevent form submission
alert('click');
});
<form name="myform" id='myform'>
<div>
<label>
First name
<br />
<input id="contactFirstName" class="win-textbox" type="text" name="firstName" required />
</label>
</div>
<div>
<label>
Last name
<br />
<input id="contactLastName" class="win-textbox" type="text" name="lastName" />
</label>
</div>
<input type="submit" value="Submit" />
<input type="button" value="Cancel" />
</form>
With current approach:
function OnSubmitForm() {
alert('click');
}
<form name="myform" onSubmit="JavaScript:OnSubmitForm()">
<div>
<label>
First name
<br />
<input id="contactFirstName" class="win-textbox" type="text" name="firstName" required />
</label>
</div>
<div>
<label>
Last name
<br />
<input id="contactLastName" class="win-textbox" type="text" name="lastName" />
</label>
</div>
<input type="submit" value="Submit" />
<input type="button" value="Cancel" />
</form>
Have you tried parsley.js?
I created this fiddle to show you a quick example.
<form name="myform">
<div>
<label>
First name<br />
<input id="contactFirstName" data-parsley-required-message="First name required" class="win-textbox" type="text" name="firstName" required data-parsley-trigger="change focusout" data-parsley-pattern="/^[a-zA-Z]*$/"/>
</label>
</div>
<div>
<label>
Last name<br />
<input id="contactLastName" class="win-textbox" type="text" name="lastName" />
</label>
</div>
<input type="submit" value="Submit"/>
<input type="button" value="Cancel"/>
<script src="http://parsleyjs.org/dist/parsley.js"></script>
<script>
window.ParsleyConfig = {
errorsWrapper: '<div></div>',
errorTemplate: '<div class="alert alert-danger parsley" role="alert"></div>',
errorClass: 'has-error',
successClass: 'has-success'
};
</script>
Recently I have faced a problem which do not know how to pass value from parent page to a tinybox. The following is my source code; is there any idea can help me to achieve this? A edit.php wrap inside a tinybox so when I click on a specific column suppose the value should pass to the edit.php (tinybox) and also the value will display on the textfield, but it just simply doesn't work. I am new in PHP would appreciate for some one pointing me to good solution.
parent page.php
display_cell6.appendChild(edit).innerHTML='<img id="edit" alt="Edit" class="'+obj[idx].id+'" onclick="TINY.box.show({iframe:\'ajaxEditUserDetail.php\',boxid:\'frameless\',width:400,height:280,openjs:function(){openJS(this.id)}}); title="Edit" src="images/edit.png"></img>';
function openJS(id){
var id=parent.document.getElementById(id);
alert(id);
}
edit.php
<div id="banner">
<span>Edit Customer Information</span>
</div>
<div id="form_container">
<fieldset>
<div class="box-form">
<form action="send.php" method="POST" id="userDetail" >
<fieldset>
<div>
<label for="name_Req">Name <strong>*</strong></label>
<input type="text" id="name_Req" name="name" value="test"
title="Required! Please enter your name" />
</div>
<div>
<label for="contact_Req_Email">E-mail <strong>*</strong></label>
<input type="text" id="contact_Req_Email" name="email"
title="Required! Please enter a valid email address" />
</div>
<div>
<label for="telephone_Tel">Telephone</label>
<input type="text" id="telephone_Tel" name="telephone"
title="Please enter a valid telephone number" />
</div>
<div>
<label for="address">Address</label>
<input type="text" id="address" name="address" title="Please enter a
valid address" />
</div>
<div>
<input type="submit" value="Save" id="sub" class="button" />
</div>
</fieldset>
</form>
</div>
</fieldset>
</div>
i have a css popup div that when it loads through the onClick it also brings up a blanket of transparency kind of like how Facebook does when you look at photos
How do i get that popup div to close when i click on the blanket?
Heres the code
'
<center><div id="blanket" style="display:none;">
</div>
<table width="1000" border="0">
<tr>
<td>
<div id="mainAdminCP">
<div class="editRecipe" >
<h2>Edit Recipe</h2>
</div>
<div id="popUpAdminEditRecipe" style="display:none;" align="center">
<br />
<br />
<form id="editRecipe">
<fieldset id="inputs">
<input id="username" type="text" placeholder="Please insert the name of the recipe" autofocus required>
<br />
<br />
<input id="add" type="text" placeholder="Recipe Name" required>
<input id="add" type="text" placeholder="Recipe Ingredients" required>
<input id="add" type="text" placeholder="Recipe Instructions" required>
<input id="add" type="text" placeholder="Recipe Image" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" value="Save Changes">
<input type="submit" id="submit" onClick="popup('popUpAdminEditRecipe')" value="Close">
</fieldset>
</form>
</div>
<div class="editCoins">
<h2>Edit Coins</h2>
</div>
<div id="popUpAdminEditCoins" style="display:none;" align="center">
<br />
<br />
<form id="login">
<fieldset id="inputs">
<input id="username" type="text" placeholder="Please insert the Username of the User" autofocus required>
<input id="add" type="text" placeholder="Add Coins" required>
<input id="add" type="text" placeholder="Subtract Coins" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" value="Submit">
<input type="submit" id="submit" onClick="popup('popUpAdminEditCoins')" value="Close">
</fieldset>
'
And heres the link to the page itself to get a clear example of what im looking for.
http://teknologenie.com/fruitforest/admincp.php
Ive tried placing the
<a href="#" onClick="popup('popUpAdminEditUser')" > </a>
Within the blanket div, and nothing. Just kind of screws everything up.
Edit:
Also if you visit the link, and click the text, the whole div doesnt get directly in the middle of the screen and i need it to be. Any solutions?
Instead of putting an link inside the blanket div, pup an onclick function on the blanket div itself:
<div id="blanket" onclick="closePopup()" style="height: 681px; display: block;"></div>
The function closePopup should then set display none to the popup and the blanket:
function closePopup() {
document.getElementById('blanket').style.display = 'none';
document.getElementById('popUpAdminEditCoins').style.display = 'none';
}
I've written you an example here: http://jsfiddle.net/KXK6E/2/
You'd be much better off binding events within the javascript rather than within the HTML.
document.getElementById("blanket").onclick = function(e){
document.getElementById("popup").style.display = "none";
e.target.style.display = "none";
};
document.getElementById("trigger").onclick = function(){
document.getElementById("blanket").style.display = "block";
document.getElementById("popup").style.display = "block";
}