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>
Related
I want us javascript to submit my html form.
I try two method.
The first one is good for me.
function formSubmit() {
document.getElementById("myForm").submit()
}
<form id="myForm" action="" method="get">
firstname：<input type="text" name="firstname" size="20"><br />
Last name：<input type="text" name="lastname" size="20"><br />
<br />
<input type="button" onclick="formSubmit()" value="submit" >
</form>
otherwise,the second one can not work for me
window.addEventListener("click", function(event){
event.preventDefault();
document.getElementById("myForm2").submit() }
)
});
<form id="myForm2" action="" method="get">
firstname：<input type="text" name="firstname" size="20"><br />
Last name：<input type="text" name="lastname" size="20"><br />
<br />
<input type="button" value="submit" >
</form>
All i want to do is to use addeventlistner method to submit form
Here is a way to do it.
function formSubmit() {
document.getElementById("myForm").submit()
}
document.getElementById("submitBtn").addEventListener("click", function(event) {
event.preventDefault()
document.getElementById("myForm").submit()
})
<form id="myForm" action="https://google.com" method="get">
First name:
<input type="text" name="firstname" size="20">
<br /> Last name：
<input type="text" name="lastname" size="20"><br />
<br />
<button id="submitBtn" type="button" onclick="formSubmit()">Submit</button>
</form>
You can use input type like this
<form id="myForm2" action="" method="get">
firstname：<input type="text" name="firstname" size="20"><br />
Last name：<input type="text" name="lastname" size="20"><br />
<br />
<input type="submit" value="submit" >
</form>
and submit event for related form
document.getElementById("myForm2").addEventListener("submit", function() {
console.log("submitted")
})
I have added the hidden field in the form and inserting the data into the database. I have 16 fields on my page and If the user enters any value in the field then I have to change the value from 0 to 1 in the input field.
I tried the below code but it's not working.
$(document).ready(function() {
//Check this link
$(".onchangefield").change(function() {
var val = $(this).closest(".onchangefield").find(".haschange").val(1);
//$(".haschange").val(1);
alert(val);
});
});
<form action="process.php" name="employee" method="post">
<input type="text" name="name" class="onchangefield">
<input type="hidden" name="haschange[name]" class="haschange" value="0" />
<input type="email" name="email" class="onchangefield">
<input type="hidden" name="haschange[email]" class="haschange" value="0" />
<button type="submit" name="save">Save</button>
<button type="submit" name="send_for_approval">Send to approval</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
How to change the value in the foreach.
<?php
$i=1;
$arrayName = array('1','2','3');
foreach ($arrayName as $key => $value) {?>
<input type="file" name="slider[]" class="fileupload onchangefield">
<input type="hidden" name="haschange[slider][<?php echo $i;?>]" class="haschange" value="">
<?php $i++; } ?>
You can use .next() to get the reference of next input and change value there .
Demo Code :
$(".onchangefield").change(function() {
var selector = $(this).next() //get next input..
selector.val($(this).val() != "" ? 1 : 0) //depending on value change value of next
});
<form action="process.php" name="employee" method="post">
<input type="text" name="name" class="onchangefield">
<input type="text" name="haschange[name]" class="haschange" value="0" />
<input type="email" name="email" class="onchangefield">
<input type="text" name="haschange[email]" class="haschange" value="0" />
<button type="submit" name="save">Save</button>
<button type="submit" name="send_for_approval">Send to approval</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
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>
I have multiple forms in same page with submit , i want to hide the form after form submit and display a link for the respective forms
Below is the html i have the same class name for all the forms
and for the submit class also.
<div id="wpcf7-f63-p1-o1">
<form name="" class="wpcf7-form" action="" method = "post">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</form>
</div>
<div id="wpcf7-f63-p1-o2">
<form name="" class="" action="" method = "post">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</form>
</div>
i tried the below code
<script>
jQuery(".wpcf7-form").submit(function()
{
jQuery("^wpcf7-f63-p1-").hide();
});
</script>';
In your example typed:
jQuery("^wpcf7-f63-p1-").hide();
i think should be:
jQuery("#wpcf7-f63-p1-o1").hide();
Use this on form submit
$('input[type="submit"]').click(function() {
$form = $(this).parent();
$('<p>link to form</p>').insertBefore($form);
$form.hide();
});
Are you looking for jquery .find() ?
you could do something like this:
$('form').submit(function(){
$(this).find('.myForm').hide();
$(this).find('.link').show();
}
.link {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="" class="" action="" method = "post">
<div class="myForm">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</div>
<a class="link" href="#">Link</a>
</form>
ah error on your jquery selector, change your js to:
jQuery(".wpcf7-form").submit(function()
{
jQuery("[id^='wpcf7-f63-p1-']").hide()
return false;
});
working jsfiddle code
NB. you may need to delete the return false, I added it to see the elements getting disappeared after submit.
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.