Javascript : How to dynamic form submit - javascript

i try with below code but it's not working Please help me if any one know
<script>
function update(i){
document.myform[i].submit();
}
</script>
<?php
for($i=0;$i<5;$i++){
?>
<form name="myform[]" action="act.php" method="POST">
<input type="text" name="fname" value="">
click here
</form>
<?php
}
?>

Just change the link for an input of type submit:
<form name="myform[]" action="act.php" method="POST">
<input type="text" name="fname" value="">
<input type="submit" name="aname" value="click here">
</form>
It will automatically submit the form where is contained, no need for this javascript:
<script>
function update(i){
document.myform[i].submit();
}
</script>
Edit:
in order to submit a form from javascript..
document.getElementsByName("myForm")[i].submit();

i got solution
<script>
function update(i){
console.log(i);
//alert(document.myform[i].fname.value);
var oForm = document.forms[i];
// alert(document.forms[i].fname.value);
// alert(oForm.fname.value);
oForm.submit();
//document.myform[i].submit();
}
</script>

<?php
for($i=0;$i<5;$i++){
?>
<form name="myform<?php echo $i;?>" action="act.php" method="POST">
<input type="text" name="fname_<?php echo $i;?>" id="fname_<?php echo $i;?>" value="">
click here
</form>
<?php
}
?>
<script>
function update(id){
var formName = jQuery(id).closest('form').attr('name')
alert(formName);
}
</script>
or js:
<script>
function update(id){
var el = document.getElementById(id);
var r3 = el.closest("form");
console.log(r3);
}
</script>

Related

How to fill textboxes based from combobox

I'm still learning Web programming and I'm having a problem on how I'm going to fill my 3 textBoxes based from chosen option in combobox.
I tried using php inside javascript but it seems I'm not doing it right. What I'm trying to do is to load the name, age and address of of a user based from the chosen option combobox so that I can update their data.
<?php
include("myconnection.php");
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script>
function listUpdate()
{
var ddl=document.getElementById("userlist");
var selectedOption=ddl.options[ddl.selectedIndex];
var nameNya=selectedOption.getAttribute("value");
console.log(nameNya);
var tb1=document.getElementById("nameid");
var tb2=document.getElementById("ageid");
var tb3=document.getElementById("addressid");
tb1.value="gago";
<?php
/*
$sql="SELECT * from users WHERE fullname='nameNya'";
mysqli_query($db,$sql);
$nameNyaa=$_POST['nameNya'];
echo $nameNyaa;*/
?>
}
</script>
</head>
<body>
<form action="updateuserprocess.php" method="POST">
<h1>UPDATE USER</h1>
<?php
$sql="SELECT * from users";
$result=mysqli_query($db,$sql);
echo '<select id="userlist" onChange="return listUpdate()">';
while($row=mysqli_fetch_array($result))
{
echo "<option value='".$row[3]."'>".$row[3]."</option>";
}
echo '</select>';
?>
<br>
<label>Name: </label>
<input type="text" name="name" placeholder="" id="nameid"><br>
<label>Age: </label>
<input type="text" name="age" placeholder="" id="ageid"/><br>
<label>Address: </label>
<input type="text" name="address" placeholder="" id="addressid"/><br>
<br>
<input type="submit" name="submit" value="OK"/>
<button type="submit" formaction="/myhome.php">Back</button>
</form>
</body>
</html>
<?php
if(isset($_POST["submit"]))
{
include("updateuserprocess.php");
}
?>
Try doing it like this
$('#mycomboboxID').change(function() {
var combobox_value = $('#mycomboboxID').val();
$('#myInput1').val('First');
$('#myInput2').val('Second');
$('#myInput3').val('Third');
}
You can do if statement inside as well,
and remember you need a jquery extension for this to work

How to set readonly all input beside input that user try to fill data?

How to set readonly all input except input that user try to fill data ?
When user loads page index.php and tries to fill data into EG: <input id="edValue2" ...>, I want to set readonly all input except <input id="edValue2" ...>
But my code not work, how can i do ?
index.php
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<html>
<body>
<form id="form-id" method="post" action="" ENCTYPE = "multipart/form-data" onsubmit="return checkform(this);">
<?PHP
for ($i=1;$i<=5;$i++)
{
?>
<input id="edValue<?PHP echo $i; ?>" type="text" onKeyUp="send_it_register_to_hidden_input<?PHP echo $i; ?>()" onKeyPress="send_it_register_to_hidden_input<?PHP echo $i; ?>()"><br>
<?PHP
}
?>
<br>
<br>
<br>
<input type="text" id="lblValue" value="">
<input type="text" id="lblValue_number" value="">
</form>
</body>
<?PHP
for ($i=1;$i<=5;$i++)
{
?>
<script>
function send_it_register_to_hidden_input<?PHP echo $i; ?>()
{
lblValue.value = $("#edValue<?PHP echo $i; ?>").val();
lblValue_number.value = <?PHP echo $i; ?>;
Check_register_it();
}
</script>
<?PHP
}
?>
<script>
function Check_register_it()
{
$('#form-id input').attr('disabled','disabled'); //disable all
$(this).removeAttr('disabled'); //enable the one that triggers the event
}
</script>
</html>
I strongly suggest don't create functions like that. It just makes your codes complicated. Use classes in this case so that you don't need to setup functions for each id that you want to manipulate:
<body>
<form id="form-id" method="post" action="" ENCTYPE = "multipart/form-data" onsubmit="return checkform(this);">
<?PHP for ($i=1;$i<=5;$i++) { ?>
<input class="input_boxes" type="text" data-i="<?php echo $i; ?>"><br/>
<?PHP } ?>
<br>
<br>
<br>
<input type="text" id="lblValue" value="">
<input type="text" id="lblValue_number" value="">
</form>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.input_boxes').on('keyup', function(e){
var value = $(this).val();
var i_val = $(this).attr('data-i');
$('#lblValue').val(i_val);
$('#lblValue_number').val(value);
$('input').prop('readonly', true);
$(this).prop('readonly', false);
});
</script>
Assuming all inputs are children of the same element (i.e. siblings), you can use jQuery to do this easily:
$('input').on('focus', function(){
$('input').removeAttr('readonly');
$(this).siblings().attr('readonly', 'readonly');
});
JSBin:
http://jsbin.com/qukohosafuje/1/edit
Try this :-
$("input").on('keyup', function () {
$('input').not(this).attr('readonly', 'readonly');
});
DEMO
You have to put all JQuery statement within:
$(function(){
//put your JQuery code here
});
Try and let me know if now works.
You can simply use the html attribute of readonly for the inputs you don't want users to fill.
e.g
<input type="text" id="lblValue" value="" readonly>
if you would required the readonly inputs to be accessible after the necessary input has been filled, you can use jquery to trigger the event.
e.g
$('input').keyUp(function(){
if($('#edValue2').val()!=""){
$('input:not("#edValue2")').removeAttr('readonly');
})

Clear input text after executing some PHP code

PHP Code :
<?php
if(isset($_POST['submit']))
{
$sent = mail($to, $subject, $email_message, $headers) ;
if($sent)
{
echo '<script> cleartext(); </script>';
}
}
?>
JavaScript :
<script type="text/javascript">
function cleartext()
{
alert(document.getElementById('name').value);
document.getElementById('name').value = '';
document.getElementById('email').value = '';
document.getElementById('phone').value = '';
document.getElementById('message').value = '';
alert(document.getElementById('name').value);
}
</script>
Source Code :
<form action="#" method="post" class="margin-bottom" target="hidden" id="contact">
<div class="row">
<div class="col-lg-6 col-sm-6">
<input type="text" placeholder="Your Name*" id="name" name="name" />
</div>
<div class="col-lg-6 col-sm-6">
<input type="text" placeholder="Your Email*" id="email" name="email" />
</div>
<div class="col-lg-6 col-sm-6">
<input type="text" placeholder="Your Phone*" id="phone" maxlength="13" name="phone" />
</div>
</div>
<textarea placeholder="Message" id="message" name="message"></textarea>
<input type="submit" id="clear" name="clear" class="button" value="Clear " onClick="cleartext();">
<input name="submit" type="submit" class="button" id="submit" onClick="MM_validateForm('name','','R','email','','RisEmail','phone','','RisNum','message','','R');return document.MM_returnValue" value="Submit ">
</form>
Problem
I want to clear all input text after sending a mail on submit.on submit I am calling cleartext() from my PHP code.but on that time I am not being able to clear my input text value.And when I call cleartext() method on clear button it's works proper.if somebody have idea about it so please help me.
You missed script type. that might be the problem.
<?php
//stuff to do
echo '<script type="text/javascript">
cleartext();
</script>';
?>
see this How to call a JavaScript function from PHP?
For button to clear fields, use type "reset" instead of "submit"
<input type="reset" value="Clear" />
And to clear the fields after submit, try redirecting
if($sent) {
header('Location: ' . $_SERVER['PHP_SELF']);
exit(0);
}
you can put a setTimeout in the onClick of the js function that clear the form
<input name="submit" type="submit" class="button" id="submit" onClick="setTimeout( MM_validateForm, 1000 )" >
Try this:
PHP:
if(isset($_POST['submit']))
{
$sent = mail($to, $subject, $email_message, $headers) ;
if($sent) $b_sent = true;
}
Javascript:
function cleartext()
{
alert(document.getElementById('name').value);
document.getElementById('name').value = '';
document.getElementById('email').value = '';
document.getElementById('phone').value = '';
document.getElementById('message').value = '';
alert(document.getElementById('name').value);
}
var bClear = <?= $b_sent? 'true':'false' ?>;
if (bClear) cleartext();
you using submit button for clear, it shouldn't work because the form will be submitting its values
and the way is you should make it return false in onclick in order to prevent submitting form.
your code should be like this:
<input type="submit" id="clear" name="clear" class="button" value="Clear " onClick="cleartext(); return false;">

How to show box after submit value in form

So I have pop-up window where user need to enter name, after clicking submit button this window close.
You can test it here: http://eurokos.lt/under20/button.php (Click 21 button, then try to enter any value and see what happens)
For this pop-up box I've used function:
function popUp() {
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
This function is used for X button to close window:
function closeWindow() {
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
My button which open pop-up window looks like:
Echo "<input type='button' onclick='popUp();' value='".$i."' />";
And here is PHP_SELF and form:
<?php
if(isset($_POST['submit']))
{
$name = $_POST['name'];
echo "</br>You have entered: <b> $name </b>";
}
?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="text" name="name"><br>
<input type="submit" name="submit" value="Submit Form"><br>
</form>
`
What I need to do that posted result what entered and window not closed?
Maybe I need to use popUp() function again when submitting? But how to do that correctly? Thank you.
Try this:
html:
<form method="post" action="" onsubmit="return display()">
<div id="answer"></div>
<input type="text" name="name" id="name"><br>
<input type="submit" name="submit" value="Submit Form"><br>
</form>
javascript:
function display(){
var ans = document.getElementById("name").value
document.getElementById("answer").innerHTML="You have entered:"+ans;
return false;
}
Update:
function popUp(){
document.getElementById("answer").innerHTML=""; //Add these in your popup function
document.getElementById("name").value="";
}
First of all i suggest you to avoid PHP_SELF in the action it can be manipulated by people and it's not good.
at top of page try to do :
<?php
$thispage = $_SERVER['PHP_SELF'];
?>
<html>
.
.
.
<form method="post" action="<?=$thispage?>">
<input type="text" name="name"><br>
<input type="submit" name="submit" value="Submit Form"><br>
</form>
</html>
Then, using the action for sending data to PHP, will reload the page so you are probabilly losing all the inline fix you did.
Try to get the input values after the submit, assign them to varibles and do, for example:
xmlhttp.open("POST","<?=$thispage?>",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=name");
with an asynchronous call you don't reload the page and you don't lost your changes

javascript var into input value

can someone help me out getting a javascript var inside the value of a form
input value?
I'm a newbie in javascript but can give you my solution in php.
("Just use php" isn't an option because it have to be client-based :D )
<?php
$value = "Hello!";
?>
<form name="settings" action="">
<input name="color" value="<?php echo $value; ?>" />
</form>
Thanks in advance
Like this:
document.forms["settings"].color.value = "your value goes here...";
<?php
$value = "Hello!";
?>
<form name="settings" action="">
<input name="color" value="" />
</form>
<script>
document.forms["settings"].color.value = "<?php echo $value;?>";
</script>

Categories