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
<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>
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.
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>
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 :)
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>