0
У меня есть функция, выполняющая ее задачу, но затем весь сайт просто обновляется после его завершения. Тем не менее, программа должна продолжаться после завершения программы. Может кто-то, пожалуйста, помогите мне исправить код, чтобы я мог добавить левую точку, правую точку и все остальные точки.После завершения функции JavaScript сайт перезагружается
<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
\t <title>Path It Your Way: Creating Buildings</title>
\t <link href="css/bootstrap.css" rel='stylesheet' type='text/css'/>
\t <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
\t <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
\t <link href='http://fonts.googleapis.com/css?family=Raleway:400,100,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
\t <meta name="viewport" content="width=device-width, initial-scale=1">
\t <meta name="keywords" content="Seven Theme Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
\t Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
\t <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
\t <script src="js/jquery.min.js"></script>
<!---- start-smoth-scrolling---->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- <script>
// $(document).ready(function(){
// $("#buildingNameSubmit").click(function(){
// $("#room").fadeIn("slow");
// $("#building").fadeOut();
// });
// });
</script> -->
\t <!---- start-smoth-scrolling---->
</head>
<body>
<!--body-->
<div id="home" class="top-header"> \t
<div class="container">
\t \t <div class="logo">
\t \t \t <a href="index.html"><img src="images/rsz_banner.png" alt="" /></a>
\t \t </div> \t \t \t
\t \t <div class="top-menu">
\t \t \t <span class="menu"></span> \t \t \t \t \t
\t \t \t <ul>
\t \t \t \t <li class="active"><a href="enterdata.html">ENTER BUILDING</a></li>
\t \t \t \t <li><a class="scroll" href="about.html">ABOUT</a></li>
\t \t \t \t <li><a class="scroll" href="navigate.html">NAVIGATE BUILDING</a></li>
\t \t \t </ul> \t \t \t \t \t
\t \t </div> \t
\t \t <div class="clearfix"> </div> \t
\t \t <!-- script-for-menu -->
\t \t <script>
\t \t \t \t $("span.menu").click(function(){
\t \t \t \t \t $(".top-menu ul").slideToggle("slow" , function(){
\t \t \t \t \t });
\t \t \t \t });
\t \t </script>
\t \t <!-- script-for-menu -->
\t \t
\t </div>
</div>
<!--banner/-->
<div class="single">
\t <div class="container">
\t \t <h2>Creating Navigation Data</h2>
\t \t <div class="single-section">
\t \t \t <div class="single-pic">
\t \t \t \t <img src="images/keyboard.jpg" alt="Source: http://www.p-s.co.nz/images/keyboard.jpg"/>
\t \t \t </div>
\t <div class="content-form">
\t \t <form name="coordinatesSubmit"> \t \t \t
\t \t \t <div id="buildingDiv"> \t \t \t
\t \t <h3>How to Enter a Building</h3>
\t \t <p>In the following text input, please type the name of the building you are creating a navagation system for. After you type in the name of the building, please click the Submit Building Name button.</p>
\t \t \t \t <h3>Enter Building Name</h3>
\t \t \t \t <div class="row">
\t \t \t \t \t <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
\t \t \t \t \t <input type="text" id="buildingName" class="form-control bubbleInfo2" placeholder="Building Name" />
\t \t \t \t \t </div>
\t \t \t \t \t <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
\t \t \t \t \t <center><input type="button" class="buttonForm" id="buildingNameSubmit" onClick="buildStart()" value="Submit Building Name"/>
\t \t \t \t \t </div> \t \t \t \t \t
\t \t \t \t </div>
</div>
\t \t \t <div id="roomDiv"> \t \t \t
\t \t \t <h3>How to Enter a Room</h3>
\t \t <p>In the form below, please click if your room has corners or not. If your room does not have corners, please select the Rounded Room button. If you did not click Rounded Room, please start with the first point, which you should start by clicking first point on the left side of your door and continue by clicking next point on the right side of the door. Continue clicking next point for every corner in the room in clockwise direction. However if your room is a circle, please click first point at the left side of the door and then click next point at the right side of the door and submit the room. Everytime you click submit room, please MAKE SURE you enter a room name!!</p>
\t \t <br>
\t \t <br>
\t \t \t <h3>Enter Room</h3> \t
\t \t <select id="selectOpt" onChange="wValue(this.value)">
<option disabled selected>Please Choose</option>
<option value="1">Cornered Room</option>
<option value="2">Rounded Room</option>
</select>
\t \t \t <div id="buttons" class="row">
\t \t \t \t <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" id="leftButton">
\t \t \t \t <button id="whichButtonLeft" onClick="wPoint('left')" class="btn btn-inverse bubbleInfo">Left Side of Door</button>
\t \t \t \t </div>
\t \t \t \t <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" id="rightButton">
\t \t \t \t <button id="whichButtonRight" onClick="wPoint('right')" class="btn btn-inverse bubbleInfo">Right Side of Door</button>
\t \t \t \t </div> \t \t \t \t \t \t
\t \t \t \t <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" id="pointButton">
\t \t \t \t <button id="whichButtonPoint" onClick="wPoint()" class="btn btn-inverse bubbleInfo">Add Point</button>
\t \t \t \t </div> \t \t \t \t \t \t \t \t \t \t \t \t
\t \t \t \t \t <br> \t \t
\t \t \t \t \t <br>
\t \t \t </div>
\t \t \t <div class="row">
\t \t \t \t <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
\t \t \t \t <input type="text" id="roomName" class="form-control bubbleInfo2" placeholder="Room Name" />
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="row">
\t \t \t \t <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
\t \t \t \t \t <center><input type="button" id="roomSubmit" class="buttonForm" onClick="submit()" value="Submit Room"/>
\t \t \t \t </div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
\t \t \t \t \t <center><input type="button" id="roomSubmit" class="buttonForm" onClick="submit()" value="Submit Room & Add New Room"/>
\t \t \t \t </div> \t \t \t \t \t \t
\t \t \t </div>
\t \t \t \t \t <br>
\t \t \t \t \t <br>
\t \t \t \t \t <br>
\t \t \t \t </div>
\t \t </form>
\t \t </div>
\t </div>
</div>
</div>
<script>
$(document).ready(function() {
$('#roomDiv').hide();
$('#buildingNameSubmit').click(function() {
$('#roomDiv').show();
$('#buildingDiv').hide();
});
});
</script>
<script>
$(document).ready(function() {
$('#buttons').hide();
$('#selectOpt').change(function() {
$('#buttons').show();
$('#selectOpt').hide();
});
});
</script>
<script>
$(document).ready(function() {
$('#whichButtonRight').hide();
$('#whichButtonPoint').hide();
$('#whichButtonLeft').click(function() {
$('#whichButtonRight').show();
$('#whichButtonLeft').hide();
});
$('#whichButtonRight').click(function() {
$('#whichButtonPoint').show();
$('#whichButtonRight').hide();
});
});
</script>
<script>
var serial;
var turn = 0;
// Serial Script
function buildStart() {
navigator.geolocation.getCurrentPosition(success, error, options);
}
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
function success(pos) {
var crd = pos.coords;
var d = new Date();
var n = d.getTime();
// serial is 17 digits long
serial = crd.latitude.toString().substring(4, 6) + "" + crd.longitude.toString().substring(4, 6) + "" + n;
buildingSubmit();
};
function error(err) {
alert('ERROR(' + err.code + '): ' + err.message);
};
// Serial Finished
var str = "";
// Building Name and Serial Concat
function buildingSubmit() {
str = serial + ">" + document.getElementById('buildingName').value;
alert(str);
// document.getElementById('roomDiv').style.visibility = 'visible';
// document.getElementById('buildingDiv').style.visibility = 'hidden';
}
// Building Name Finished
// Type of Room
function wValue(value) {
if (value == 1) {
str = str + "#" + "norm";
} else {
str = str + "#" + "round";
}
}
// Room Type Finished
var temp = "";
var times = 0;
//Add Point to Room
function wPoint(buttonNum) {
if (buttonNum == "left") {
alert(buttonNum);
str = str + "doorLeft";
addCoordinates();
times = times + 1;
alert(str);
document.getElementById('whichButtonLeft').style.visibility = 'hidden';
if (times == 2) {
document.getElementById('whichButtonPoint').style.visibility = 'visible';
}
} else if (buttonNum == "right") {
alert(buttonNum);
str = str + "doorRight";
times = times + 1;
document.getElementById('whichButtonRight').style.visibility = 'hidden';
if (times == 2) {
document.getElementById('whichButtonPoint').style.visibility = 'visible';
}
} else {
}
}
function addCoordinates() {
alert("working");
getLocation();
}
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var alt = position.coords.altitude;
temp = lat + "/" + lon + "/" + alt;
playCoordinates();
}
function playCoordinates() {
alert(temp);
str = str + temp;
alert(str);
}
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("Geolocation is not supported by this browser.");
}
}
</script>
</body>
</html>
Почему у вас так много 'document.ready()' определений? Разве ты не можешь их развязать? Я думаю, вы просто нажимаете кнопку, которая отправляет форму, которая, естественно, обновит страницу. Если вы не хотите обновлять свою страницу, но все равно нужно отправить некоторые данные на сервер, вы можете запустить вызов Ajax нажатием этой кнопки – Arkantos
Мне нужно иметь четыре разных значения в форме в разное время, чтобы отправить форма. –
Но эти обратные вызовы document.ready() вызываются один за другим только в том порядке, который вы определили на своей странице, они не делают ничего особенного, поэтому я думаю, что вы можете просто соединить их всех с одной функцией – Arkantos