Develop Reference

JavaScript Booking System Submit Button not working

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>

required field not working inside div

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);
})

Hide pop-up when click somewhere

I have two div's, and inside this two div's i have <a href> that invoce javascript function.
My problem is, when i click somewhere outside my form should hide that hide, for the second div..this is working, but for the first isnt.
HTML that have javascript to invoce:
<div id="joinUs">
<a href="javascript:hideshow(document.getElementById('joinusLogin'))">
Join us!
</div>
<div id="invite">
<a href="javascript:hideshow(document.getElementById('inviteNowSignup'))">
<img src="/www/assets/newImages/header/Invite.png"></img>
</div>
HTML that have div's that is going to be invoced:
<div id="inviteNowSignup">
<div id="backgroundSignup"></div>
</a>
<form id="signupForm">
<input id="signupFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="signupFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="signupFormFields" type="text" name="subject" placeholder=" User Name"><br />
<input id="submitSignup" type="submit" value="SIGN UP">
</form>
<div id="alreadyMember">
Already a member? Log in here.
</div>
</div>
<div id="joinusLogin">
<div id="backgroundJoinus"></div>
</a>
<form id="loginForm">
<input id="loginFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="loginFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="submitLogin" type="submit" value="LOG IN">
</form>
<div id="signupNow">
Don't have an account yet? Sign up here.
</div>
</div>
Here's my Javascript function:
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
Can anyone help me solve this problem?

the simplest way to do that
add event to the body on click hide all pop-ups
$('body').click(function(){
$('your-pop-up').hide();
});
then add stopPropagation() to this pop-ups to prevent hide when click inside it.
$('your-pop-up').click(function(e){
e.stopPropagation();
});
Now if you press any where outside your pop-ups thy will hide

Try to Use Color Box Plugin from Link
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Pop Up</title>
<style>
#joinUs{cursor:pointer; color:#0066CC}
#invite{cursor:pointer; color:#0066CC}
</style>
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$("#joinUs").colorbox({inline:true, width:"50%", href:"#joinusLogin"});
$("#invite").colorbox({inline:true, width:"50%", href:"#inviteNowSignup"});
});
</script>
</head>
<body>
<div id="joinUs">Join us!</div>
<div id="invite">Invite Now</div>
<div style='display:none'>
<div id="inviteNowSignup">
<div id="backgroundSignup"></div>
</a>
<form id="signupForm">
<input id="signupFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="signupFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="signupFormFields" type="text" name="subject" placeholder=" User Name"><br />
<input id="submitSignup" type="submit" value="SIGN UP">
</form>
<div id="alreadyMember">
Already a member? Log in here.
</div>
</div>
</div>
<div style='display:none'>
<div id="joinusLogin">
<div id="backgroundJoinus"></div>
</a>
<form id="loginForm">
<input id="loginFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="loginFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="submitLogin" type="submit" value="LOG IN">
</form>
<div id="signupNow">
Don't have an account yet? Sign up here.
</div>
</div>
</div>
</body>
</html>

text message displays when you click on a button

I have code that creates a form and when you click on submit it should output the text on the screen. However my code doesn't display the message on the screen, although it quickly shows the text and then hide it.
<div id="form-wrap">
<form>
<fieldset>
<h4>Contact Form:</h4>
<label class="labelone" for="name">Name: </label>
<input name="name"/>
<label for="email">Email: </label>
<input name="email" />
<label for="comments">Comments: </label>
<textarea name="comments"></textarea>
</fieldset>
<fieldset>
<input class= "btn" type="submit" value="Send Email" onclick="myFunction()"/>
<input class="btn" type="reset" value="Reset Form"/>
</fieldset>
</form>
<p id="jomin">This is a message</p>
</div>
STYLE
<style type="text/css">
#jomin { visibility:hidden;
}
</style>
JAVASCRIPT
<script type="text/javascript">
function myFunction() {
document.getElementById("jomin").style.visibility="visible";
}
</script>

You're not seeing the change because the form is being submitting and the page is reloading.
Change:
<input class= "btn" type="submit" value="Send Email" onclick="myFunction()"/>
to
<input class= "btn" type="submit" value="Send Email" onclick="return myFunction()"/>
And also change
function myFunction() {
document.getElementById("jomin").style.visibility="visible";
}
to
function myFunction() {
document.getElementById("jomin").style.visibility="visible";
return false;
}
jsFiddle example

TinyBox how get passing value from parent pages

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>