I have a external page loaded using scripts inside a form of a current page, and tried to call the inputs on the external page to be sent from a form inside the current page. It seems like the data on the external page cannot be sent from the current form. Can somebody please tell me why?
Here are example codes to explain the situation.
PAGE A
<form method="post" action="testing.php">
<input type="hidden" name="program" value="diploma"/>Diploma/Foundation
<input type="hidden" name="program" value="bachelor"/>Bachelor Degree
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function loadPageIntoDiv(url) {
var $div = $("div#imgbox");
$div.load(url, function() {
$div.find("a").on("click", function(evt) {
var $link = $(this);
loadPageIntoDiv($link.id("test"));
evt.preventDefault();
return false;
});
});
}
</script>
<div id="imgbox">
</div>
<input type="submit" name="submit" />
</form>
PAGE B
<div>Input1</div>
<div><input type="text" name="uubsss"</div>
<div>Input2</div>
<div><input type="text" name="uubbsssa"</div>
<div>Input3</div>
<div><input type="text" name="uubbasssab"</div>
the function to load div is in loadPageIntoDiv(), and will call diploma-foundation.php into the first A tag with an id of "test1"
please help me with this. Thank you in advance dear stackoverflow-ers.
Related
so here is what trying to get i need only a way to add ( onsubmit="submitted=true") to the form via javascript
and thank you guys
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
var submitted=false;
</script>
<iframe name="invisibleFrame" id="invisibleFrame" style="display:none;" onload="if(submitted)
{window.location='Confirmation.html';}">
</iframe>
<form action="https://link.com" method="post" target="invisibleFrame" onsubmit="submitted=true;" id="contact_form" autocomplete="on">
<label for="entry.164" class="phone" >phone</label><br>
<input type="text" name="entry.1647992981" placeholder="phone" required><br>
<label for="entry.1">name</label><br>
<input type="text" name="entry.1" placeholder="name" required><br>
<label for="entry.7">city</label><br>
<input type="text" name="entry.7" placeholder="city" required><br><br>
<button type="submit" class="order-button">submit</button>
</form>
</body>
</html>
actually im not good at all in coding so i just trying to get something done . thank you guys
Use addEventListener() to add a listener that does what you want.
<script>
document.querySelector("form").addEventListener("submit", function() {
submitted = true;
});
</script>
If you just want to make the iframe load the confirmation page when you submit the form, you can do that in the listener instead of setting the variable.
<script>
document.querySelector("form").addEventListener("submit", function() {
let iframe = document.querySelector("#invisibleFrame");
iframe.src = "Confirmation.html";
iframe.style.display = 'block';
});
</script>
I have html form and want to make a validation by submitting the form with its specific id and validate it using jquery.
Here is my code:
HTML
<html>
<head>
<script src="jquery-1.11.2.min" type="text/javascript"></script>
</head>
<body>
<form method="post" name="frmhot" id="contactform3412">
<input type="text" name="status"/>
<input type="text" name="line"/>
<input type="text" name="reason"/>
<input type="text" name="partnum"/>
<input type="text" name="badgescan"/>
<input class="button_text" type="submit" value="Submit"/>
</form>
<script type="text/javascript">
var url = "";
jQuery("#contactform3412").submit(function(e){
url= 'works well!';
});
alert(url);
</script>
</body>
For this example, i want to get the value of the javascript variable 'url' within the jQuery condition submit. Thanks in advance :)
Use this -> Fiddle
var url = "";
$("#contactform3412").submit(function(e){
url= 'works well!';
alert(url);
return true;
});
Anyways you set url value and perform operations after submit,so use url value there only. In your problem, url could not set to "works well" as submit event was not fired.
You're missing the js file extension in your script declaration. It should be
<script src="jquery-1.11.2.min.js" type="text/javascript"></script>
instead of
<script src="jquery-1.11.2.min" type="text/javascript"></script>
With that, if you wrap your submit handler in document.ready(), it should work on click of form submit.
$(document).ready(function(){
var url = '';
$('#contactform3412').on('submit', function(e){
e.preventDefault();
url= 'works well!';
alert(url);
});
});
I'm adding some content through form to the database and then reload this part of page to update the content. And then I want to add the next content and again reload but the .submit method I use, sends undefined instead of the written content. Here's the HTML code:
<form id="addForm" method="post" action="/addContent">
<input type="text" id="content" name="name" value="" placeholder="New content" required/><br/><br/>
<input name="submitted" id="submitted" value="Add content" class="submit" type="submit" />
</form>
And here's JS:
<script>
$('#addForm').submit(function() {
$.post('/addContent', {
data: $('#addForm').serializeArray(),
}, function(response) {
$('#contentPart').html(response);
});
return false;
});
</script>
Can anyone help me? I'll be gratefull.
You need to assign your event on any addForm form that may appear in DOM in the future:
$(document).on('submit', '#addForm', function() {
...
});
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 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