How to fill in form field, and submit, using javascript? - 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();

Related

Retrieve data after pressing submit button

<div class="chat-input-holder">
<textarea class="chat-input"></textarea>
<input type="submit" value="Send" class="message-send"/>
</div>
How to retrieve data in textarea field after clicking on submit button. Using jquery, ajax?
This code should work:
function getdata(Event){
Event.preventDefault()
let chatInput = $('#chat-input').val();
$('#result').text(chatInput)
}
$('#message-send').click(getdata);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form class="chat-input-holder"> <!-- replace div with form -->
<textarea class="chat-input" id="chat-input"></textarea>
<input type="submit" value="Send" id="message-send" class="message-send"/>
</form>
<p> for the example we will place the text on the div bellow. but use the data however you like</p>
<div id='result'>
</div>
Note that I changed the div tag into a form tag, and added some IDs.
You can find here a solution using jQuery. The output is currently store in a div with id="out", you can customize the code.
document.forms["chat-input-holder"].addEventListener('submit', e => {
e.preventDefault();
let text = $(".chat-input").val();
$("#out").html(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="chat-input-holder">
<textarea class="chat-input"></textarea>
<input type="submit" value="Send" class="message-send"/>
</form>
<div id="out"></div>

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

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.

How to move a text from an input field to another by pressing a button in javascript

Hi I'm new in javascript so I'm sorry if I my question is silly
I am suppodsed to make a dive where there would be two input fields and a button. When you press the button the text that is written in first field must move to the second one. This is what I have done:
<script>
function myfunction(){
var fp= document.forms["fora"];
fp.elements[1].innerHTML=fp.element[0].value;
fp.elements[0].value="";
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Project 2 </title>
</head>
<body>
<div>
<form id=fora>
First phrase:<br>
<input type="text" name="first phrase" >
<br>
Second phase:<br>
<input type="text" name="second phrase">
</form>
<button type="button" onclick="myfunction()">push me
</button>
<buttom>
</button>
</div>
<p id="intro"></p>
</body>
</html>
Has anyone any idea what i am doing wrong??
You need to change innerHTML to value. And there is a typo fp.element (missing s , should be fp.elements)
var fp= document.forms["fora"];
fp.elements[1].value=fp.elements[0].value;
fp.elements[0].value="";
Change your javascript to read and set the values of the inputs based on the names:
function myfunction(){
document.getElementsByName("second phrase")[0].value = document.getElementsByName("first phrase")[0].value;
document.getElementsByName("first phrase")[0].value = "";
}
Change
fp.elements[1].innerHTML=fp.element[0].value;
to
fp.elements[1].value = fp.elements[0].value;
function myfunction(){
var fp= document.forms["fora"];
fp.elements[1].value = fp.elements[0].value;
fp.elements[0].value = "";
}
<form name="fora">
First phrase:<br>
<input type="text" name="firstPhrase" ><br>
Second phase:<br>
<input type="text" name="secondPhrase">
</form>
<button type="button" onclick="myfunction()">push me</button>

Changing the text/background color through JavaScript immediately changes back

Trying to change text color and background color of the text according to what I write in the textbox. Seems to work briefly; it shows me the color for a split second, like a quick snap and that's it.
<!DOCTYPE html>
<html>
<head>
<title>Prelab5 Ex1</title>
<style>
</style>
</head>
<body>
<h2>Prelab5 Ex1</h2>
<form method="post">
<input type="text" name="background" id="background"/><input type="submit" value="Background" onclick="changeBack();"/>
<br/>
<input type="text" name="text" id="text"/><input type="submit" onclick="changeText();" value="Text"/>
<br/>
<div id="content">Some text</div>
</form>
<script>
var DivText = document.getElementById("content");
function changeBack(){
var backColor = (document.getElementById("background").value);
DivText.style.backgroundColor= backColor;
}
function changeText(){
var textColor = (document.getElementById("text").value);
DivText.style.color = textColor;
}
</script>
</body>
</html>
Your onclick handlers for your submit buttons don't return false so your form is submitted resetting the page. You could add return false like
var DivText = document.getElementById("content");
function changeBack() {
var backColor = (document.getElementById("background").value);
DivText.style.backgroundColor = backColor;
}
function changeText() {
var textColor = (document.getElementById("text").value);
DivText.style.color = textColor;
}
<!DOCTYPE html>
<html>
<head>
<title>Prelab5 Ex1</title>
</head>
<body>
<h2>Prelab5 Ex1</h2>
<form method="post">
<input type="text" name="background" id="background" />
<input type="submit" value="Background" onclick="changeBack(); return false" />
<br/>
<input type="text" name="text" id="text" />
<input type="submit" onclick="changeText(); return false" value="Text" />
<br/>
<div id="content">Some text</div>
</form>
</body>
</html>
Your "submit" input performs the action on the form, which is currently set to "post". This will post the form to the same page (and cause a refresh).
You can override the default functionality by adding return false; to the ONCLICK attribute on all input type= "submit" elements.
In other words, this:
needs to become this:
<input type="submit" onclick="changeText();" value="Text"/>
but why use input type = submit at all?
You can just as easily use a link or button without the form:
<a href="#" onclick="changeText();"/>Test</a>
or
Click me!
which will do the same thing without needing to override the a forum action :)

How to add text into a div using a html form?

Adding the insertion of input type text into the div title on the same screen. Attempted broken function to they turn the input into a variable and use it to fill in the div.
<body>
<div class="form">
Form <br><br>
<form name="input" action="javascript:alert(titleValue);">
Title: <input type="text" name="title" class="titleInsert">
<input type="submit" value="Submit">
</form>
</div>
<div class="offer_display">
<div class="title" id= title></div>
</div>
</body>
<script>
var titleValue="";
$('#titleInsert').on("change", function () {
titleValue=$(this).val();
$("#title h3").text("titleValue");
});
</script>
</html>
Another problem with you code is, that you have to use "input" event and not "change".
See working code on fiddle: http://jsfiddle.net/z037qv3n/
<body>
Form <br><br>
<form name="input" action="javascript:alert(titleValue);">
Title: <input type="text" name="title" id="titleInsert">
<input type="submit" value="Submit">
</form>
<div class="title" id="title"></div>
</body>
<script>
var titleValue="";
$('#titleInsert').on("input", function () {
titleValue=$(this).val();
$("#title").text(titleValue);
});
</script>
</html>
Change your code for $('div.title').html(titleValue);
Live Demo : JSFIDDLE
You have to include jQuery library in your head section like this
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
There are lot of mistakes in your code please see below:
First mistake you should put your jQuery inside ready function.
Second mistake there is no such id #titleInsert it is a class so you have to do .titleInsert
Third mistake there is no tag h3 in #title
Fourth mistake you should use .keyup event instead .change event
Replace your jQuery code with following :
<script type="text/javascript">
$(document).ready(function(){
var titleValue="";
$('.titleInsert').on("keyup", function () {
titleValue=$(this).val();
$("#title").text("titleValue");
});
});
</script>

Categories

Resources