I am trying to make my website first ask Simple data and than continue loading the page, but I can't figure it out.(so first ask data and than print PRINT THIS AFTER)
this is what I have now:
<html>
<h1>PRINT THIS BEFORE</h1>
<form id="login">
name: <input id="name" type="text">
password: <input id="password" type="password">
<input value="log-in" type="button" onclick="sendIt()">
</form>
<script>
var send = false;
function sendIt() {
send = true;
}
var i = setInterval(function(){
console.log("f")
if(send) {
document.getElementById("login").remove();
clearInterval(i)
}
}, 100);
</script>
<h1>PRINT THIS AFTER</h1>
please help me
-------------EDIT----------------
I decided to use innerHTML to edit the html in a div with the id edit so it wont load the html yet
Code:
<html>
<h1>PRINT THIS BEFORE</h1>
<form id="login">
name: <input id="name" type="text">
password: <input id="password" type="password">
<input value="log-in" type="button" onclick="sendIt()">
</form>
<script>
var send = false;
function sendIt() {
send = true;
}
var i = setInterval(function(){
console.log("f")
if(send) {
document.getElementById("login").remove();
document.getElementById("edit").innerHTML = "<h1>PRINT THIS AFTER</h1>";
clearInterval(i)
}
}, 100);
</script>
<div id="edit">
</div>
I've read the other replies here and your comments. As others here suggested, the easiest way to do this would be to either hide the H1 or put the H1 in a hidden div, and you can then show that div via your "sendIt" function with Javascript if the login was successful. For what it's worth, you can't "pause" a site from loading content. Anything embedded in the HTML is going to load regardless of what Javascript is doing.
If hiding the content is not good enough (maybe for security reasons, you don't want to show someone content unless they are signed in, as hiding it would still let them view the source), there's only two other ways to do this. The first is server side programming. Post to the same page and if the login conditions exist, show the content instead of the login form.
The second method you can use an AJAX request. If the login is successful, you can dynamically load content from another web page on your server that contains the content you want to show. Note, the page you are dynamically loading should have some type of security (like server side programming) that validates if the person is logged in, otherwise you're back in the same hole, same goes for the server side method. If the content or AJAX page isn't validated in some way, they will find a way to view it anyway.
This problem is a little steeper than what you are asking us, but there are plenty of tutorials out there on a simple AJAX request or using server side programming languages like PHP. Now that you have an idea of how to do this, you can start experimenting.
<html>
<h1>PRINT THIS BEFORE</h1>
<form id="login">
name: <input id="name" type="text">
password: <input id="password" type="password">
<input value="log-in" type="button" onclick="sendIt()">
</form>
<script>
var send = false;
function sendIt() {
send = true;
}
var i = setInterval(function(){
console.log("f")
if(send) {
document.getElementById("login").remove();
document.getElementById("h1show").removeAttribute("hidden");
clearInterval(i)
}
}, 100);
</script>
<h1 id="h1show" hidden>PRINT THIS AFTER</h1>
Use hidden attribute on the h1, and then just remove it by :
document.getElementById("h1show").removeAttribute("hidden");
and it will show up.
Your form making submit when you press on button then page refresh is happen and you see your form again.
If you want to make request without page refresh you should return false on submit and have to use AJAX technology.
You can use CSS to show\hide your site content or backend to control your HTML.
If you want that your HTML will not contain a site content, after login make redirect to page with cookie checking or load a site content via AJAX.
get necessary info
login.html
<h1>PRINT THIS BEFORE</h1>
<form id="login" action="data.html">
name: <input id="name" type="text" required>
password: <input id="password" type="password" required>
<button type="bubmit">log in</button>
</form>
if prev page contains required info send to new page
data.html
<h1>PRINT THIS AFTER</h1>
Related
I'm using a nocode API that returns some HTML based on some parameters in the URL when the user makes a GET request. I'd like to improve the user experience and have a form like a contact 7 form that can map user input for each form field in the call to API.
For example form would look like following:
Name: Todd
Email: todd#gmail.com
Key: zjdHSDFHSDFHSDFS
My API is example https://api.com/endpoint/v1/
When the user enters name, email and key I need to make a call like this:
My API is example https://api.com/endpoint/v1?name={name}&email={email} with the Key field passed in as a header (X-BLOBR-KEY: {key})
I couldn't figure out how to do this with javascript or with a wordpress plugin.
Here is some code. It is a generic HTML form and a custom submit function in vanilla JavaScript placed inside the head tag. I think it achieves what you want besides the header.
It is not possible to perform an HTTP redirect with headers, read more here. An alternative would be to perform an async request then if it returns HTML you could replace the existing HTML with the new HTML. This is a bit of hacky approach in my opinion.
As it stands, I'm not sure what value a header like this would be adding. If it's hard-coded into the HTML/JavaScript anyone could see it, manipulate it, or use it on their own form to spoof yours. To avoid this you could look into using PHP. I know W3 has resources for HTML forms with PHP.
<html>
<head>
<script>
function submitFunction(e) {
// Prevent the default form submitting actions to occur
e.preventDefault();
e.stopPropagation();
// Get the form
let form = document.querySelector("#myForm");
// Get all field data from the form
let data = new FormData(form);
// Convert key-value pairs to URL parameters
let params = new URLSearchParams(data);
// Build the endpoint URL
let newUrl = `https://api.com/endpoint/v1?${params}`;
// Send to endpoint URL
window.location.href = newUrl;
}
</script>
</head>
<body>
<h2>HTML Form</h2>
<form id="myForm" onsubmit="submitFunction(event)">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John">
<br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
I am currently making a login interface that posts user data to a NodeJS server. Here is the code for the form.
<form action="http://127.0.0.1:8080/" method="POST" id="login_form">
<div class="input">
<input class="input-box" id="username" type="text" name="username" placeholder="Username">
</div>
<div class="input">
<input class="input-box" id="password" type="text" name="password" placeholder="Password">
</div>
<input type="submit" class="button blue" value="Login">
</form>
Now the form submission is intercepted by a javascript file that takes the form data and posts it to a NodeJS server using AJAX. The server validates the user login and if successful, returns an HTML page to be loaded using jQuery. Here is the code:
$(document).ready(function(){
$('#login_form').submit(function(event){
event.preventDefault();
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $('#login_form').serialize(),
dataType: 'html',
success: function(response) {
$("html").html(response);
}
});
});
});
Now the login form works properly and loads the HTML response, but with one minor issue. Before the final rendered page (with all the css styles and images) is loaded, all the text on the page gets displayed with no formatting, then the final design is displayed. This gives a strange transition between the login form page and the final user portal. Does anyone know why this might be happening and any solutions to fix it?
This is called FOUC (flash of unstyled content).
Here’s an existing answer to avoid it:
https://stackoverflow.com/a/5983338/3044358
Or just google the term. Lots of suggestions.
First thing to try: put your css link tags at the top of the head element
I just made pop up login with JavaScript:
<script type="text/javascript">
function show_Window(id){
var e = document.getElementById(id);
if(e.style.display == 'block'){
e.style.display = 'none'
}else{
e.style.display = 'block'
}
}
</script>
and inside this window there is login form and ID is popUpLogin:
<div id="popUpLogin">
<div id="content">
<div id="exit">
<p>X</p>
</div>
<form method="POST">
<?
if(isset($error))
{
?>
<label class="loginLabel"><b>KÄYTTÄJÄNIMI: </b></label><input type="text" class="input" name="usernameInput" placeholder="" required></input>
<br><br>
<label class="loginLabel"><b>SALASANA: </b></label><input type="password" class="input" name="passInput" placeholder="" required></input>
<br><br>
<button type="submit" name="loginButton" class="loginButton">KIRJAUDU</button>
</form>
<br><br><br><br>
REKISTERÖIDY
</div>
It works fine, if login details are OK, but if password or username is wrong page reloads and this popup window shutdown and there is not error message in this popup login. How i can keep this window open after this button refresh page?
Considering that you are using a raw html form for your login, the proper pattern would be to have your backend set the error state. So after the page reloads, the login form would re-open and probably show a helpful message to the user like "your email/password combo wasn't found etc". I can't tell you much about how write that without knowing your backend, but probably the backend would set a JS variable in the scope of this page.
Alternately, you could turn the login into an JS form and not reload the page, which might improve your ux here (google XMLHttpRequest or sending forms through javascript if you aren't already familiar with this pattern)
I've asked this question to the admins of Smartjobboard software yet they are so inactive ill ask here...
On mobile phones/Ipads a jobseeker is able to apply to a job with a CV by uploading it and submitting it. However for some reason when a user uploads a CV it will sometimes refresh the page and the CV will not be uploaded..However on desktop the upload never breaks and works flawlessly
I'm pretty sure its something to do with the page speed or/and how the page loads. But to be proactive in getting this fixed and working as it should I thought id ask you genius people for help :)
Anyway the codes... (Posted in pastebin)
Apply_now.php - http://pastebin.com/JasSWTEg
The form for applying :
<form method="post" enctype="multipart/form-data" id="applyForm" action="{$GLOBALS.site_url}/apply-now/">
<input type="hidden" name="is_data_submitted" value="1">
<input type="hidden" name="listing_id" value="{$listing_id}">
<fieldset>
<div class="inputName" style="width:19%">
[[Attach your CV]]:
</div>
<div class="inputField" style="margin-top:7px;">
<input type="file" name="file_tmp" />
</div>
</fieldset>
<input class="button-green" type="submit" value="[[Apply Now]]" onclick="return applySubmit();"/>
</form>
Apply Script :
function applySubmit() {
$("#ApplicationForm").hide();
$("#applyForm").ajaxSubmit(
{
url: $("#applyForm").attr("action"),
type: "POST",
success: function (data)
{
$("#messageBox").html(data);
}
});
return false;
}
I'm unsure if there is a problem within the applying script/php/code it self. I'm working on the pagespeeds now to eliminate render blocking etc etc to see if its causing the issue.
As said in the comments, add a action tag to your html form.
In many sites, I have seen after clicking on "Sign Up" or "Register" button we are either re-directed to other page where the insertion of our data in database takes place. Like in Facebook, when you click "Sign Up" it goes to the facebook.com/r.php page. I want to create a registration form which when submitted, will be not re-directed but will validate and insert data in database in the same page.
For example, Facebook uses a form such as:
<form id="xyZ" name="abc" method="post" action="r.php">
It redirects us from index.php to r.php.
But I want to use:
<form id="xyZ" name="abc" method="post" action="index.php">
i.e Without redirecting.
Which one is safe?
Redirecting does not effect the security of the website at all in the slightest. I recommend taking a look here about possible authentication solutions you can use for your site.
Whether you authenticate and log them in/register them using index.php or r.php, it doesn't matter in the slightest. Forum systems such as phpbb used to at one time to everything in the index.php file, and depending on the ?page $_GET variable, it would display different things (Like a login form, or a registration form). How you handle it, is entirely up to you, but neither method is more insecure than the others.
Both are safe!
Redirect method, kind of link using which user redirects to another page where they can register
Ajax Method, here you can make calls using Javascript / jQuery which returns you html source, which you can just plug in appropriate place.
Your Page where you need your registration form to be displayed, when user click on sign up link
<div id="ajax-response"></div>
<a id="signup" href="signup.php">SignUp</a>
<script type="text/javascript">
jQuery("#signup").on('click', function(e){
e.preventDefault();
var _context = this;
jQuery.ajax({
url: jQuery(_context).attr('href'),
success: function(response){
jQuery("#ajax-response").html(response);
}
})
})
</script>
and signup.php, will contain the registration form
<form>
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit" />
</form>