my code was working and taking my text from textbox to next page + my Input control to next page via js but suddenly there seems to be a blunder whats wrong in following code
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
var i=2;
function AddTextbox(){
container.innerHTML=container.innerHTML+'<input type="text" name="'+ i + '">';
i++;
}
</script>
</head>
<body>
<form action="next.php" method="post">
<input type="text" name="1" />
<input type="button" onClick="AddTextbox" name="btn" value="add" />
<input type="submit" name="submit" value="sub" />
<div id="container"></div>
</form>
</body>
</html>
<html>
<head>
<script>
function addElement(tag_type, target, parameters) {
//Create element
var newElement = document.createElement(tag_type);
//Add parameters
if (typeof parameters != 'undefined') {
for (parameter_name in parameters) {
newElement.setAttribute(parameter_name, parameters[parameter_name]);
}
}
//Append element to target
document.getElementById(target).appendChild(newElement);
}
</script>
</head>
<body>
<div id="targetTag"></div>
<input type="button" onClick="addElement('INPUT','targetTag',{id:'my_input_tag', name:'my_input_tag', type:'text', size:'5'}); return false;" value="Add Input Tag" />
<input type="button" onClick="addElement('INPUT','targetTag'); return false;" value="Add Input Tag W/O Parameters" />
</body>
</html>
Note If you bother to check the DOM after executing this in IE, you'll see that the name field is not available to you. IE declares this field to be read-only which is why you don't see it. The field will be properly submitted, however, as shown in this test code:
<?php
if (isset($_POST)) {
print '<pre>'.print_r($_POST,true).'</pre>';
}
?>
<html>
<head>
<script>
function addElement(tag_type, target, parameters) {
//Create element
var newElement = document.createElement(tag_type);
//Add parameters
if (typeof parameters != 'undefined') {
for (parameter_name in parameters) {
newElement.setAttribute(parameter_name, parameters[parameter_name]);
}
}
//Append element to target
document.getElementById(target).appendChild(newElement);
}
</script>
</head>
<body>
<form method="post">
<div id="targetTag"></div>
<input type="submit" value="Check"/>
</form>
<input type="button" onClick="addElement('INPUT','targetTag',{'id':'my_input_tag', 'name':'my_input_tag', 'type':'text', 'size':'5'}); return false;" value="Add Input Tag" />
<input type="button" onClick="addElement('INPUT','targetTag'); return false;" value="Add Input Tag W/O Parameters" />
</body>
</html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
var i=2;
$(document).ready(function() {
$('#button').click(function(){
$('#container').append('<input type="text" name="'+ i + '"><br/>')
i++;
});
});
</script>
</head>
<body>
<form action="next.php" method="post">
<input type="text" name="1" />
<input type="button" id="button" name="btn" value="add" />
<input type="submit" name="submit" value="sub" />
<div id="container"></div>
</form>
</body>
</html>
use click function. is this you need?
Related
This is my first page index.php:
<body>
<div id="nerde2"> </div>
<div id="nerde1"> </div>
<input type="button" value="ilk update" id="update" />
<!-- <input type="button" value="ilk save" id="save" />-->
ilk save
<script src="Jquery_Projesi/js/bootstrap.min.js"></script>
<script src="Jquery_Projesi/js/js.js"></script>
<script src="get_post.js"></script>
</body>
This is my second page index2.php:
<body>
<?php
if(isset($_GET['savee'])){
?>
<form action="" method="post">
<input type="submit" value="save">
<input type="text" name="a">
</form>
<?php
}
?>
<?php
if(isset($_GET['updatee'])){
?>
<form action="" method="post">
<input type="submit" value="update">
<input type="text" name="b">
</form>
<?php
}
?>
</body>
This is my third page get_post.js:
$(document).ready(function(){
"use strict";
$('#update').click(function(){
$('#nerde2').hide(1000);
$('#nerde1').show(3000);
var vall="veri gonderildi";
$.get('index2.php',{updatee:vall},function(data){
$('#nerde1').html(data);
});
});
$('#save').click(function(){
$('#nerde1').hide(1000);
$('#nerde2').show(3000);
var vall="veri gonderildi";
$.get('index2.php',{savee:vall},function(data){
$('#nerde2').html(data);
});
});
});
When i click save or update button, i want to show index2.php functions on the index.php page.
I used a get method in jquery.js and everything is working but when i am using an , page is refreshing and nothing appends inside to the index.php
You need to stop the default event propagation. Try adding the following to your code
$('#update').click(function(e){
e.preventDefault();
$('#nerde2').hide(1000);
$('#nerde1').show(3000);
var vall="veri gonderildi";
$.get('index2.php',{updatee:vall},function(data){
$('#nerde1').html(data);
});
return false;
});
I want this login form to submit automatically when the page loads. I am using IP address for registration so do not want a login button.
<form action="<?=$_SERVER['PHP_SELF']?>" method="post">
<input type="hidden" name="ip_address" /><br />
<input type="submit" name="submit" value="Login" />
</form>
You can do something like:
<form id="my_form" action="<?= $_SERVER['PHP_SELF'] ?>" method="post">
<input id="ip_address" type="hidden" name="ip_address" /><br />
<input type="submit" name="submit" value="Login" />
</form>
<script>
$(document).ready(function(){
if($("#ip_address").val() != "")
{
$("#my_form").submit();
}
});
</script>
Note: you must add JQuery library in your web page.
In case you don't use jQuery:
<body onload="javascript:submitonload();">
<form id="my_form" action="<?=$_SERVER['PHP_SELF'];?>" method="post">
<input type="hidden" name="ip_address" value="<?=(isset($_SERVER['REMOTE_ADDR']) ? $_SERVER['REMOTE_ADDR'] : '');?>" />
<br />
<input type="submit" name="submit" value="Login" />
</form>
<script type="text/javascript">
function submitonload() {
document.getElementById('my_form').submit();
}
</script>
</body>
Using JavaScript:
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="POST" id="my-form">
<input type="hidden" name="ip_address" /><br />
<input type="submit" name="submit" value="Login" />
</form>
<script>
//Once the page is loaded, submit the form
document.addEventListener("DOMContentLoaded", function(event) {
//The id of your form.
var idOfYourForm = "my-form";
document.getElementById(idOfYourForm).submit();
});
</script>
You just need to set the id attribute to your form and set the variable idOfYourForm, so the JavaScript will be able to submit your form.
This method use pure JavaScript, no jQuery or other library.
See DOMContentLoaded event.
I am unable to load external file while using AJAX jQuery. I want to use jQuery AJAX to pop up form then validate, enter data in MySQL. but starting from a simple AJAX function. Kindly let me know where I am going wrong
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="test_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("#ajax-contact-form").submit(function(){
var str = $(this).serialize();
$.ajax({
type: "POST",
url:"contact.php",
data: str,
success:function(result) {
$("#div1").html(result);
}
});
});
});
</script>
</head>
<body>
<div id="contact_form">
<form id="ajax-contact-form" name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input"/>
<label class="error" for="name" id="name_error">This field is required.</label>
<input class="button" type="submit" name="submit" value="Send Message">
</fieldset>
</form>
</div>
</body>
</html>
and contact.php file is
<?php
echo "Hello";
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="test_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$(".button").click(function() {
$.ajax({url:"contact.php",success:function(result){
$("#div1").html(result);
}});
return false;
});
});
</script>
</head>
<body>
<div id="contact_form">
<form name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
</div>
<div id="div1">
</div>
</body>
</html>
Try that:
What needed to be fixed:
1) You'd duplicated the onReady function,
2) you can use a submit form button, but since it's default action is to submit the form, the result wouldn't have been visible.
3) There was no #div1 for the result to be displayed in.
Hopefully, this has been helpful... Happy Coding!
Try with type button type
<input type="button" name="submit" class="button" id="submit_btn" value="Send" />
And also your both scripts are same use either DOM ready or $(function) like
<script>
$(document).ready(function(){
$(".button").click(function(){
$.ajax({url:"contact.php",success:function(result){
$("#div1").html(result);
}});
});
});
</script>
button is your class name so that it will represented like .button And create an div with id div1 at your html page
$("#div1").html(result);
Use one div which id is div1 inside your page which you want to show the result.
<div id="div1"></div>
How to submit this form without using submit button. I want to submit it in loading this form,
<form name="frm1" id="frm1" action="../somePage" method="post">
Please Waite...
<input type="hidden" name="uname" id="uname" value="<?php echo $uname;?>" />
<input type="hidden" name="price" id="price" value="<?php echo $price;?>" />
</form>
You don't need Jquery here!
The simplest solution here is (based on the answer from charles):
<html>
<body onload="document.frm1.submit()">
<form action="http://www.google.com" name="frm1">
<input type="hidden" name="q" value="Hello world" />
</form>
</body>
</html>
You can try also using below script
<html>
<head>
<script>
function load()
{
document.frm1.submit()
}
</script>
</head>
<body onload="load()">
<form action="http://www.google.com" id="frm1" name="frm1">
<input type="text" value="" />
</form>
</body>
</html>
Do this :
$(document).ready(function(){
$("#frm1").submit();
});
You can do it by using simple one line JavaScript code and also be careful that if JavaScript is turned off it will not work. The below code will do it's job if JavaScript is turned off.
Turn off JavaScript and run the code on you own file to know it's full function.(If you turn off JavaScript here, the below Code Snippet will not work)
.noscript-error {
color: red;
}
<body onload="document.getElementById('payment-form').submit();">
<div align="center">
<h1>
Please Waite... You Will be Redirected Shortly<br/>
Don't Refresh or Press Back
</h1>
</div>
<form method='post' action='acction.php' id='payment-form'>
<input type='hidden' name='field-name' value='field-value'>
<input type='hidden' name='field-name2' value='field-value2'>
<noscript>
<div align="center" class="noscript-error">Sorry, your browser does not support JavaScript!.
<br>Kindly submit it manually
<input type='submit' value='Submit Now' />
</div>
</noscript>
</form>
</body>
using javascript
<form id="frm1" action="file.php"></form>
<script>document.getElementById('frm1').submit();</script>
You missed the closing tag for the input fields, and you can choose any one of the events, ex: onload, onclick etc.
(a) Onload event:
<script type="text/javascript">
$(document).ready(function(){
$('#frm1').submit();
});
</script>
(b) Onclick Event:
<form name="frm1" id="frm1" action="../somePage" method="post">
Please Waite...
<input type="hidden" name="uname" id="uname" value=<?php echo $uname;?> />
<input type="hidden" name="price" id="price" value=<?php echo $price;?> />
<input type="text" name="submit" id="submit" value="submit">
</form>
<script type="text/javascript">
$('#submit').click(function(){
$('#frm1').submit();
});
</script>
I have function like this in my header
function bingframe() {
var iframe = document.getElementById('bframe');
iframe.src = 'http://www.bing.com/search?q=' + document.searchForm.search.value.replace(/ /g,'+') + '&go=&form=QBLH&filt=all&qs=n&sk=';
}
So now when i call this function it responds in Google Chrome,Firefox and the modern browsers but not Internet explorer.
Can any of you modify the code accordingly ?
Thanking You.
Works for me - IE8
<html>
<head>
<title></title>
<script>
function bingframe(theForm) {
var iframe = document.getElementById('bframe');
var url = 'http://www.bing.com/search?q=' + escape(theForm.search.value).replace(/ /g,'+') + '&go=&form=QBLH&filt=all&qs=n&sk=';
iframe.src = url;
return false
}
window.onload=function() {
document.forms[0].search.focus();
}
</script>
</head>
<body>
<form name="searchForm" onSubmit="return bingframe(this)">
<input type="text" name="search" value="" />
<input type="submit">
</form>
<iframe id="bframe" src="about:blank" width="100%" height="100%"></iframe>
</body>
</html>
however so does this - no script necessary:
<html>
<head>
<title></title>
<script>
window.onload=function() {
document.forms[0].q.focus();
}
</script>
</head>
<body>
<form name="searchForm" action="http://www.bing.com/search" target="bframe">
<input type="text" name="q" value="" />
<input type="hidden" name="go" value="" />
<input type="hidden" name="form" value="QBLH" />
<input type="hidden" name="filt" value="all" />
<input type="hidden" name="qs" value="n" />
<input type="hidden" name="sk" value="" />
<input type="submit">
</form>
<iframe name="bframe" src="about:blank" width="100%" height="100%"></iframe>
</body>
</html>