I have two forms, first form contains the textbox and second form contains a button. I want to validate the textbox using the button (jquery or javascript) :
<form name="contactus" method="post">
<input name="txtFirstname" id="Firstname" type="text" class="field" Value="First name*" style="width:300px" />
</form>
<form name="frm1" action="sendemail.php" method="post">
<input id="send" type="image" src="images/sub.png" alt="Submit" style="float:right" />
</form>
how would i be able to do this when my textbox is not on 'frm1'
Here are examples of the two approaches I suggested in the comments above:
1) Using Javascript to alter the action attribute of the form depending on the button that was clicked:
<form id='the_form' action='' method='post'>
<input type='text' name='text_input' />
<input type='button' id='button_1' value='Button 1' />
<input type='button' id='button_2' value='Button 2' />
</form>
<script type='text/javascript'>
var theForm = document.getElementById('the_form');
$('#button_1').click(function() {
theForm.action = 'script1.php';
theForm.submit();
});
$('#button_2').click(function() {
theForm.action = 'script2.php';
theForm.submit();
});
</script>
2) Holding all the submit handler code in a single script (recommended):
HTML:
<form id='the_form' action='script.php' method='post'>
<input type='text' name='text_input' />
<input type='submit' name='submit_1' value='Submit' />
<input type='submit' name='submit_2' value='Submit' />
</form>
PHP:
<?php
if (isset($_POST['submit_1'])) {
echo 'You clicked button 1';
} else if (isset($_POST['submit_2'])) {
echo 'You clicked button 2';
}
Did you try this?
$('#send').click(function(){
var textVal = $('#Firstname').val();
//your validation code goes here
});
Related
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.
var el = document.getElementById('btn1');
el.addEventListener('click', function() {
var hidEl = document.getElementById('hidElement');
hidEl.value = 'Add';
var form = document.getElementsByTagName('form');
form.submit();
});
var el2 = document.getElementById('btn2');
el2.addEventListener('click', function() {
var hidEl = document.getElementById('hidElement');
hidEl.value = 'Print';
var form = document.getElementsByTagName('form');
form.submit();
});
<?php
if($_POST["hidElement"]=='Add')
echo "add";
else
echo "Print";
?>
<form action="" method="">
<input type="text" name="nasir" >
<input type="hidden" name="hidElement" id="hidElement" />
<input type="button" id="btn1" value="Submit & Add">
<input type="button" id="btn2" value="Submit & Print">
</form>
<?php
if(isset($_POST["yasir"]))
echo "Submit & Print";
else
echo "Submit & Add";
?>
<form action="" method="">
<input type="text" name="nasir" >
<input type="submit" value="Submit & Add">
</form>
<input type="hidden" name="yasir">
<input type="submit" value="Submit & Print">
</form>
There is no second starting for second form. I want both forms use same , but how PHP will recognize which form button has been pressed. I tried above but in both cases it submiting second yasir hidden input!!!
There is alot of inputs in first form.
please try this
<form action="" method="post">
<input type="text" name="nasir" >
<input type="submit" value="Submit & Add" name="first_btn">
<input type="hidden" name="yasir">
<input type="submit" value="Submit & Print" name="second_btn">
</form>
in php you can check by using this
<?php
if(isset($_POST['first_btn'])){
/*first form submit*/
}
if(isset($_POST['second_btn'])){
/*second form submit*/
}
?>
For every there should be an end also. Otherwise it will not work
try
<form action="" method="post">
<input type="text" name="nasir" >
<input type="submit" value="Submit & Add" name="btn1">
<input type="hidden" name="yasir">
<input type="submit" value="Submit & Print" name="btn2">
</form>
In that case it's better to use javascript to handle form post. You can add to buttons to same form for add and print and handle click on them using javascript. Something like below:
<form action="" method="" id="form">
<input type="text" name="nasir" >
<input type="hidden" name="hidElement" id="hidElement" />
<input type="button" id="btn1" value="Submit & Add">
<input type="button" id="btn2" value="Submit & Print">
</form>
In javascript
var el = document.getElementById('btn1');
el.addEventListener('click', function() {
var hidEl = document.getElementById('hidElement');
hidEl.value = 'Add';
var form = document.getElementById('form');
form.submit();
});
var el2 = document.getElementById('btn2');
el2.addEventListener('click', function() {
var hidEl = document.getElementById('hidElement');
hidEl.value = 'Print';
var form = document.getElementById('form');
form.submit();
});
In Php you can check based on hidElement value.
i have two file and two forms:
file 1:
<form name="name1" action="form2.php" method="post">
<input <? $_session['define'] = 'value1' ?> type="submit" ...>
</form>
<form name="name2" action="form2.php" method="post">
<input <? $_session['define'] = 'value2' ?> type="submit" ...>
</form>
As you see i have two forms and two different submit buttons but when i press each of them, the second value (the last) set to the $_session['define'] and in the second form i always have 'value2'.
You must post the data to PHP:
<form name="name1" action="form2.php" method="post">
<input name='v1' value='1' type="submit" />
</form>
<form name="name2" action="form2.php" method="post">
<input name='v2' value='2' type="submit" />
</form>
In form2.php:
<?php
session_start();
$_SESSION['value1'] = isset($_POST['v1'])?$_POST['v1']:0;
$_SESSION['value2'] = isset($_POST['v2'])?$_POST['v2']:0;
?>
Personally, I would make it one form and use JQuery/AJAX to POST the values.
<form id="selectForm" name="name1" action="form2.php" method="post">
<input id="v1" name='v1' value='1' type="submit" />
<input id="v2" name='v2' value='2' type="submit" />
</form>
<script>
// Requires JQuery
$("#selectForm input[id^='v']").click(function(e){
e.preventDefault();
$.post(form2.php, { $(this).attr("name"): $(this).attr("value") }, function(){ alert("Selection Saved.) });
});
</script>
<?php
echo $_POST['textvalue'];
echo $_post['radiovalue'];
?>
<div id="hidethis">
<form method="POST" action="">
<label>Tekst Value</label>
<input type="text" name="textvalue">
<label>Radio Value</label>
<input type="radio" name="radiovalue" value="autogivevalue">
<input type="submit" id="submit" name="submit" value="submit">
</div>
http://jsfiddle.net/Bjk89/2/ here is it with the jQuery.
What i try to do is to hide the <div id="hidethis"> when it's clicking submit.
I know i can make another page where i can recieve the values without the <form> section, but i want to put both in one page, make the <div id="hidethis"> hidden after submit.
So i'll be able to get echo $_POST['textvalue']; and echo $_post['radiovalue']; as results
RESULT MUST BE LIKE
A Text // This is the value you input into Tekst Value
autogivevalue // This is the value from the radio button
----- INVISIBLE -----
<form is hidden because we set it in jQuery so>
</form>
Try this. No need to use jQuery here.
<?php
if($_POST) {
echo $_POST['textvalue'];
echo $_post['radiovalue'];
} else {
?>
<form method="POST" action="">
<label>Tekst Value</label>
<input type="text" name="textvalue">
<label>Radio Value</label>
<input type="radio" name="radiovalue" value="autogivevalue">
<input type="submit" id="submit" name="submit" value="submit">
</form>
<?php
}
?>
Try adding '#' in your jquery code. Your version does not have # next to submit. Also your form is missing a closing tag here and in your JSFiddle code.
Try this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#submit').click(function () {
$('form').submit();
$('#hidethis').hide();
});
});
</script>
<form method='post' id="hidethis" name='form'>
<input type="text" name="textvalue">
<input type="radio" name="radiovalue" value="1">
<input type="button" id="submit" name="submit" value="submit">
</form>
I had two forms
login form
Registration form
login form has the username and password fields and registration form consists controls for registration like username, city, country, etc.,
Also, I have some hidden controls like
<input type="hidden" name="ctrl1" />
<input type="hidden" name="ctrl2" />
<input type="hidden" name="ctrl3" />
<input type="hidden" name="ctrl4" />
Which is dynamically generated using PHP Code.
What I want is, When the user click login form's submit or the registration form's submit, the hidden controls data should also be Posted.
Insert the hidden inputs into both forms when you generate the page:
<form id='form1' action='' method='post'>
<input type='hidden' name='h1' value='v1' />
<input type='hidden' name='h2' value='v2' />
<input type='hidden' name='h3' value='v3' />
<input type='submit' name='submit' value='Submit Form 1' />
</form>
<form id='form2' action='' method='post'>
<input type='hidden' name='h1' value='v1' />
<input type='hidden' name='h2' value='v2' />
<input type='hidden' name='h3' value='v3' />
<input type='submit' name='submit' value='Submit Form 2' />
</form>
Use this example, definitely it will help you.
<SCRIPT LANGUAGE="JavaScript">
function runscript()
{
document.form1.submit();
document.form2.submit();
}
</SCRIPT>
<BODY>
<FORM METHOD=POST ACTION="http://localhost/login.php" NAME="form1">
<INPUT TYPE="text" NAME="text1">
</FORM>
<FORM METHOD=POST ACTION="http://localhost/register.php" NAME="form2">
<INPUT TYPE="text" NAME="text2">
</FORM>
<INPUT TYPE="button" value="Submit" onClick="runscript()">
</BODY>
Use jQuery's serialize on one of the forms.