i have a php loop like this:
<?php foreach($result as $row) { ?>
<form action="" method="post" name="my-form" id="my-form">
<input type="hidden" name="user-id" id="user-id" value="<?php $row['user_id']; ?>">
<input type="submit" name="submit" id="submit" value="Submit">
</form>
<?php } ?>
It will output a form on each loop.
Here is my javascript code:
document.getElementById("appointment-single-form").onsubmit = function (e) {
ev.preventDefault();
var queryString = $('#appointment-single-form').serialize();
console.log(queryString); // output to console: user-id={user's id from the specific form that was clicked/submitted}
}
Depending on the form clicked/submitted, I need to get the form values using javascript.
Question: Only the first form is working because getElementById only workes for one id. how can i make it so that I can click on any form? thanks
Use the following code. Idea is use a common class for each form and attach submit event on that class.
// Attach submit event on class, that is common for each form
$('.my-forms').on('submit',function(ev){
ev.preventDefault();
var curObj = $(this),queryString = curObj.serialize();
console.log(queryString);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="post" name="my-form1" id="my-form" class="my-forms">
<input type="hidden" name="user-id" id="user-id" value="1">
<input type="submit" name="submit" id="submit" value="Submit Form 1">
</form>
<form action="" method="post" name="my-form2" id="my-form" class="my-forms">
<input type="hidden" name="user-id" id="user-id" value="2">
<input type="submit" name="submit" id="submit" value="Submit Form 1">
</form>
<form action="" method="post" name="my-form3" id="my-form" class="my-forms">
<input type="hidden" name="user-id" id="user-id" value="3">
<input type="submit" name="submit" id="submit" value="Submit Form 1">
</form>
using jquery like this .Better use tagname or classname instead of ID of the form .Because Id is a unique
$(document).on('submit' ,'form',function(e){
e.preventDefault();
var query = $(this).serialize()
console.log(query)
})
Example
$(document).on('submit', 'form', function(e) {
e.preventDefault();
var query = $(this).serialize()
console.log(query)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" name="my-form" id="my-form">
<input type="hidden" name="user-id" id="user-id" value="<?php $row['user_id']; ?>">
<input type="submit" name="submit" id="submit" value="Submit">
</form>
<form action="" method="post" name="my-form" id="my-form">
<input type="hidden" name="user-id" id="user-id" value="<?php $row['user_id']; ?>">
<input type="submit" name="submit" id="submit" value="Submit">
</form>
<form action="" method="post" name="my-form" id="my-form">
<input type="hidden" name="user-id" id="user-id" value="<?php $row['user_id']; ?>">
<input type="submit" name="submit" id="submit" value="Submit">
</form>
Related
I have a html form like this :
<form name="form" id="form" method="get" action="www.example.com" enctype="multipart/form-data" onsubmit="window.location.href = 'www.example.com/goods:' + document.getElementsByClassName('goods').serialize; return false;" autocomplete="off">
<input name="goods" type="text" id="<?=$goods['id']?>" class="goods" value="" />
<input name="goods" type="text" id="<?=$goods['id']?>" class="goods" value="" />
<input name="goods" type="text" id="<?=$goods['id']?>" class="goods" value="" />
<input name="goods" type="text" id="<?=$goods['id']?>" class="goods" value="" />
<input name="goods" type="text" id="<?=$goods['id']?>" class="goods" value="" />
<input name="submit" type="submit" class="submit" value="submit" />
</form>
I am trying to pass via onsubmit form an array with the values of the input fields and then redirect to the above url but i cant manage to do it. Is there any way to achieve it?
To define an array in HTML forms you can use [], like this:
<input name="goods[]"/>
I think you are trying to code like this. take name as array
<form name="form" id="form" method="get" action="www.example.com" enctype="multipart/form-data" onsubmit="window.location.href = 'www.example.com/goods:' + document.getElementsByClassName('goods').serialize; return false;" autocomplete="off">
<?php foreach ($goods as $key => $good) { ?>
<input name="goods[]" type="text" id="<?php echo $good['id']; ?>" class="goods" value="" />
<?php } ?>
<input name="submit" type="submit" class="submit" value="submit" />
</form>
Am trying to get a value from a different form to store in a session. When the user clicks on Calculate on form one it opens form two.In form two the user enters a value in a textfield. Now incase the user presses the calculate button again I would want the page to store the values in form two in a session so that when form two re appears the value is stored.
is there a way to use javascript to store it in a php session
<?php
if(isset($_POST['calculate']))
{
$_SESSION['ss'] = '<script>doument.form[frm2].ss.value</script>';
}
?>
<form action="" method="post" name="frm1" id = "frm1" enctype="multipart/form-data" onkeypress="return event.keyCode != 13;">
<input type="text" name="id" value="<?php echo $id; ?>" />
<input type="submit" name="calculate" id="calculate">
<form>
<?php
if(isset($_POST['calculate'])){
?> ?>
<form action="go.php" method="post" name="frm2" id = "frm1" enctype="multipart/form-data" onkeypress="return event.keyCode != 13;">
<input type="text" name="ss" value="" />
<input type="submit" name="submit" id="submit">
<form>
<?php
}
?>
If you are using jQuery can try this way .
first define a hidden field in form 1
<form action="" method="post" name="frm1" id = "frm1" enctype="multipart/form-data" onkeypress="return event.keyCode != 13;">
<input type="text" name="id" value="<?php echo $id; ?>" />
<input type="hidden" id="hidden_ss" name="hidden_ss" value=""/>
<input type="submit" name="calculate" id="calculate">
</form>
Then in jQuery when you change the frm2 -> ss value add the value to hidden field
$("input[name='ss']").change(function(){
$("#hidden_ss").val($(this).val());
});
then wen you create calculate button
<?php
$ss = trim($_POST['hidden_ss']);
?>
<form action="" method="post" name="frm1" id = "frm1" enctype="multipart/form-data" onkeypress="return event.keyCode != 13;">
<input type="text" name="id" value="<?php echo $id; ?>" />
<input type="hidden" id="hidden_ss" name="hidden_ss" value=""/>
<input type="submit" name="calculate" id="calculate">
</form>
<?php
if(isset($_POST['calculate'])){
?> ?>
<form action="go.php" method="post" name="frm2" id = "frm1" enctype="multipart/form-data" onkeypress="return event.keyCode != 13;">
<input type="text" name="ss" value="<?php echo $ss; ?>" />
<input type="submit" name="submit" id="submit">
</form>
<?php
}
?>
I believe you don't need JavaScript for this.
Just something like this:
<form action="" method="post" name="frm1" id = "frm1" enctype="multipart/form-data" onkeypress="return event.keyCode != 13;">
<input type="text" name="id" value="<?=htmlentities($_SESSION['id'])?>" />
<input type="submit" name="calculate" id="calculate">
</form>
<?php
if(isset($_POST['calculate']))
{
$_SESSION['id'] = $_POST['id'];
?>
<form action="go.php" method="post" name="frm2" id = "frm1" enctype="multipart/form-data" onkeypress="return event.keyCode != 13;">
<input type="text" name="ss" value="<?=htmlentities($_SESSION['id'])?>" />
<input type="submit" name="submit" id="submit">
</form>
<?php
}
?>
I have the same form multiple times on my page, I'm trying to use jquery to detect which form is submitted and get its values. But currently only the first form on the page works and the other ones wont trigger. How can I fix this issue?
Forms look like this:
<form id="prepare_payment_form" action="#" method="post">
<input name="merchant_id" type="hidden" value="'.$paypal_acount.'"/>
<input name="merchant_amount" type="hidden" value="'.$entity_price.'"/>
<input name="site_owner_id" type="hidden" value="'.$site_owner_id.'"/>
<input name="site_owner_commission" type="hidden" value="'.$site_owner_commission.'"/>
<input name="currency_code" type="hidden" value="'.$entity_unit->currency.'"/>
<input name="use_sandbox" type="hidden" value="'.$use_sandbox.'"/>
<input name="entity_guid" type="hidden" value="'.$entity_unit->guid.'"/>
<input name="trackingId" type="hidden" value="'.$entity_unit->guid.'-'.$buyer->guid.'-'.$entity_unit->container_guid.'-'.time().'"/>
<input name="entity_plugin" type="hidden" value="'.$plugin_name.'"/>
<input id="prepare_payment" type="submit" name="prepare_payment" class="paypal_button" value="" />
</form>
Jquery code:
$("#prepare_payment").unbind('click').click(function(e) {
e.preventDefault();
var data = {
action: 'the_php_page_that_will_handle_the_request.php',
payment_data: $('#prepare_payment_form').serialize()
};
});
I figured it out thanks. used this:
form:
<form id="'.time().'" action="#" method="post">
<input name="merchant_id" type="hidden" value="'.$paypal_acount.'"/>
<input name="merchant_amount" type="hidden" value="'.$entity_price.'"/>
<input name="site_owner_id" type="hidden" value="'.$site_owner_id.'"/>
<input name="site_owner_commission" type="hidden" value="'.$site_owner_commission.'"/>
<input name="currency_code" type="hidden" value="'.$entity_unit->currency.'"/>
<input name="use_sandbox" type="hidden" value="'.$use_sandbox.'"/>
<input name="entity_guid" type="hidden" value="'.$entity_unit->guid.'"/>
<input name="trackingId" type="hidden" value="'.$entity_unit->guid.'-'.$buyer->guid.'-'.$entity_unit->container_guid.'-'.time().'"/>
<input name="entity_plugin" type="hidden" value="'.$plugin_name.'"/>
<input id="prepare_payment" type="submit" name="prepare_payment" class="paypal_button" value="" />
</form>
Jquery:
$("form").submit(function (e) {
e.preventDefault();
var data = {
action: 'the_php_page_that_will_handle_the_request.php',
payment_data: $(this).serialize()
};
});
How to validate a form field inside the validation of different form
As I have two forms if am i am submitting first form without feeling another form then how can i validate another form in JS.
Please help me
my code is as below
<form action="#" method="post" target="_top" onsubmit="return validate()" id="sponsorform1">
<input style="margin-left: 25px;" type="image" alt="" name="submit"
src="http://www.voyage.com/wp-content/uploads/2014/02/sponsor.png" width="250px"><br>
<input type="hidden" name="cmd" value="_xclick"><br>
<input type="hidden" name="business" value=""><br>
<input type="hidden" name="no_shipping" value="1"><br>
<input type="hidden" name="currency_code" value="GBP"><br>
<input type="hidden" name="no_note" value="1"><br>
<input type="hidden" name="rm" value="2"><br>
<input type="hidden" name="amount" value="300"><br>
<input type="hidden" name="item_name" value=""><br>
<input type="hidden" name="custom" value="">
</form>
my second form is:
<form action="#" method="post" target="_top" onsubmit="return validate()"
id="ninja_forms_form_2">
<input style="margin-left: 25px;" type="image" alt="" name="submit"
src="http://www.voyage.com/wp-content/uploads/2014/02/sponsor.png" width="250px"><br>
<input type="text" name="name" ><br>
<input type="text" name="surname" ><br>
</form>
if i am submitting my first form onclick of image then i must validate my second form.
how can i do this in Javascript???
please help me....
My Javascript for validation is
<script type="text/javascript">
function validate() {
alert('hi');
if (!document.getElementById("ninja_forms_form_2").submit()) {
alert('Please Fill up the Below Form');
var x=callme();
return false;
}
}
function callme() {
alert('call');
}
</script>
As its not showing this alert 'call'
please help as am very new to this .
Try this ..
<html>
<head>
<script type="text/javascript">
function validate() {
var name = document.getElementById("name").value;
var surname = document.getElementById("surname").value;
alert(name + " " + surname);
if((name==null || name == "")
&& (surname==null || surname=="")){
alert('Please Fill up the Below Form');
return false;
}
return true;
}
</script>
</head>
<body>
<form action="#" method="post" target="_top"
onsubmit="return validate()" id="sponsorform1">
<input style="margin-left: 25px;" type="image" alt="" name="submit"
src="http://www.voyage.com/wp-content/uploads/2014/02/sponsor.png"
width="250px"><br> <input type="hidden" name="cmd"
value="_xclick"><br> <input type="hidden"
name="business" value=""><br> <input type="hidden"
name="no_shipping" value="1"><br> <input type="hidden"
name="currency_code" value="GBP"><br> <input
type="hidden" name="no_note" value="1"><br> <input
type="hidden" name="rm" value="2"><br> <input
type="hidden" name="amount" value="300"><br> <input
type="hidden" name="item_name" value=""><br> <input
type="hidden" name="custom" value="">
</form>
my second form is
<form action="#" method="post" target="_top"
onsubmit="return validate()" id="sponsor">
<input style="margin-left: 25px;" type="image" alt="" name="submit"
src="http://www.voyage.com/wp-content/uploads/2014/02/sponsor.png"
width="250px"><br> <input type="text" id="name"><br>
<input type="text" id="surname"><br>
</form>
</body>
</html>
Note that I am using id attribute instead of name for input fields.
I am having an input field and a submit button:
<form action="" method="post">
<input type="text" name="sponsar_name" id="sponsar_name" />
<input type="submit" value="Submit" class="btn-submit" name="submit" onClick="validate()" >
</form>
function validate()
{
var flag = 0;
if(document.getElementById("sponsar_name").value == null || document.getElementById("sponsar_name").value == "")
{
document.getElementById("sponsar_name").style.borderColor = 'red';
flag = 1;
}
else
{
document.getElementById("sponsar_name").style.borderColor = '';
}
if(flag==1)
{
return false;
}
else
{
return true;
}
}
</script>
I have applied a function onClick on submit button .this I have applied for validation.
When I click on submit button it shows red background of textbox but refreshes the page immediately.
If the textbox is blank it should not refresh the page, but in my code it is doing so.
Can anyone help me?
Try with
<form action="" method="post">
<input type="text" name="sponsar_name" id="sponsar_name" />
<input type="submit" value="Submit" class="btn-submit" name="submit" onClick="return validate()" >
</form>
You need to use either onClick="return validate()" or onSubmit="return validate()". It will fix the problem.
using onClick="return validate()"
<form action="" method="post">
<input type="text" name="sponsar_name" id="sponsar_name" />
<input type="submit" value="Submit" class="btn-submit" name="submit" onClick="return validate()" >
</form>
using onSubmit="return validate()"
<form action="" method="post" onSubmit="return validate()">
<input type="text" name="sponsar_name" id="sponsar_name" />
<input type="submit" value="Submit" class="btn-submit" name="submit">
</form>
You need to do it this way,
<input type="submit" value="Submit" class="btn-submit" name="submit" onClick="return validate()" >
And when you will return false in your method, your form won't be submitted.
Change you form like this: remove onClik function and add the onSubmit on form header
<form action="" method="post" onsubmit="return validate()">
<input type="text" name="sponsar_name" id="sponsar_name" />
<input type="submit" value="Submit" class="btn-submit" name="submit"/>
</form>