I have multiple forms in my page and depending on the hidden input value, different sections are called.
Now my issue is, I have 2 input buttons in one of my forms, and depending on what button I click i need to send the appropriate hidden input type,
For example in the below form .
If i click on Generate password button,
I want the target value(the value of the hidden input field) as generate_password
If I click on Lock Password I want the target value to be user_locked. Here is my code.
puts "<input type=\"hidden\" name=\"target\" value=\"user_locked\">"
puts "<tr><td colspan='4'> New User request Review</td></tr>"
puts "<tr><td><label for=\"full_name\"> Full Name </label></td>"
puts "<td><input type=\"text\" value =\"$name\" name =\"full_name\" readonly=\"readonly\"></td>"
puts "<tr><td><input type=\"button\" value=\"Generate Password\" onclick=\"if(confirm('Are you user you want to add this user?')){submit()};\"></td>"
puts "<td><input type=\"button\" value=\"Lock User\" onclick=\"if(confirm('Are you user you want to add this user?')){submit()};\"></tr>"
well basically I am calling different functions depending upon the hidden field,
set target ""; catch { set target $CGI_DATA(target) }
switch $target {
"confirm" { set id [UpdateUserData $id] }
"user_locked { DeleteUser $id }
"user_confirmed" { NewUserConfirmed}
"newuser" { NewUserReview }
default { }
}
The code to your onclick event could do that when confirming instead of just submitting the form. If you use jQuery:
if(confirm('Are you user you want to add this user?')){
$("input[name=target]").val('Generate password');
submit();
}
The one for the other input button should be very similar.
It is also possible that you have a way of knowing which button was pressed to submit the form another way. If I remember correctly, in PHP at least the name of the button is passed through in the _REQUEST variable.
In HTML:
<input type="hidden" id="target" name="target" value="user_locked">
...
<input type="button" value="Generate Password" id="generate_button"/>
<input type="button" value="Lock User" id="lock_user"/>
In JS (jQuery):
$("#generate_password,#lock_user").click(function(){
("#target").val($(this).attr("id"));
$("form.myform").submit();
});
You can change around the IDs and classes of these elements, but make sure the JS and HTML match up.
Related
I searched widely to find a solution for this, and eventually had to realise (as others have before me) that a form will always reset to the values with which it is loaded.
So my solution is to load the form with empty values, and then use pure Javascript to update the values from other hidden inputs. It requires one hidden input, and one line of JS, for each user input. My example below shows the code for just one input. Any further inputs follow the same pattern.
The input (I have omitted the label for clarity):
<li>
<input type="text" name="firstname" id="firstname" value='' tabindex="1" size="45" />
</li>
The hidden input:
<input type = 'hidden' id = 'jfn' name = 'jfn' value = '<?php echo $firstname; ?>' />
The Javascript (in the 'onload' or (if jQuery is available, 'document ready') function)':
document.getElementById('firstname').value = document.getElementById('jfn').value;
When the form is submitted the inputs (in $_POST) are saved to SESSION, whence they can be recalled for as long as the SESSION lasts:
foreach ($_POST as $name=>$value) {
$_SESSION['email'][$name] = $value;
}
and later recovered:
if (!empty($_SESSION['email'])) {
extract ($_SESSION['email']);
}
When/if the form is reloaded, the input values are initially empty. The previously input values are loaded into the hidden inputs. After the page has reloaded those values are transferred to the (visible) inputs. The 'Reset' button will now clear the form.
I am trying to add a class to an input of type submit I tried using javascript input is inside a form
<input type='submit' name='$emri" . "$mbiemri" . "submit" . "$depart'" . " value='Vlereso' onclick='disable(this)'>
where disable is a function :
function disable(element)
{
element.classList.add('disabled');
}
when the input is clicked it adds the class but when the action is sent the class is removed again , what I want to do is when I click the input I don't want it to be clickable anymore so I am trying to add class disabled and I don't want it to be removed , is it possible to do it with JS or PHP is needed ?
When you click on the submit button, it will submit the form data (if present) to the target url, which is the current url by default. What you see is that the page is being reloaded afresh, so the class that you added will not be there anymore, because technically, it's a new page.
What you need to do is to disable the button right at the page load, if it's not to be used again. (Arguably you could remove the button altogether, because it's no use to have a disabled button that is never to be used again.)
To disable the <input ..., just add the attribute disabled to the tag.
You can store a boolean inside sessionStorage and when the page loads check if the boolean is true and if so disable the button.
sessionStorage will delete itself once the window gets closed.
Example:
pagescript.js:
let shouldDisableInput = sessionStorage.getItem('shouldDisableInput')
if(shouldDisableInput !== undefined){
$('#input-id').classList.add('disabled') //or $('#input-id').prop('disabled', true);
}
function disable(element){
element.classList.add('disabled');
sessionStorage.setItem('shouldDisableInput', 'true')
}
page.html:
<input id="input-id" type='submit' name='$emri" . "$mbiemri" . "submit" . "$depart'" . " value='Vlereso' onclick='disable(this)'>
don't forget to add the pagescript.js inside the body of the html.
More info on sessionStorage:
https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
You can send a hidden variable with some value from php page, and check in html page if the variable is exists then print disable tag.
These fields are created with JQuery.
How do I validate the array of "aname[]" fields (you have to fill them in before going to the next step)?
JQuery to HTML:
input ="<input name='aname[]' id='1' placeholder='yourname1' type='text' required />";
input +="<input name='aname[]' id='2' placeholder='yourname2' type='text' required />";
input +="<input name='aname[]' id='3' placeholder='yourname3' type='text' required />";
$(".placeholder").append(input);
JQuery command to try and get input
$(document).ready(function() {
var items = $('input[name="items[]"]').text();
if(items == ""){
alert("fill this field");
}
});
Two issues:
text() retrieves the text of an element (like a span or div), not the value of an input. To get the value of an input, use val. (Or if just working with the DOM element, the value property.)
You need to run the check in response to an event, not just on page load.
If you change text() to val() in that code, you'll only be checking the value of the first one (text() is a bit odd and works differently to val() and most other jQuery getters).
So if you want to check that all of them are filled in, you'll need an event handler and a loop of some kind:
$(document).ready(function() {
$("selector-for-the-form").on("submit", function(e) {
$(this).find('input[name="items[]"]').each(function() {
if (this.value == "") {
this.focus(); // So the user knows which field...
alert("fill this field"); // ...although this may mess that up
e.preventDefault(); // Prevent form submission
return false; // Stop looping
}
});
});
});
Of course, alert isn't usually the greatest user experience for this sort of thing. It's usually more pleasant if you do proactive validation and a notification that doesn't jar the user and interrupt what they're doing until you have to (like changing the color of the border of the input and/or showing an inline message). (There are also lots of plugins available to help you with doing that.)
I'm working on a form where I have a text field which will be changed on radio button selection.
$("#id_radio1").click(function() {
$("#multi_language").hide();
$("#single_language").show();
});
$("#id_radio2").click(function() {
$("#single_language").hide();
$("#multi_language").show();
});
Say suppose id_radio1 and id_radio2 are two radio buttons and selecting each changes the form fields differently. Now I was able to do it successfully.
My problem is when I submit the form after single language button is clicked the values are stored as multi as the values of the multi language hidden fields are submitted overridding the values of first.CAn I disable the other field without interference of the same on submission.
How can I correct this?
I'm new to such problem. I want the field to be submitted only once.i.e, if single language field is selected single should be posted and not multi(as it is working now) and when multilanguage is selected multi should be posted.How can I correct this now with the following code.
Fiddle
I have other fields common for both single and multi language in the same form as well, whose values are not changed on submission
Now, in the console I see there are two posts for the same fields in the response i.e. one for single language and other multi language.
You can format your html code as below just if you want to pass the value of the checked field to some other script
<form method="post">
<input id="id_radio1" type="radio" name="name_radio1" value="single" />
<label for="id_radio1">Single Language</label>
<input id="id_radio2" type="radio" name="name_radio1" value="multi" />
<label for="id_radio2">Multi Language</label>
<input type="submit" />
</form>
and in your Jquery Code, you can do this
$("form").on("submit", function(e) {
e.preventDefault();
console.log($("input:checked").val()); //do whatever you want with the checked value
})
Fiddle
You can use the disabled attribute to prevent an element from being sent like so:
$("#id_radio1").click(function() {
$("#multi_language").attr('disabled','disabled').hide();
$("#single_language").removeAttr('disabled').show();
});
$("#id_radio2").click(function() {
$("#single_language").attr('disabled','disabled').hide();
$("#multi_language").removeAttr('disabled').show();
});
Since they are no hidden fields but just hidden by css it should prevent it from being submitted
Why not just have one text input, then in your server-side code simply check which radio button was selected and set the value of the server-side variable accordingly before committing data.
e.g. In PHP for instance:
$language = $_POST['language'];
if($_POST['name_radio1'] == 'single'){
some_function_committing_single_language_value($language);
} else {
some_function_committing_multi_language_value($language);
}
Or have one text input and set the form's onsubmit handler with a Javascript function to insert a hidden field with a name such as 'language_single' or 'language_multi' based on the radio button selection, and set that hidden input's value to the textfield's value.
There are total 8 textboxes in my html form.I am displaying 2 of the textboxes by default and 6 are set to display:none.All these textboxes are wrapped with divs (named fa1 to fa8). I have added a button which will display the hidden divs(named from fa3 to fa8) upon each click.
html code:
<input type="hidden" id="countfa" name="countfa" value="3" readonly>
<button type="button" onClick="AddNewFa();" id="addfa" > + Add New FA </button>
I am using below javascript to listen the click and count and display hidden divs
function AddNewFa()
{
var facount = parseInt($('#countfa').val(),9) ;
if( facount < 9)
{
facount = facount+1;
for(i=3;i<9;i++)
{
if( i<facount )
$('#fa'+i).slideDown("fast");
else
$('#fa'+i).slideUp("fast");
}
$('#countfa').val(facount);
}
}
The problem that I am facing here is after form submit countfa value changing back to its default value 3. So if I have showing all hidden div before form submit after clicking the button countfa value will be 8, and after form submit it will be 3 again. Is there anyway I can keep countfa value as 8 ? even after form submit ?
I am not sure if i understood you correctly, but i faced a similar problem in the past and i resolved it rather easily. You can simply retrieve the value of countfa and then set its value.
Since you are using php, you can simply use this code
Note: Im assuming your using POST, if you are using GET then simply replace $_POST with $_GET
When you get to the part of your code printing the countfa div, simply use this code (Im assuming your using html and will introduce the php inline. Else just remove the <?php ?> tags
<?php
if(isset($_POST['countfa'])){
echo "<input type=\"hidden\" id=\"countfa\" name=\"countfa\" value=\"$_POST['countfa']\" readonly>";
}else{
echo "<input type=\"hidden\" id=\"countfa\" name=\"countfa\" value=\"3\" readonly>";
}
?>
You can store the value in the browser local storage and check after page load if a previous value is stored and restore it if that's the case.
Here is the minimal working example: http://jsfiddle.net/C5Fe7/
$(function () {
if (localStorage['countfa']) {
$('#countfa').val(localStorage['countfa']);
}
$('#addfa').click(AddNewFa);
$('form').submit(function () {
localStorage['countfa'] = $('#countfa').val();
});
});