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.
Related
I have a page with two registration forms individual and business type and individual type form is set as default the other form is hidden, it works fine. but when I switch it to second form and click on submit button it submits second form but returns to first form after submition even on errors it return to first form.
I want it to stay on second form on errors and after submition.
Here is my php :
if (isset($_POST["btnRegister"])) {
echo "Done";
}elseif (isset($_POST["btnbusiness"])) {
echo "Done";
}
HTML and js codes in my page:
function swapConfig(x) {
var radioName = document.getElementsByName(x.name);
for(i = 0 ; i < radioName.length; i++){
document.getElementById(radioName[i].id.concat("Settings")).style.display="none";
}
document.getElementById(x.id.concat("Settings")).style.display="initial";
}
<div class="col-10 clmiddle">
<label for="production"><b>Individual</b></label>
<input type="radio" onchange="swapConfig(this)" name="urlOptions" id="production" checked="checked" />
<label for="development"><b> Business</b></label>
<input type="radio" onchange="swapConfig(this)" name="urlOptions" id="development" />
</div>
First Form :
<div id="productionSettings" class="col-12">
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="col-6">
<input type="text" class="form-control" name="fname" placeholder="Name..." required>
<button type="submit" name="btnRegister" class="btn btn-primary right">Send</button>
</div>
</form>
</div>
Second Form :
<div id="developmentSettings" style="display:none" class="col-12">
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="col-6">
<input type="text" class="form-control" name="fname" placeholder="Name..." required>
<button type="submit" name="btnbusiness" class="btn btn-primary right">Send</button>
</div>
</form>
</div>
EDIT: I changed JS to php, Here is the solution.
PHP codes (which get url):
$path = $_SERVER['REQUEST_URI'];
$Aurl = explode(",",$path);
for ($i=0; $i<count($Aurl);$i++){
$Burl = str_replace("?", "/", trim($Aurl[$i]));
}
$url = htmlspecialchars(basename($Burl));
$FormPostUrl = basename($path);
Html part :
Checkbox :
<div class="col-10 clmiddle" style="margin-top: 20px;">
<label for="production"><b>Individual</b></label>
<input type="checkbox" value="<?php echo htmlspecialchars("register.php"); ?>" name="checket"
onClick="if (this.checked) { window.location = this.value; }" <?php if($url === htmlspecialchars("register.php")){ echo 'checked="checked"';}?>>
<label for="development"><b>Business</b></label>
<input type="checkbox" value="<?php echo htmlspecialchars("register.php?business");?>"
name="checket"
onClick="if (this.checked) { window.location = this.value; }" <?php if($url === htmlspecialchars("business")){ echo 'checked="checked"';}?>>
</div>
First Form :
<?php if($url === htmlspecialchars("register.php")){?>
<div id="productionSettings" class="col-12">
<form action="<?php echo htmlspecialchars($FormPostUrl); ?>" method="post">
<div class="col-6">
<input type="text" class="form-control" name="fname" placeholder="Name..." required>
<button type="submit" name="btnRegister" class="btn btn-primary right">Send</button>
</div>
</form>
</div>
Second form:
<?php } elseif($url === htmlspecialchars("business")){ ?>
<div id="developmentSettings" class="col-12">
<form action="<?php echo htmlspecialchars($FormPostUrl); ?>" method="post">
<div class="col-6">
<input type="text" class="form-control" name="fname" placeholder="Name..." required>
<button type="submit" name="btnbusiness" class="btn btn-primary right">Send</button>
</div>
</form>
</div>
<?php } ?>
You can use PHP to control whether display:none is added to your divs or not. Use an if statement (or a ternary operator might be neater syntax in the context) to make the decision about what to echo. Since the default is to display the production settings form, we only need to check whether the other form has been submitted or not, in order to know whether to change that.
e.g. something like this (untested):
<input type="radio" onchange="swapConfig(this)" name="urlOptions" id="production" <?php echo (isset($_POST["btnRegister"]) ? "" : 'checked="checked"'); ?> />
and
<input type="radio" onchange="swapConfig(this)" name="urlOptions" id="development" <?php echo (isset($_POST["btnRegister"]) ? 'checked="checked"' : ""); ?> />
and
<div id="productionSettings" class="col-12" <?php echo (isset($_POST["btnbusiness"]) ? "style='display:none'" : ""); ?>>
and
<div id="developmentSettings" class="col-12" <?php echo (isset($_POST["btnbusiness"]) ? "" : "style='display:none'"); ?>>
P.S. Unless you've massively simplified these forms for the purpose of your example, they appear to be basically identical. It's questionable whether you actually need two separate forms at all. The only difference appears to be the choice between "individual" and "business" - that could be handled by a single form with a radio button to choose the type, which would then simplify how you handle the postback as well, and reduce the amount of duplicated code and HTML. Of course if you're actually capturing more distinct fields for these forms than you've shown, then these remarks don't really apply.
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.
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.
I am trying to modify a joomla component and more specific a questionnaire that contains radio buttons. In php file the code is :
<form id="form-table" action="<?php echo JRoute::_('index.php?option=com_bisbas&task=table.save'); ?>" method="post" class="form-validate" enctype="multipart/form-data" target="iframe1">
<ul>
<input type="hidden" name="jform[id]" value="<?php echo $this->item->id; ?>" />
<input type="hidden" name="jform[state]" value="<?php echo $this->item->state; ?>" />
<?php echo $this->form->getInput('timecreated'); ?> <div class="control-group"><br><br><br>
<div class="control-label"><?php echo $this->form->getLabel('question1'); ?></div>
<div class="controls"><?php echo $this->form->getInput('question1'); ?></div><br><br>
and in firebug code is :
<div class="controls">
<fieldset id="jform_question1" class="radio" aria-required="true" required="">
<input id="jform_question10" type="radio" aria-required="true" required="" value="Yes" name="jform[question1]">
<label for="jform_question10">Yes</label>
<input id="jform_question11" type="radio" value="No" name="jform[question1]">
<label for="jform_question11">No</label>
<input id="jform_question12" type="radio" value="I am not sure" name="jform[question1]">
<label for="jform_question12">I am not sure</label>
</fieldset>
</div
I want when the user clicks the answer of radio button to check the value and print an alert. But I don't know how to do this in php file. I understand that
<div class="controls"><?php echo $this->form->getInput('question1'); ?></div>
prints the radio values based in an xml file that contains the values but how can I get them and check the value when the user selects it?
If I well understood your query I think that You must use javascript.
If your Joomla version is above 3.0, You can do it with jQuery :
jQuery('#radio_selector').on('click', function(){//verification script});