How to move to the page entered in the form - javascript

let me start by saying that I'm a freshman. I would like to create a form with a button that, when pressed, will generate a page written in an inputa. How to do it? example:
<form action="" method="post">
<!-- a hidden input -->
<input type="hidden" name="a_hidden_input"/>
<!-- a text input -->
<input type="text" name="a_text_input"/>
<!-- submit button -->
<input type="submit" value="Submit"/>
</form>

This is the basic example for getting your data and displaying in the page .
<head>
<script>
function generate() {
debugger
var strText = document.getElementById("txtName").value;
var strText1 = document.getElementById("txtEmail").value;
document.getElementById("p1").innerHTML = strText;
document.getElementById("p2").innerHTML = strText1;
window.location.href = "http://mywebsite.com/home.html";
}
</script>
</head>
<body>
<form>
<input type="text" name="Name" id="txtName" placeholder="Name">
<input type="text" name="Email" id="txtEmail" placeholder="Email">
<input type="button" value="Submit" id="btnSubmit" onclick="generate()">
</form>
<div>
<h1>New Page</h1>
<p id="p1"></p>
<p id="p2"></p>
</div>
</body>
If u use any library like react js or framework like angular with backend technologies like php,nodejs, with databases as sql , mongodb or firebase it will be super easy for u .

Related

Console not displaying data

I am simply trying to display data in my console. For some reason it just flashes the result and refreshes the console. I am running the html file on server.
Code-
<html>
<body>
<form>
<label>Name:</label>
<input type="text" id="fname" >
<label>Email:</label>
<input type="text" id="email" >
<input type="submit" value="Submit" id="fetch">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#fetch').click(function(){
var str = $("#fname").val();
console.log(str);
});
</script>
</body>
</html>
I am unable to debug this. Any suggestions?
You need to return false to prevent reloading:
$('#fetch').click(function(){
var str = $("#fname").val();
console.log(str);
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label>Name:</label>
<input type="text" id="fname" >
<label>Email:</label>
<input type="text" id="email" >
<input type="submit" value="Submit" id="fetch">
</form>
Another way to prevent the default behavior:
$('#fetch').click(function(e){
e.preventDefault();
var str = $("#fname").val();
console.log(str);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label>Name:</label>
<input type="text" id="fname" >
<label>Email:</label>
<input type="text" id="email" >
<input type="submit" value="Submit" id="fetch">
</form>
Clicking the submit button will submit the form, and thus refresh the page, which is the reason why the console is clearing.
Since you're using jQuery, you can add return false; right after your console.log(str);, so the original action (here, the form submission) will be cancelled.

How to make a button clickable only if the textfield is entered

I had a textfield to enter the emailId..Iam getting that value stored in $rootScope.emailId.
Now when I click the submit button,I must take to next page only if the emailId is entered or else it must give an alert saying that must be filled.
Currently it is in form and i am using required="true" and form.$valid but still its not working is there any other way to achieve this.
<form name="customerForm" class="form-horizontal">
<div class="form-group">
<label for="inputEmail" class="col-lg-4 col-lg-offset-1 control-label">Email address</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.eMail" placeholder="Enter customer email" type="email" required focus value="{{emailId}}">
</div>
</div>
</form>
--
<div class="col-lg-1">
<button type="submit" class="btn btn-primary right-button" ng-click="$ctrl.proceedToPaymentDetails()" ng-disabled="$ctrl.customerDetails">Next</button>
</div>
Currently the form and the button are not in the same html page..Is der any way to fix this.
change ng-disabled="customerForm.$invalid" or you can also check the value of email id inside your proceedToPaymentDetails() method for alert message.
Please gone throw this example code for your better understanding
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
Email:<br>
<input type="text" ng-model="user.emailID">
<br><br>
<button ng-click="proceedToPaymentDetails()">Next</button>
</form>
<p>form = {{user}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.user = {firstName:"", lastName:"",emailID:""};
$scope.proceedToPaymentDetails = function() {
alert($scope.user.emailID);
};
});
</script>
</body>
</html>

html mailto - insert body in mail from variable

I'm using mailto: protocol on my page (html). I have textarea field where user can write some text, now I want to include that text in body of email.
Any sugestions how to change the code, that the function will work as I wish?
My current code (contact-message:
<form id="contact-form" class="contact-form" action="contact.php" method="post">
<p class="contact-name">
<input id="contact_name" type="text" placeholder="Name" value="" name="name" />
</p>
<p class="contact-email">
<input id="contact_email" type="text" placeholder="Email Addresse" value="" name="email" />
</p>
<p class="contact-message">
<textarea id="contact_message" placeholder="Nachricht" name="message" rows="15" cols="40"></textarea>
</p>
<p class="contact-submit">
<a class="submit" href="mailto:mail#adress.com?subject=Mail request&body=contact-message">Send mail</a>
</p>
<div id="response">
</div>
</form>
You can use javascript as
function sendMail()
{
var body = document.getElementById("contact_message").value;
window.location.href = "mailto:mail#example.org?subject=Mail request&body="+body;
}
Call function as
<a class="submit" onclick="sendMail()">Send mail</a>
function MyFunction(){
var email = document.getElementById("input").value;
window.location.href = "mailto:" + email + "?subject=Test email&body=Testing email";
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" id="input"/>
<button onclick="MyFunction()">Click</button>
</body>
</html>

Use JavaScript to sign into a form

I'm new to JavaScript and I want to log in to a webpage. This code will take me to the web page but won't sign in. I know it knows the values of username/password because if I do alert(loginForm.elements["username"].value) it displays "someUsername".
I'm not sure how to get these values to be entered into the boxes and hit submit. Any advice helps, thanks!
<script>
function login() {
document.loginForm.action = "http://websiteToLoginTo.com";
document.loginForm.submit();
}
</script>
<body onLoad="login()">
<form name="loginForm" method="post">
<input type="hidden" name="username" value="someUsername">
<input type="hidden" name="password" value="somePassword">
</form>
</body>
The website I'm trying to connect to has this:
<form action="/Authn/UserPassword" method="post" name="loginForm">
<input id="username" name="t_username">
<input id="password" name="t_password">
<input type="submit" name="login" value="Login" class="submit">
</form>

Filling a hidden field in a html form through javascript

I am trying to send someone an email through a form on my website. I want to include a part of my webpage into the email.
To do this I use a hidden field, which I try to fill using a piece of javascript. However due to my lack of knowledge the code doesn't seem to be triggered.
<form action="Emailverstuurd.php" method="POST">
<input id="ExcelForm" type="hidden" name="ExcelForm"/>
<input name="email">
<textarea name="body" rows="10" cols="60"> </textarea>
<script type="text/javascript">
$("#send").submit(function() {
$("#ExcelForm").val($("#myExcelDiv").html());
}
</script>
<input type="submit" name="send" id="send" value="Send Your Message"/>
</p>
</form>
How can I get my javascript code to run?
You can do it like this:
<form action="Emailverstuurd.php" method="POST" onsubmit="submitUpdate()">
<input id="ExcelForm" type="hidden" name="ExcelForm"/>
<input name="email">
<textarea name="body" rows="10" cols="60"> </textarea>
<script type="text/javascript">
function submitUpdate()
{
$("#ExcelForm").val($("#myExcelDiv").html());
}
</script>
<input type="submit" name="send" id="send" value="Send Your Message"/>
</p>
</form>
Just add an onsubmit handler to your form field give it a function and just put you value update in that function...I don't see #myExcelDiv I'm assuming that is defined somewhere else in your code?

Categories