I'm new to javascript, I'm using jquery, this is my html with php code:
<form action="" method="POST" enctype="multipart/form-data">
<h1>Quantity 1</h1>
<input id="btn1" type="number" name="cantpag" value="<?php echo $cp; ?>">
<h1>Quantity 2</h1>
<input id="btn2" type="number" name="cantreinv" value="<?php echo $cr; ?>">
<input type="submit">
</form>
Here is my JS:
<script>
$(document).ready(function(){
$(document).on('change','#btn1',function(){
alert('works');
});
});</script>
When I change the value of "#btn1", nothing happens immediately, instead, I must press tab or somwhere else to have the alert show up. Is there any way for this to be instant, as in, just adding or removing a number from the input field triggers the alert?
$(document).ready(function(){
$(document).on('input','#btn1',function(){
alert('works');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST" enctype="multipart/form-data">
<h1>Quantity 1</h1>
<input id="btn1" type="number" name="cantpag" value="<?php echo $cp; ?>">
<h1>Quantity 2</h1>
<input id="btn2" type="number" name="cantreinv" value="<?php echo $cr; ?>">
<input type="submit">
</form>
The input event should work better. The change event on certain elements require a blur to register.
Related
I have 2 forms (and will have more in the future) that I need to submit. Right now, when the submit button is clicked, it will only submit the form in the same collapsible section. Hence, I need a "Submit All" button outside these sections to submit all the forms.
I've tried implementing AJAX and tried out the solution from this link Submit two forms with one button , but it's still not working for me.
submitForms = function(){
document.getElementById("form1").submit();
document.getElementById("form2").submit();
}
<html>
<body>
<form id="form1" action="<?php echo htmlspecialchars(basename($_SERVER['REQUEST_URI'])); ?>" method="post">
<div style="background-color:lightblue" class="form-group <?php echo (!empty($answer_err)) ? 'has-error' : ''; ?>">
<label><?php echo $question; ?></label>
<input type="text" name="answer[]" class="form-control" value="<?php echo $answer; ?>">
<span class="help-block"><?php echo $answer_err;?></span>
<input type="hidden" name="consideration_no[]" value="<?php echo $consideration_no; ?>"/>
<input type="hidden" name="dg_no" value="<?php echo $dg_no; ?>"/>
</div>
<input type="Submit" name = "$consideration_no[]" class="btn btn-primary" onclick="submitForms()" value="Submit">
Cancel
</form>
</div>
<form id="form2" action="<?php echo htmlspecialchars(basename($_SERVER['REQUEST_URI'])); ?>" method="post">
<div class="form-group <?php echo (!empty($answer_err)) ? 'has-error' : ''; ?>">
<label><?php echo $question; ?></label>
<input type="text" name="answer[]" class="form-control" value="<?php echo $answer; ?>">
<span class="help-block"><?php echo $answer_err;?></span>
<input type="hidden" name="consideration_no[]" value="<?php echo $consideration_no; ?>"/>
<input type="hidden" name="dg_no" value="<?php echo $dg_no; ?>"/>
</div>
<input type="Submit" name = "$consideration_no[]" class="btn btn-primary" onclick="submitForms()" value="Submit">
Cancel
</form>
</div>
<input type="button" value="Submit All!" onclick="submitForms()" />
</body>
</html>
When I click on the last button to Submit All, nothing happens.
The html forms are inside php if else and while loop scripts, but I doubt that affects anything?
(I welcome other methods and ideas of submitting these two forms from a single button.)
------------UPDATE------------------------
I tried removing the actions and used this:
submitForms = function(){
document.getElementById("form1").submit();
document.getElementById("form2").submit();
}
It wouldn't work too. In my POST handler, it has a:
if($stmt->execute()){
//Records Submitd successfully. Redirect to landing page
header("location: home1.php?dm_no=".$_GET["dm_no"]);
exit();
Would the redirection have affected the AJAX not being able to submit two forms? But even if it doesn't and only is able to submit one, I would still redirect to another page. Right now, the button doesn't seem to do anything.
I think it's not possible submit two form on one click. because form redirect on given form action, so if you submitting two from with two action then system not able to redirect two different actions.
But you can achieve this by doing ajax call Like:
<input type="button" value="Submit All!" onclick="submitForms()" />
<script>
function submitForms() {
$("#form1").ajaxForm({url: 'server.php', type: 'post'})
$("#form2").ajaxForm({url: 'server.php', type: 'post'})
}
</script>
So I have this
<?php
if(isset($_POST['submit'])) {
$error = "test";
}
?>
<div id="first" class="1">
<form action="" method="post" id="myform">
<p>
<label for="textfield">Text Field:</label>
<input type="text" name="name" id="name">
<br>
<input type="submit" name="submit" formmethod="POST">
</p>
</form>
</div>
<div id="second" class="2" style="display:none">
<?php echo $error; ?>
</div>
<script>
$(document).ready(function() {
$("#myform").submit(function(e) {
e.preventDefault();
$("#first").hide();
$("#second").show();
});
});
</script>
So, everything is OK with javascript, the form is hiding, div is displaying, but the php isnt working. The form is submitting only to js and not to php.
You need an action, it's not doing anything because it's TOLD to not do anything
<form action="name_of_this_file.php" method="post" id="myform">
or
<form action="<?php echo $_SERVER['PHP_SELF']?>" method="post" id="myform">
You have no php action handler listed.
This question already has an answer here:
Why does this 'onClick disable=true; this.form.submit();' work on one button but not another?
(1 answer)
Closed 6 years ago.
I have a form that submits after a button is pressed. The problem is - the button that has the this.form.submit() function attached doesn't send the POST variable...
<form method= "post" action="timestable_submit.php">
<input type="hidden" name="b" value="<?php echo $f;?>">
<input type="hidden" name="c" value="<?php echo $s;?>">
<input type="submit" name="sub" id="btn" value="<?php echo $d;?>"
onclick="this.disabled=true; this.form.submit();">
<input type="submit" name="sub" id="btn2" value="<?php echo $w1e;?>">
<input type="submit" name="sub" id="btn3" value="<?php echo $w2e; ?>">
</form>
When I assign a variable from the $_POST['sub'] - I get nothing...
Any ideas? It works if I don't have the onclick="this.disable=true; this.form.submit();" line
Working fiddle.
Change button type to button instead of submit because you're submiting the form programmatically using this.form.submit() :
<input type="button" name="sub" id="btn" value="<?php echo $d;?>" onclick="this.disabled=true; this.form.submit();">
And better if you could separate your logic and use submit event :
<input type="submit" name="sub" id="btn" value="<?php echo $d;?>"/>
var form = document.forms[0];
form.addEventListener("submit", function(e){
document.getElementById('btn').disabled=true;
})
NOTE : .disabled=true; has almost no effect here because the page wil be redirected to timestable_submit.php.
Hope this helps.
Page reloads after form submission, and i want it not to reload.
Update: With answers below i came up With the code below. What happens is form submits correctly, but the page reloads.
Before, this line of code worked fine:
$(document).ready(function() {
$('#poll').ajaxForm(function() {
$("#polling_id").load("poll_results.php");
});
});
Today i have added .htaccess to remove .php extensions. Could that have affected this someway?
HTML
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></SCRIPT>
</head>
<div class="polling" id="polling_id">
<br><br>
<form id="poll_form" method="POST" action="process-vote.php" />
<div class="poll_objects">
<input type="hidden" name="o1" value="<?php echo $option1; ?>" />
<input type="hidden" name="o2" value="<?php echo $option2; ?>" />
<input type="hidden" name="o3" value="<?php echo $option3; ?>" />
<span class="footer_font"><input type="radio" name="radio_1" value="<?php echo $option1;?>" id="radio" /><label for="radio"><?php echo $option1;?></label> </span><br><br>
<span class="footer_font"><input type="radio" name="radio_1" value="<?php echo $option2;?>" id="radio2" /><label for="radio2"><?php echo $option2;?></label></span><br><br>
<span class="footer_font"><input type="radio" name="radio_1" value="<?php echo $option3;?>" id="radio3" /><label for="radio3"><?php echo $option3;?></label></span><br><br>
<div class="float_buttons">
<input type="submit" name="submit_vote" value="Vote!" class="button" />
<input type="submit" name="results" value="Poll Results" class="button"/>
</div>
</div>
</div>
</form>
jQuery:
<script>
$(document).ready(function() {
$.ajax({
$('#poll_form').submit(function(e) {
e.preventDefault();
// note where the e comes from.
var a = $(this).serialize();
$("#polling_id").load("poll-results.php");
});
});
});
</script>
It doesn't look like you are capturing an event.
$('#poll_form').submit(function(e) {
e.preventDefault();
// note where the e comes from.
var a = $(this).serialize();
// now do your ajax stuff here.
});
You can also put :
<script>
function validate()
{
...
blablabla
...
return false; // This cause the submit function to be stopped.
}
</script>
<form onClick="validate()">
I have a code (see it below). It works perfectly in Firefox: it saves submitted information after clicking __JL_SAVE button and keeps user on same page.
But in Internet Explorer & Opera it only redirects to index page (index.php) and doesn't save submitted information.
What can I do for solving this problem? Thanks.
Here is my code:
<form action="index.php" id="mosForm" method="post" enctype="multipart/form-data">
<fieldset>
<legend><?=__JL_ABOUT_MYSELF?></legend>
<span class="a" onclick="showHideLegend('about_myself_1')"><?=__JL_EDIT_BLOCK;?></span>
<div id="about_myself_descr" style="display: block"><?=__JL_SELF_DESCR;?></div>
<div id="about_myself_1" style="display: none"><?php include "html/about_myself_fill.php"?></div>
<div id="about_myself_2""><?php include "html/about_myself_show.php"?></div>
</fieldset>
<fieldset>
<legend><?=__JL_ABOUT_MYSELF?></legend>
<span class="a" onclick="showHideLegend('type_1')"><?=__JL_EDIT_BLOCK;?></span>
<?php if ($typ_block) {?>
<?php /* <input type="checkbox" id="jl_type_block" name="jl_type_block" <?php if ($roon_type_block) echo 'checked ';?> /> */ ?>
<input type="checkbox" id="jl_type_block" name="jl_type_block" disabled <?php echo 'checked ';?> />
<label for="jl_type_block"><?=__JL_ON_BLOCK?></label>
<?php } else {
echo __JL_OFF_BLOCK;
}?>
<div id="about_myself_descr" style="display: block"><?=__JL_SELF_DESCR;?></div>
<div id="type_1" style="display : none">
<?php include "html/type.php"?>
</div>
<?php if ($typ_block) { ?>
<div id="type_2">
<?php include "html/type_show.php"?>
</div>
<?php } ?>
</fieldset>
<fieldset>
<legend><?=__JL_INTEREST?></legend>
<span class="a" onclick="showHideLegend('interest_1')"><?=__JL_EDIT_BLOCK;?></span>
<?php if ($interest_block) {?>
<input type="checkbox" id="jl_interest_block" name="jl_interest_block" disabled <?php echo 'checked ';?> />
<label for="jl_interest_block"><?=__JL_ON_BLOCK?></label>
<?php } else
echo __JL_OFF_BLOCK;
?>
<div id="interest_descr" style="display:block"><?=__JL_INTEREST_DESCR;?></div>
<div id="interest_1" style="display:none">
<?php include "html/interest.php"?>
</div>
<?php if ($interest_block) { ?>
<div id="interest_2">
<?php include "html/interest_show.php"?>
</div>
<?php } ?>
</fieldset>
<input type="submit" name="save" value="__JL_SAVE" onClick="mosForm.submit();" />
<input type="hidden" name="option" value="com_joomlove" />
<input type="hidden" id="task" name="task" value="save_info" />
</form>
Full source available here: http://narkoz.pastebin.com/f4f036f5
You should really perform any submission related logic in FORM's "submit" event handler, not in "click" of one of FORM's elements. e.g.:
<form ... onsubmit="return validateForm(this);"> ... </form>
This should ensure that keyboard-based submission goes through your handler; it also gives you an ability to prevent form submission by returning falsy value from an event handler. Any truthy value, on the other hand, will automatically submit a form.
If you're not changing the behavior of the form, why use JavaScript to submit the form?, you're already in a submit button.
You should try giving the form name="mosForm", not just id="mosForm", so that the DOM reference from that event handler can be found.
When you have:
<form method="post" action="somefile.php" name="form" id="form">
<button type="button" name="submit" onclick="$('#form').submit()">go</button>
</form>
Does work in IE8, Opera, Chrome, but not in Firefox(14):
Firefox has a problem with: name="submit". When you change the name attribute in: name="submit_ff" (or something else), it works also in Firefox.