I have a input field in form and div:
<form method="post">
<div id="message">
<input type="text" name="spind" value="" size="55" maxlength="90">
<button>Senden</button>
</div>
</form>
Then I have a javascript script for the submit-button and to show this on my website:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var message = $("input").val();
var old = $("#content").html();
$("#content").html(old + '<p><span style="font-variant:small-caps"><span
style="font-size:1.5em"><b><span style="text-transform:capitalize"><?php
echo $_SESSION["username"];?></span> : </b></span><span style=
"font-size:1.6em">' + message + "</span></span></p>");
$("#content").scrollTop($("#content")[0].scrollHeight);
});
});
</script>
When I put the input in the div inside form with method="post" the message, which should be displayed disappears. This must be because of the form-container.
So, my question is, how can I put the typed message inside the input into a mysql database, without disappearing (and using the defined "button" as submit)?
Related
What i'm missing here to print 'user_input' to display paragraph ?
is myform.submit required? Because actually I can access the variable and make an alert with it..
<script language="JavaScript">
function getData(input) {
var input = document.getElementById("user_input").value;
// alert(input)
document.myform.submit()
$('.display').text("The URL is : " + input)
}
</script>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.js"
integrity="sha256-tA8y0XqiwnpwmOIl3SGAcFl2RvxHjA8qp0+1uCGmRmg="
crossorigin="anonymous"></script>
<form id="myform">
<label><b>Enter a URL</b></label>
<input type="text" name="message" id="user_input">
<input type="submit" id="submit" onclick="getData()"><br/>
<p id="display"><span></span></p>
</form>
Don't mix java-script/jQuery into each-other.
Since you are using jQuery library then do it in a better way like below:-
Working example:-
$(document).ready(function(){ // when document is rendered completely
$('#submit').click(function(e){ // on click of submit button
e.preventDefault(); // prevent the form submit
var input =$("#user_input").val(); // get input value
$('#display').text("The URL is : " + input); // add it as a text to paragraph
});
});
<script src="https://code.jquery.com/jquery-3.2.1.slim.js" integrity="sha256-tA8y0XqiwnpwmOIl3SGAcFl2RvxHjA8qp0+1uCGmRmg=" crossorigin="anonymous"></script>
<form id="myform">
<label><b>Enter a URL</b></label>
<input type="text" name="message" id="user_input">
<input type="submit" id="submit"><br/><!-- no need of onclick-->
<p id="display"><span></span></p>
</form>
You must do what the response is actually asking you to do which simply is adding the method attribute to the form element: <form method="POST">
Working DEMO
I'm trying to transform a ContentEditable area in a form element with Javascript, and after the Editable content loses focus, the form is automatically sent. For some reason, the javascript is not working with the two commands, and the form is not being sent.
JS:
<script>
function sendform() {
document.getElementById("search-hidden").value = document.getElementById("search").innerHTML;
document.getElementById("myForm").submit();
}
</script>
HTML:
<form id='Form' action='handle.php' method='post'>
<p id="search" contenteditable='true' onblur="sendform()">Search</p>
<input id='search-hidden' type='hidden' name='search-hidden'>
</form>
I am looking to create a button at the bottom of a form that will create an alert box that will show the form data entered. Form includes:
First Name
Last Name
Address 1
Address 2
City
State
Zip
Phone
Fax
Once the form is completed, the button is clicked and an alert box pops up showing the form data entered.
Does anyone know how to accomplish without the form actually being submitted or validated? There is no database for the form data to be submitted to, so there is no database to pull the information from.
Any help would be greatly appreciated.
I have not included the form code due to its length, but the current code I am working with for the Alert Box looks like this:
<script>
function display_alert()
{
alert("");
}
</script>
<body>
<input type="button" onclick="display_alert()" value="Display alert box">
</body>
If I get it right you need something like this:
<html>
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById('send').onclick = function(e){
alert(document.getElementById("name").value);
return false;
}
}
</script>
</head>
<body>
<form method="post">
<input type="text" name="name" id="name" />
<input type="submit" name="send" id="send" value="send" />
</form>
</body>
</html>
I don't really get what you mean with a database to pull the information from, but the example uses a click event to get the data from the form field and shows it in an alert without a submit.
html code:
<html>
<SCRIPT SRC="PR8_4.JS"></SCRIPT>
<body>
<form name=details>
<table>
<tr><td>ENTER FRIST NAME:<input type=text name=fname></td></tr>
<tr><td>ENTER LAST NAME:<input type=text name=lname></td></tr>
<tr><td>ENTER PHONE NUM :<input type=text name=phnum></td></tr>
</table>
<input type="button" value="Click Me" onclick="display();">
</form>
</body>
</html>
javascript code:
function display()
{
var x=document.details.fname.value;
var y=document.details.lname.value;
var z=document.details.phnum.value;
alert("FIRST NAME:"+x+" "+"LAST NAME:"+y+" "+"PHONE NUMBER:"+z);
}
To stop a form submitting you can create an onsubmit event within the tag and return false - e.g. ...form elements.... This has the benefit of working when someone submits the form by pressing the enter key as well as pressing the submit button.
Thus, to achieve what you desire you could create a function (lets call it formAlert) and call it from the onsubmit event e.g. ...form elements...
The formAlert function would look something like:
function formAlert() {
alert_string = '';
alert_string = alert_string + document.getElementById('first_name').value;
alert_string = alert_string + ' ';
alert_string = alert_string + document.getElementById('last_name').value;
alert(alert_string);
}
and this would correspond to a form looking like:
<form id="foo" onsubmit="formAlert(); return false;">
<p><label for="first_name">First Name<label><input type="text" id="first_name" value="fred" /></p>
<p><label for="last_name">Last Name<label><input type="text" id="last_name" value="blogs" /></p>
<p><input type="submit" value="click me" /></p>
</form>
Note1, this won't be a pretty modal box - it'll simply display "fred blogs" in a Javascript alert box.
Note2, if there is a Javascript error your form will still submit (although in the example here it'll submit to itself).
Here is a JS Fiddle demonstrating the above code: http://jsfiddle.net/D59su/
I think this might be what you're looking for:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="javascriptform.css">
</head>
<body>
<form name= "details"><div class="box1"><div id="a"><input type="text" name="lastname" placeholder="LAST NAME"></div><br>
<div id="b"><input type="text" name="firstname" placeholder="FIRST NAME"></div><br>
<div id="c"><input type="e-mail" name="email" placeholder="E-MAIL"></div><br>
<div id="d"><input type="password" name="password" placeholder="PASSWORD"></div><br>
<div id="sub-button"><button onclick="getdetails();">submit</button></div></form>
</div>
<script>
function getdetails()
{
var a = document.forms["details"]["lastname"].value;
var b = document.forms["details"]["firstname"].value;
var c= document.forms["details"]["email"].value;
alert("Your name is "+a+" "+b+". Your e-mail is "+c);
}
</script>
</body>
</html>
It Is Very Simple
Using .value will help.
HTML:
<form onsubmit="return myFunction()>
<input type="text" id="name>
<input type="submit" value="SEND">
Use return before your function
Javascript:
function myFunction () {var name = document.getElementById("name").value; alert("Hi " + name)}
After Submitting It Will Show As (If I Write Alex and Submit It)
Hi Alex
Hope it will work
I have to add a calendar text box dynamically on each click on a link. I have tested some codes. For the first declaration it works and not for the others.
Here's my code:
<head>
<script type="text/javascript">
$(function () {
$(".hajanDatePicker").datepicker();
});
</script>
<script type="text/javascript">
var intTextBox=0;
function addElement(){
var contentID = document.getElementById('content');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','txtDatePicker');
newTBDiv.innerHTML +="Date:<input id='txtDatePicker' type='text' name='test1'>";
contentID.appendChild(newTBDiv);
}
</script>
</head>
<body>
<form id="form1" method="get">
<div id="content">
<input type="text" id="txtDatePicker" name="test1"/>
</div>
<p><a href="javascript:addElement();" >Add</a>
</form>
</body>
When the form loads can get the calender. After clicking "Add" it just opens as a normal text box and not as calendar.
Just call
$(".hajanDatePicker").datepicker();
at the bottom of addElement function.
And change
<input id='txtDatePicker' type='text' name='test1'>
to
<input id='txtDatePicker' type='text' class='hajanDatePicker' name='test1'>
Also, you have multiple inputs on your page with the same id: txtDatePicker.
i am trying to write a simple textbox (for people to type url in it) with a button in html.
when the button is clicked, it will send the url of the current website that I am browsing to the url that is listed in the textbox using the POST method. is it possible?
i have been looking on forums but don't really know which is the right one cos it seems that there are various way of doing it and i don't really know how to edit them.
my current code:
<html>
<head>
<title>YouTube</title>
<script type="javascript/text">
function handleButtonEnterClick(tab) {
//TODO:
var textbox_url = document.getElementById("url_textbox");
var textbox_value = textbox_url.value; //eg. value = "www.google.com"
//Need to have a POST method written here to send the url of the current
//webpage for example www.youtube.com to url listed in the textbox,
//for example www.google.com
//May I know how can I do it? Thanks.
}
</script>
</head>
<body>
<div id ="container">
<p>Enter URL:</p>
<input type="text" id="url_textbox" name="url_textbox" />
<input type="button" id="button_enter" name="button_enter"
value="enter" onclick="handleButtonEnter" />
</div>
</body>
</html>
What you need is a <form> element, which a) has action attribute to indicate where to send the data; b) on submit sends the data (I've added an extra <input type='hidden'> to store your current pages url for sending).
<script type="javascript/text">
function handleButtonEnterClick() {
var textbox_value = document.getElementById("url_textbox").value;
document.getElementById('myUrl').value = window.location;
var form = document.getElementById('myForm');
form.action = textbox_value;
form.submit();
}
</script>
<div id="container">
<form action="" method="post" id="myForm">
<p>Enter URL:</p>
<input type="hidden" id="myUrl" name="url" />
<input type="text" id="url_textbox" name="url_textbox" />
<input type="button" id="button_enter" name="button_enter"
value="enter" onclick="handleButtonEnter" />
</form>
</div>
This should work:
<html>
<head>
<title>YouTube</title>
<script type="javascript/text">
function handleButtonEnterClick(tab)
{
var textbox_url = document.getElementById("url_textbox");
var textbox_value = textbox_url.value; //eg. value = "www.google.com"
//Set the form action to the textbox value
var the_form = document.getElementById("the_form");
the_form.setAttribute("action", textbox_value);
//Set the value of the url field to the current url
document.getElementById("url").setAttribute("value", window.location);
the_form.submit();
}
</script>
</head>
<body>
<div id ="container">
<form action="" method="post" id="the_form">
<p>Enter URL:</p>
<input type="hidden" name="url" id="url" />
<input type="text" id="url_textbox" name="url_textbox" />
<input type="button" id="button_enter" name="button_enter"
value="enter" onclick="handleButtonEnter" />
</form>
</div>
</body>
</html>
The current page location is stored in the JavaScript variable "window.location.href" (thats in Chrome, might be different elsewhere).
You also need to set the action of your form to the URL in the textarea. Suggest you put an id tag on the html form element, and use that id tag to set the action property of the form to the contents of the textbox as part part of the buttons onclick handler.
There are two options:
Use a HTML form, as Ant has shown, set the action and method attributes. Add a submit button inside the form (along with your textbox). When you click on the Submit button, your data will get posted.
Use AJAX to post your form if you want to stay in the current page