How to add links in mesage in popup window in javascript alert? - javascript

I have a function which stores the data and after that function I wanted to give an popup message with link. I am able to submit data and create an popup using alert. But adding link in text is something I want. Below is the code I tried.
<!DOCTYPE html>
<html>
<base target="_top">
<head>
<script type="text/javascript">
function myfunction(from){
(function($){
var id = $("#id");
var wnum = $("#wnum");
var id = id[0]['value']
var wnum = wnum[0]['value']
if(from == 'submit'){
submitData(id,wnum) // data submitted
var str = "Inform us!";
var result = str.link("some_link");
alert("Thank you for submitting the form. "+result);
}
})(jQuery);
}
</script>
<body>
<div class="cen">
<div class="wrapper">
<h1>Font Selector</h1>
<fieldset class="fontForm grid">
<div class="grid-cell">
<div class="grid-cell size1of1">
<label for="fname">Order Id</label>
<input type="text" id="id" name="id" placeholder="Enter order id" >
<label for="fname">WhatsApp Number</label>
<input type="text" id="wnum" name="wnum" placeholder="Enter WhatsApp number">
<p><button onclick="myfunction('submit')">Submit</button></p>
</div>
</div>
</body>
</html>
How could I do this?

You cannot with alert. You will have to build an alert dialog that does not use it, e.g. using bootbox or something you build yourself.

Related

HTML form data to local JSON file without Node.js

So I'm building a web application with the option to be admin and add data to a JSON file, which will be displayed onto another HTML page (index).
Now is my question: how to do it. How to get the data from the form, parse it, and put it in a JSON file. And can it be done without Node.js
This is my current JSON-file
{"accounts": [
{"email": "example-mail#mail.com", "password2":"Duck123"},
{"email": "example-mail2#mail.com", "password2":"Cow123"},
{"email" : "example-mail3#mail.com", "password2": "Chicken123"}
]}
This is my "Admin" page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>ADMIN PAGE</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<form id="adminform" action="#" method="post">
<div class="form-group">
<label for="emailadress">Email Address</label>
<input type="email" class="form-control" id="emailadress" required autocomplete="false">
</div>
<div class="form-group">
<label for="password2">Password</label>
<input type="password" class="form-control" id="password2" required>
<input type="button" value="Show Password" readonly onclick="passwordShow()" autocomplete="false">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</body>
<script>
//show password on button click
function passwordShow() {
var x = document.getElementById("password2");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
</html>
If somebody knows how to do it, or has a tip, please let me know!
Direct writing to the filesystem can not be done from inside the Browser. However you have the possibility to create a "download" link, so that the user gets a notification that a file should be downloaded and can pick a location where to store that file.
Copied the following snippet from Stackoverflow: Download JSON object as a file from browser. You can use it to create exactly that download containing your json content.
function downloadObjectAsJson(exportObj, exportName){
var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj));
var downloadAnchorNode = document.createElement('a');
downloadAnchorNode.setAttribute("href", dataStr);
downloadAnchorNode.setAttribute("download", exportName + ".json");
document.body.appendChild(downloadAnchorNode); // required for firefox
downloadAnchorNode.click();
downloadAnchorNode.remove();
}

I cant stop web page from posting when I click button

I have looked at multiple solutions on stack overflow and non of them have worked.
When I click the button, it take me to a new url yoursite.com/index.html?message=blah&pass=12
I want it to stay in the same page and just execute the script I wrote.
Please help
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Encryption Using Caesar</title>
<link rel="stylesheet" href="https://unpkg.com/marx-css/css/marx.min.css">
<style>
.hidden{
visibility: hidden;
}
</style>
<script src="encrypt.js"></script>
</head>
<body>
<main>
<h2>What is this?</h2>
<p>This application was built to <b>encrypt</b> data using the <b>Caesar method.</b>
All encryption is handled on <i>client side</i> in order to garuntee <b>data integrity.</b> </p>
<form onsubmit=" event.preventDefault; doStuff(); ">
<h5>Insert some text in the following box:</h5> <br>
<textarea id="userText" name="message" cols="30" rows="10" placeholder="Your secret message" autofocus></textarea>
<br>
<h5>Enter Your Favorite Number</h5> <br>
<input type="text" name="pass" id="pass" placeholder="Enter Your Favorite Number:"> <br>
<button id="encrypt" type="submit" onclick="return false;" style="width: 100%;">Lets Encrpt</button>
<div id="emessage"></div>
</form>
</main>
<script>
window.onload = function(){ doStuff(); };
function doStuff(){
document.getElementById("encrypt").onclick = function(){
var key = document.getElementById("pass").value;
var message = document.getElementById("userText").innerHTML;
var eMessage = caesarShift(message,key);
document.getElementById("emessage").innerHTML = eMessage ;
}
}
</script>
</body>
</html>
I have another js file called encrypt.js which has a function called caesarShift()
I don't know why this isnt working. Please help!
Change event.preventDefault to event.preventDefault().
The former only references the function while the latter actually invokes it.
I changed the code a bit to make it more simple to do the stuff you are looking for.
You need to define the caesarShift function that you are calling. Unless you define that you won't get the answer you are looking for in the div emessage.
Also you need to change to event.PreventDefault() if you want to use your method only and then define the caesarShift and then call it.
HTML Part -->
<form>
<h5>Insert some text in the following box:</h5> <br>
<textarea id="userText" name="message" cols="30" rows="10" placeholder="Your secret message" autofocus></textarea>
<br>
<h5>Enter Your Favorite Number</h5> <br>
<input type="text" name="pass" id="pass" placeholder="Enter Your Favorite Number:"> <br>
<button id="encrypt" type="button" onclick="doStuff()" style="width: 100%;">Lets Encrpt</button>
<div id="emessage"></div>
</form>
JS part -->
<script>
function doStuff(){
var key = document.getElementById("pass").value;
var message = document.getElementById("userText").value;
// Define this caesarShift function
var eMessage = caesarShift(message,key);
document.getElementById("emessage").innerHTML = eMessage ;
}
// window.onload = function(){ doStuff(); };
</script>

Getting HTML DOM element and setting it to a value of a input tag

There is an element on my page with the id last_name. I would like to get its value and pass it along to my input tag.
I am essentially trying to do something like this (doesn't work).
<input type="hidden" name="lastName" value=document.getElementById("last_name").value>
Is there anyway to do this?
This is not only on load.
Essentially, I have a bunch of textboxes grouped together in a form.
Then I have another form with a button. When the user hits the button, I want my input tags' values be the current values entered in the textboxes.
EDIT: Thanks all! Got it work. I essentially had to remove the "value" attribute of the input tags and then add an "onclick" attribute to my button and then call those javascript codes you guys provided me.
for only loading page:
<!DOCTYPE html>
<html>
<head>
<!-- link here your JQuery library -->
<script>
$(function(){
$('#lastName').val($('#last_name').val());
});
</script>
</head>
<body>
<input type="text" id="last_name" value="123">
<input type="hidden" name="lastName" value="">
</body>
</html>
for button click:
<!DOCTYPE html>
<html>
<head>
<!-- link here your JQuery library -->
<script>
$(function(){
$('#btn-save').on('click', function() {
$('#lastName').val($('#last_name').val());
// other work
return false;
}
});
</script>
</head>
<body>
<input type="text" id="last_name" value="123">
<input type="hidden" name="lastName" value="">
<button id="btn-save">Save</button>
</body>
</html>
without jQuery use:
<script>
window.onload = function(){
var src = getElementById('last_name');
var dst = getElementById('lastName');
dst.value = stc.value;
}
</script>
Try this:
var lastName = document.getElementById("last_name");
var input = document.getElementById("yourInputId");
input.value = lastName.value;
Try the following code
HTML
<input type="hidden" name="lastName" id='hidLastName' />
and javascript code:
var input = document.getElementById("hidLastName")
input.value = document.getElementById("last_name").value
You should move the logic to a .js file or inside a <script></script> element. Preferrably the former. Try something like this:
Put an id to the receiving input:
<input type="hidden" id="lastName" name="lastName">
And this to your .js file
window.onload = function(){
var lastNameInput = document.getElementById('lastName');
var sourceInput = document.getElementById('last_name');
lastNameInput.value = sourceInput.value;
}
Try This:
Java Script
<script>
function setInput() {
document.getElementById("lastname").value = document.getElementById("last_name").value;
}
</script>
HTML
<input type="text" id="last_name" onblur="setInput()"/>
<input type="hidden" id="lastname" />

Razor form on a facebook tab page

I am trying to execute a form inside an Facebook tab. What have I tried among many things:
It seems like Request.HttpMethod == "POST" is not working as usual. #message prints out on pageload.
I have tried to add alert to before return $('form').valid(). This is not being executed.
Any ideas of issue or another workaround.
Code:
#{
var message = string.Empty;
if (Request.HttpMethod == "POST")
{
message = "SUBMITTED";
}
}
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<div class="form">
#if (!string.IsNullOrEmpty(message))
{
<p class="formFinish">
#message
</p>
}
<div class="row">
<label>Name</label>
<input type="text" name="Name" id="Name" class="required" minlength="4" maxlength="30" />
</div>
<div class="newGame row">
<button class="btn">Submit</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('form').attr('enctype', "multipart/form-data");
$('form').on('submit', function () {
return $('form').valid()
});
});
</script>
I might be missing something obvious, it doesn't seem that you're sending a post. You've got no actual form there, just a div with the class of "form", and your "Submit" button is just a button that doesn't appear to have any action associated with it. You're going to need to actually post something if you want the page to get a post request.
EDIT: Here's working code, I just had to change your "div class='form'" into an actual form element with method "post". Note that I didn't fix your usage of jQuery validate, but now that the form is actually generating a post request, you should be well on your way.
#{
var message = string.Empty;
if (Request.HttpMethod == "POST")
{
message = "SUBMITTED";
}
}
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form method="post">
#if (!string.IsNullOrEmpty(message))
{
<p class="formFinish">
#message
</p>
}
<div class="row">
<label>Name</label>
<input type="text" name="Name" id="Name" class="required" minlength="4" maxlength="30" />
</div>
<div class="newGame row">
<input type="submit" class="btn" value="Submit" />
</div>
</form>

How to fill in form field, and submit, using javascript?

If I have an html document whose rough structure is
<html>
<head>
</head>
<body class="bodyclass" id="bodyid">
<div class="headerstuff">..stuff...</div>
<div class = "body">
<form action="http://example.com/login" id="login_form" method="post">
<div class="form_section">You can login here</div>
<div class="form_section">
<input xmlns="http://www.w3.org/1999/xhtml" class="text" id="username"
name="session[username_or_email]" tabindex="1" type="text" value="" />
</div>
<div class="form_section">etc</div>
<div xmlns="http://www.w3.org/1999/xhtml" class="buttons">
<button type="submit" class="" name="" id="go" tabindex="3">Go</button>
<button type="submit" class="" name="cancel"
id="cancel" tabindex="4">Cancel</button>
</div>
</form>
</div>
</body>
</html>
You can see that there is a username field and a Go button. How would I, using Javascript, fill in the username and press Go...?
I would prefer to use plain JS, rather than a library like jQuery.
document.getElementById('username').value="moo"
document.forms[0].submit()
document.getElementById('username').value = 'foo';
document.getElementById('login_form').submit();
You can try something like this:
<script type="text/javascript">
function simulateLogin(userName)
{
var userNameField = document.getElementById("username");
userNameField.value = userName;
var goButton = document.getElementById("go");
goButton.click();
}
simulateLogin("testUser");
</script>
It would be something like:
document.getElementById("username").value="Username";
document.forms[0].submit()
Or similar
edit: you guys are too fast ;)
This method helped me doing this task
document.forms['YourFormNameHere'].elements['NameofFormField'].value = "YourValue"
document.forms['YourFormNameHere'].submit();

Categories

Resources