Dropdown list triggering required field validation when disabled - javascript

I have this function here, when I disable the report field from the code below, I can't submit the form because the required field triggers, even though there is a selected value in the dropdown. When i remove the disabling of the list. I was able to submit the form:
window.onload = function()
{
var x = document.getElementById("jform_report");
x.disabled = true;
}
jQuery('#jform_report').prop('disabled', true).trigger("chosen:updated");
What might be triggering the required field? I tried displaying the dropdown's value by using a alert box, It shows the correct selected value so I'm wondering why is the required field validation triggering.
here is the HTML code :
<input type="hidden" name="jform[report]" value="<?php echo $this->item->report; ?>" />
<div class="control-group">
<div class="control-label"><?php echo $this->form->getLabel('report'); ?></div>
<div class="controls"><?php echo $this->form->getInput('report'); ?></div>
</div>
When I click submit, it points to this line of code in the inspect element:
<a class="chzn-single" tabindex="-1"><span>Java</span><div><b></b></div></a>
does it have something to do with tabindex?

When you Disable your control, it suggests that the field is not selected, therefore if it is a required field and you have to disable it, make sure you put in a hidden field (with the same name as the required field) with the selected value. It will pass your validation

Related

Show a hidden div after a form submit page refresh

I have a div result_head which is hidden by default. Whenever I click a button which will provide options to select results, this hidden div will display as a heading for the form.
<div class="result_head" id="result_head" style="display: none"> >Results</div>
And the form code
<form method="post" id="form_result">
<div class="form-group">
<-----some drop down menus here --------->
<div class="form-group">
<button type="submit" name="result_submit" id="result_submit" style="display: none;margin:1%;" >Submit</button>
</div>
</form>
After the submit and after the page refresh, I need to display the heading for the result.
I tried different methods to achieve without any luck.
Tried Adding onclick and onsubmit finctions along with form submit
<button type="submit" name="result_submit" id="result_submit" style="display: none;margin:1%;" onclick="document.getElementById('result_head').style.display = 'block';">Submit</button>
Tried to echo CSS in php to display_head.
<div class="result_head" id="result_head" style="display: none" <?php if (isset($_POST['result_submit'])){ echo 'style="display:block !important;"'; } ?> >Results</div>
Also found a method echo entire div via php after form submit which will create the new div after form submit. But that option is not feasible for me as I need to display the head before submit as well.
Also while looking into some solutions, found an option to change the button type from sumbit to button and use jquery\ajax to submit the form. I may have to change my entire code for that.
Is there any other way to do it ?
How about the following:
<div class="result_head" id="result_head" style="display: <?php echo ($_POST['result_submit'] ? 'block' : 'none') ?>">Results</div>
It just changes the style from none to block when submited.
after submitting form you can store value in localStorage for example
localStorage.setItem('isHeadingVisible', true);
and add code which will check in every page load is header visible or not by checking this
if(localStorage.get('isHeadingVisible')){}
you can read more about localStorage here
but this will not work if user will use another browser after these operations, because user's localStorage will be emty in new browser, so I would suggest to use backend data here, or check in every page load if localStorage.get('isHeadingVisible') is undefined and form is submitted, set localStorage.setItem('isHeadingVisible', true);

Html form submitting modifying

I have two input buttons on my page.
The first one is a hidden input that passes value from php code to the other visible input.
The second buttton is a visible submit button that gets value from the hidden button in order for it to process correctly.
I am trying to submit the hidden button. When the visible button is clicked, it submits the hidden button. Before that, the other button gets a value and passes it to the visible one. Here are the two submit buttons:
<input type="hidden" name="cart" id="cart" value="<? php echo $Product ?> ">
<input type="submit" name="cart1" id="add to cart" value="1">
think this is what what you are trying do
$('input[name="cart1"]').click(function(e){
e.preventDefault();
hidden_input= $('input[name="cart"]').val()
$(this).val(hidden_input)
// then you can consider sending your form data via ajax
// ensure the inputs are wrapped within a <form> tag like
luo said
data = $(this).parents('form').serialize()
$.ajax({
type: 'post',
data: formdata,
....}) // ajaxx here
})

Check Hidden Form Input has Value on Form Submit

I have a form with a hidden input:
<input type="hidden" name="productID" id="productID" value="">
I have a hidden Alert (using Bootstrap for this):
<div id="alert_ajax_error" class="alert alert-danger text-center" role="alert" style="display:none">
You have not made a selection. Please select an Item and try again
</div>
<div class="text-center">
<button type="submit" name="buttonType" value="saveSelected" class="btn btn-success">Submit</button>
</div>
The hidden form input is populated via another script when users select from a table - it adds the productID as the value of the input.
I would now like to add some client side validation (have server side validation in place) so that if the user clicks Submit it checks to see if they have made a selection by checking for the presence of the hidden input to see if it has a value - if it is empty it will then show the hidden alert:
$("#alert_ajax_error").show();
I'm not sure if it's possible to check a hidden input with Javascript/JQuery and how to go about this if it is possible.
Basically you will want to check the value on submit using an if statement
$("form").submit(function(event) {
event.preventDefault();
if($('#productID').val() == '') {
$("#alert_ajax_error").show();
return false;
}
//.... more form actions if good ....
});

Chrome Auto-checked radio button, hidden div with "required" blocking POST

EDIT 3: Ahha... some progress. The problem was actually in some code below the divs that I left out (updated HTML below to reflect). The second div contains a "required" input, so simply changing the div to display=none via javascript doesn't actually make the page entirely ignore the hidden Div. So a slight change to the angle of my question - how would I adjust the code below to completely ignore the hidden div, so that the required field is not read?
EDIT 2:I have tried removing the 2nd block of JS code below and inserting the dynamic PHP code directly into the input and div tags to change the display - still no luck.
EDIT 1: Just to confirm, the solution to a similar question doesn't work in this case: Auto checked radio buttons and php form processing - How to avoid blank field? it seems that the Chrome team have made changes in later versions that make this solution redundant.
A user on the website can select either Points or Stamps - I get the value from the Database via PHP and the form should have the relevant radio button checked and only show the Div related to that radio button.
Everything works fine, however, unless I manually change the radio button it will not let me POST the form i.e. I cannot post with value selected automatically from the DB - it seems a similar problem to this (Chrome Browser Ignoring AutoComplete=Off) - but no matter what I do with Chrome autocomplete it doesn't work. Also the page is recognising the radio as checked because it shows my dot in the right place. (EDIT 3: still unsure why this works in Mozilla but not Chrome - but latest Edits make this less important)
Heres my JS that shows the right Div if a radio button is changed:
$(function () {
var $divs = $('#option > div');
$('input[type=radio]').change(function() {
$divs.hide();
$divs.eq( $('input[type=radio]').index( this ) ).show();
});
});
This JS sets the correct radio button based on DB and shows the correct div when the page loads:
$(function() {
var $radios = $('input:radio[name=selection]');
var $type = "<?php echo $type; ?>";
if($type === 'points') {
$radios.filter('[value=points]').prop('checked', true);
document.getElementById('pointsdiv').style.display = 'block';
document.getElementById('stampdiv').style.display = 'none';
}
else if($type === 'stamp') {
$radios.filter('[value=stamp]').prop('checked', true);
document.getElementById('stampdiv').style.display = 'block';
document.getElementById('pointsdiv').style.display = 'none';
}
});
My HTML and PHP:
$type = $_SESSION['user']['type']; //Note: This is actually set at the very top of the page i.e. before the JS
<form autocomplete="off" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST" role="form">
<input type="radio" id="selection" name="selection" value="points"></input><label>Points</label>
<input type="radio" id="selection" name="selection" value="stamp"></input><label>Stamps</label><br></br>
<div id="option">
<div id="pointsdiv">
//Points related information here
<input type="text" required="required"/>
</div>
<div id="stampdiv">
//Stamp related information here - below input is required so when pointsdiv is displayed, this entire div should not even load
<input type="text" required="required"/>
</div>
</div>
<button type="submit" class="button">Save</button>
</form>
Anyone have any ideas how I can load this page and post the form if I don't change the radio button - i.e. if it loads with "Points" checked and I click the Save button?
Input radio groups must have the same name but not the same id,
so you should change id="selection" for one of them.
If everything is in the same page and the page is in php,
then you have to wait for dom ready before setting input values.
There is a dynamic way without using javascript :
<input type="radio" <?=$type =='points'?='checked="checked"':''?> id="selection" name="selection" value="points">
The same thing you can do with the other radiobutton
and also with the divs pointsdiv and stampdivs

Textbox empty after submitting

How can I keep the value of textboxes after submitting a form?
When I press the submit button the values dissapear.
What I want is that the values don't dissapear from the textbox after pressing submit button.
in PHP you can do
<input type="text" name="fieldName" value="<?php echo isset($_POST['fieldName']) ? $_POST['fieldName'] : '' ?>" />
since HTTP is a stateless protocol so it lost previous data from the submitted form.
You can use session or you can do it like this:
<input name="email" value="<?php isset($_REQUEST['email']) ? $_REQUEST['email'] : '' ?>">
it will check if value exists in the super global $_REQUEST if exists then echoing it as value of the input field. set like this for all input field.

Categories