I am using the iron-form in Polymer 1.0 to submit a login form with paper-inputs and a paper-button.
I am calling submit() on the buttons onclick, but nothing happens. I even tried to put in a native button just to see if there was an error with my JS, but it still didn't submit.
However, it did show the "----- is required" popup which it didn't do with the paper-button.
I am using PHP to dynamically render the HTML, but i have also tried to make it work in a normal HTML file, which gave me the same results.
I don't use gulp to run the webserver, i just use a normal XAMPP setup.
login.php:
<?php
// configuration
require("/includes/config.php");
// if user reached page via GET (as by clicking a link or via redirect)
if ($_SERVER["REQUEST_METHOD"] == "GET")
{
// else render form
render("login-form.php", ["title" => "Log In"]);
}
// else if user reached page via POST (as by submitting a form via POST)
else if ($_SERVER["REQUEST_METHOD"] == "POST")
{
// query database for user
$rows = query("SELECT * FROM users WHERE username = ?", $_POST["username"]);
// if we found user, check password
if (count($rows) == 1)
{
// first (and only) row
$row = $rows[0];
// compare hash of user's input against hash that's in database
if (crypt($_POST["password"], $row["hash"]) == $row["hash"])
{
// remember that user's now logged in by storing user's ID in session
$_SESSION["id"] = $row["id"];
// redirect to portfolio
redirect("/");
}
}
// else apologize
apologize("Invalid username and/or password.");
}
?>
header.html:
<!DOCTYPE html>
<head>
<script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<!--<script src="/bower_components/webcomponentsjs/ShadowDOM.min.js"></script>-->
<link rel="import" href="elements.html">
<link rel="import" href="/styles/styles.html">
<?php if (isset($title)): ?>
<title>Test: <?= htmlspecialchars($title) ?></title>
<?php else: ?>
<title>Test</title>
<?php endif ?>
</head>
<body>
login-form.php:
<div class="outer">
<div class="middle">
<div class="inner">
<paper-material elevation="5">
<paper-header-panel>
<paper-toolbar>
<div><b>Login</b></div>
</paper-toolbar>
<div class="content">
<form is="iron-form" id="form" method="post" action="index.php">
<paper-input name="username" label="Username" required></paper-input>
<paper-input name="password" label="Password" required></paper-input>
<paper-button raised onclick="clickHandler(event)" id="loginButton">Submit</paper-button>
</form>
<script>
function clickHandler(event) {
Polymer.dom(event).localTarget.parentElement.submit();
console.log("Submitted!");
}
</script>
</div>
</paper-header-panel>
</paper-material>
</div>
</div>
footer.html:
</body>
</html>
elements.html:
<link rel="import" href="bower_components/font-roboto/roboto.html">
<link rel="import" href="bower_components/paper-header-panel/">
<link rel="import" href="bower_components/paper-material/">
<link rel="import" href="bower_components/paper-toolbar/">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/iron-form/iron-form.html">
Any help will by greatly appreciated!
The iron-form element submits your request via AJAX (https://github.com/PolymerElements/iron-form/blob/master/iron-form.html#L146). In other words, it's not going to do a full page refresh like the traditional <form> element (which seems like the behavior you're expecting). It's just getting and fetching data.
I've asked the team if it would be possible to create a flag on the iron-form element so users can still get the benefit of having it submit their custom element values in the request, but force it to use the old form behavior where it does a full page refresh (allowing the server to render and send down a new page).
edit
I'd recommend that you replace iron-form in your example with a regular form element, then write the values from your paper-* elements into input type="hidden" fields, and use those to submit the form.
Related
Im trying to do a simple dropzone file uploader. Im not interested in the server side as Im not doing this seriously, just trying the js for the front end. Everything seems ok, the load bar works fine, but then it always show the X image and then I get this insanely long message that contains html.
This confuses me because from the examples ive seen, if there is an error it will display the string from the js. I dont know why it's showing this long message.
Does it have anything to do with the "action" or "file" type?
A screenshot is here
https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/13310379_496643860530613_5508631554600071626_n.jpg?oh=1c25de2a0cb0957a68c1e8e2905b52df&oe=57DC5CA0https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/13310379_496643860530613_5508631554600071626_n.jpg?oh=1c25de2a0cb0957a68c1e8e2905b52df&oe=57DC5CA0
Edit:
My HTML is this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="assets/js/dropzone.js"></script>
<script src="assets/js/dropzone-amd-module.js"></script>
<link href="assets/css/dropzone.css" type="text/css" rel="stylesheet" />
<link href="assets/css/basic.css" type="text/css" rel="stylesheet" />
<link href="assets/css/Style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="dropzone">
<form action="/file-upload" class="dropzone dz-clickable" id="demo-upload">
<div class="dz-default">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</div>
</form>
</div>
</body>
</html>
My bad, didn't know you were using the default Dropzone.js. I'd remove the downvote if I could but it's locked in now.
Try
<form action="UploadImages" class="dropzone">
</form>
Remove the <div id="dropzone"> too. You already specify dropzone for the form, so wrapping it in a div with id of dropzone makes no sense.
jsFiddle: http://jsfiddle.net/3zhyg73u/85/ so you can compare your code and see why it's not working.
sorry, Im pretty new to this but i think it's because the errorMessage from the error event receive's a string containing HTML when a failed post request is sent out. you can change the message by doing this. this isn't the best method but it works :/ ohh and i was using jquery for this particular project
var myDropzone = new Dropzone('#icDropZone', {
url: "/file/post",
error: function(response, errorMessage, xhrObj) {
if(response.status === "error") {
$('div.dz-default.dz-message > span').show(); // Show message span
$('div.dz-default.dz-message').css({'opacity':1, 'background-image': 'none'});
$('.dropzone .dz-preview .dz-error-message').attr('style','display:block;opacity:1;top: 150px;background:#D44F4F;');
$('.dropzone .dz-preview .dz-error-message span').html('Error uploading image')
}
}
});
scripts.js
function homepageInput() {
var x = document.getElementById('homeForm').elements["whatdoyouwant"].value;
if(x.localeCompare("working") == 0){
document.location.href = 'new.html';
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<div class= "boxContainer">
<div id = "box">
<form id="homeForm" onsubmit="homepageInput()">
<input type="password" name="whatdoyouwant" id="whatdoyouwant" placeholder="WTF..."/>
<input id="submit" type="submit"/>
</form>
</div>
</div>
</body>
</html>
when i type "working" into my password field it wont load the page new.html which is located in the same directory. Any ideas? When i use an alert in the same if statement it loads fine?
You trigger the function when you submit the form.
You do nothing to prevent the default behaviour of the form.
Consequently, you set location.href and then the form submission runs and you submit the form to the current URL.
The quick hack to solving this is to return false from your onsubmit function.
Modern code would bind the event handler with JavaScript and use preventDefault().
I have been trying to fetch the result of a php page after sending a post request to the page itself. I want to fetch the data after the post request succeeded and get the content of the div element with id result. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>My Form</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myForm").submit(function() {
$.post("test.php",
{
name: "valid"
},
function(data, status) {
});
return false;
});
});
</script>
</head>
<body>
<form method="POST" id="myForm">
<input type="text" name="name" />
<input type="submit" name="submit" value="Submit" />
</form>
<div id="result">
<?php
if(isset($_POST['name'])) {
if($_POST['name'] == 'valid') {
echo 'You are a valid user!';
}
}
?>
</div>
</body>
</html>
When I submit the button regardless of what is written in the textbox I should get the Your a valid user message from the test.php I want to get this message in the result page and display it in the current page without reloading the page. Since the result page content is saved in data variable I don't know how to select an element which is contained in a variable instead of the current page itself. We can do $("div#result").text() for the current page. But how should I do it for the html content stored in a variable?
Just give your data variable as second parameter to jQuery like this:
$('#result', data).text()
Not tested but should work.
Update:
I don't know why but this will only work when your element you want to find is wrapped with another element within your body tag. See this fiddle: http://jsfiddle.net/xf32L5uj/
Hi I am trying to do a simple thing:
1) create two links in my HTML page 2) When user clicks on link1- I want it to call a server side function that displays "Hello World". But when i click on link1- I am not able to see "Hello World" getting displayed anywhere.
I have tried doing this multiple times with different variations but it is not working. Thanks in advance !!
Here is my code
Code.gs
function doGet() {
return HtmlService.createTemplateFromFile('IndexHTML').evaluate()
.setTitle('Simple App')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function doSomething(){
return ContentService.createTextOutput('Hello World');
}
IndexHTML.html
<!DOCTYPE html>
<html>
<head>
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
</head>
<body>
<h1>Simple App</h1>
<p>
Click on the buttons to view roles
</p>
<a href = "#" id = "index1" >I am index1</a>
<a href = "#" id = "index2" >I am index2</a>
<?!= HtmlService.createHtmlOutputFromFile('JavaScript').getContent(); ?>
</body>
</html>
JavaScript.html
<!-- Load the jQuery and jQuery UI libraries. -->
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<!-- Custom client-side JavaScript code. -->
<script>
$(document).ready(function() {
$("#index1").click(function() {
google.script.run.doSomething() ;
}
});
});
</script>
Stylesheet.html
<!-- Load the jQuery UI styles. -->
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<!-- Custom styles. -->
<style>
body
{
background-color:red;
}
</style>
You are not seeing "Hello World" displayed anywhere because you have not written any code to display it!
All your code does is run server-side doSomething() function, which returns text output. You need to add a success handler to your google.script.run and specify a callback function to run after the server-side function returns successfully, e.g:
google.script.run.withSuccessHandler(processResult).doSomething();
Then write a processResult() javascript function that accepts server return as first argument and does whatever you need to do with it, i.e.:
function processResult(data) {
console.log(data);
}
See google.script.run reference and HTML Service success handlers reference for more details.
I'm a college business student trying to build a website with a business model.
I'm building a website where I want to allow users to signup. Right now I'm using action: signup.php to store the user into the database. After the user is successfully inserted, I redirect the page back to the index.html where the form was submitted.
My question is, how can I reference JavaScript to change the login from display:block to display:none and sign up confirmation from display:none to display:block through my PHP tag?
I'm currently using $_GET to grab the success/fail status from signup.php and I want to use an IF statement to execute the correct JavaScript code.
UPDATE
I was advised to instead set all div's to block and use a PHP IF statement to display the login or signedup divs. However, after implementing the changes, the index.html still cannot distinguish the success/fail status. Here is my code below:
signup.php:
if (mysqli_num_rows($data) == 0)
{
$qry = "INSERT INTO logins (username, password, email) VALUES ('$username', SHA('$password1'), '$email')";
$result=mysqli_query($dbc, $qry);
if($result)
{
header('Location: index.html?signup=success');
}
}
else
{
header('Location: index.html?signup=fail');
}
index.html: Head
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Site</title>
<link type="text/css" rel="stylesheet" href="home.css">
<script type="text/javascript">...</script>
<?php
if(!empty($_GET['signup']))
{
$signup = $_GET['signup'];
}
?>
</head>
index.html: Body
<body>
<div id="container">
<?php
if(!$signup)
{
?>
<div id="login">...</div>
<?php
}
?>
<?PHP
if($signup)
{
?>
<div id="signedup">...</div>
<?PHP
if($signup == 'success')
{
?>
<div id="confirmation">...</div>
<?php
}
?>
<?PHP
if($signup == 'fail')
{
?>
<div id="failure">...</div>
<?php
}
?>
<?php
}
?>
</div>
</body>
As of now, after the user submits the form they are inserted into the database. The problem is that once they are redirected to the index.html, the php does not recognize the success/fail status and consequently only displays the login form.
That PHP code needs to go in your <head> or <body> section. You have it before <html> right now.
And yeah, onload = function(); should probably be window.onload = function;
This code doesn't do what you think it does:
onload=signedup();
You need to attach to the onload handler correctly:
window.onload = signedup;
Now, this isn't the best way to do things (it waits for EVERYTHING to be loaded), so if you happen to have jQuery included in your page, it'll be more efficient:
$(function(){ signedup(); });
Also, move the PHP to inside the HEAD tag since it prints out a script - and scripts should generally be in the HEAD tag.
Now, to take a different direction - why don't you just do it with PHP by printing out the HTML only if it's needed:
<?php if(!$signedup) { ?>
<div id="login"> ... </div>
<?php } ?>
This is probably the way to go in this case!