I am working on a registration page that has two buttons. One that saves a user data and the other which should edit the data.
Before a user submits the data, only the "save" button should be active, meaning the "edit" one should be disabled.
After a user enters the data and successfully saves it to the database (implying that it has passed all the validation), the "save" button should be disabled permanently such that a user saves data to the database only once, after which the "edit" button becomes active to enable him/her to edit the data whenever he/she dims it fit.
I understand jquery is the most appropriate for such a case and your help will be highly appreciated. I have tried to search every where for help but I haven't succeeded.I am not that good in jquery, thus the reason I am seeking for the assistance. Thank you in advance.
The html script for the two buttons are as indicated below:
<button type="button" class="buton" name="submit" id="btnOne">Save »</button>
<button disabled id="btnTwo" type="buton" class="button" name="edit">Edit »</button>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form name='' id='' action='' method='post'>
<input type='text' name='txt_category' id='category' value='Jhon' placeholder="Firstname" disabled>
<input type='text' name='txt_stage' id='stage' value='Smith' placeholder="Lastname" disabled>
<select disabled>
<option>Male</option>
<option>Female</option>
</select>
<input type='checkbox' name='txt_approve' id='approve' value='$approve' disabled>
<input type="button" name='edit' value='edit'>
<input type="button" name='save' value='save'>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form input[type=text],form input[type=checkbox]").prop("disabled",true);
$("input[name=edit]").on("click",function(){
$("input[type=text],input[type=checkbox],select").removeAttr("disabled");
})
$("input[name=save]").on("click",function(){
$("input[type=text],input[type=checkbox],select").prop("disabled",true);
})
})
</script>
</body>
</html>
Related
I have Laravel 5.5 a page that has two forms but uses the same controller and method. First form is to cater for initial details but the second form is a search form. My search form works but only if you click the search button twice is there a way I could force to click once to submit that form.
View
<form name="FormSearch" id="FormSearch" method="post" action="{!! action(MyController#index',$customID) !!}">
<input type="text" name="searchDets" id="searchDets" value="" />
<input type="submit" class="btn btn-default" name="searchMe" id="searchMe" value= "Search Me"/>
</form>
Js
$('#FormSearch').click(function(e){
e.preventDefault();
$('#filterSearchForm').submit();
});
I would like my view page to submit once.
First of all, I couldn't find the element with id filterSearchForm, so, here is an edit that I made that submits the same form (i.e. FormSearch) when you click on it:
$('#FormSearch').click(function(e){
//e.preventDefault();
$('#FormSearch').trigger('submit');
});
I have used the trigger event that is fired which submits the form FormSearch when you click on the form FormSearch.
Here is it how it works:
$('#FormSearch').click(function(e) {
//e.preventDefault();
$('#FormSearch').trigger('submit');
});
$("#FormSearch").submit(function(e){
e.preventDefault();
alert('submitted');
});
#FormSearch{
background: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="FormSearch" id="FormSearch" method="post" action="{!! action(MyController#index',$customID) !!}">
<input type="text" name="searchDets" id="searchDets" value="" />
<input type="submit" class="btn btn-default" name="searchMe" id="searchMe" value="Search Me" />
</form>
<p>
** Click anywhere on the black area.
</p>
I hope this was helpful.
I have faced the same issue and it was due to js version . So please check your jquery.validate's version.
You can get more information here submit button twice click issue
I have placed my input type reset button inside form but its still not working.
<form method='post' action='process/update_news_action.php' >
<tr>
<td colspan='2' class="col-md-4">Update News Content</td>
</tr>
<tr >
<td colspan='2' class="col-md-8"><textarea name="news" id="text"><?php echo $rows["news"] ; ?></textarea></td>
</tr>
<tr>
<td class="col-md-4"><input name='submit' type="submit" value='Publish' class="btn btn-success" /></td>
<td class="col-md-4"><input name='reset' type="reset" value='Reset' class="btn btn-primary" /></td>
</tr>
</form>
I have also tried <button type="reset" value="Reset">Reset</button>
If you're expecting the reset button to empty out the form, that's not the way reset works. It will reset the form fields to what they were when the page was loaded. In this case, you have pre-filled content in your form, so clicking reset will simply undo any user changes since the page-load.
To reset all form fields to blank/nothing, you will need javascript. First get the form DOM object, then iterate over all the input types you want to reset, and set each field.value = '' (input text types / textarea), or modify attributes (for select, radio, checkbox etc.) to deselect and so on. Turn that into a function (there's probably a ready piece somewhere out there, I seem to have lost mine), and attach it to your reset button's click event -- or your form's reset event.
Edit: On a quick search, here's a basic example of how to clear a form to empty values.
Edit: If you're not concerned over anything but text fields, here's a simple way to do this. We add a "reset" event listener to the form, and when it fires, all fields are set to empty string.
function setFormCleanReset(formId) {
let formEl = document.querySelector(formId);
// Add event listener for reset event
formEl.addEventListener('reset', function(e) {
// Iterate all non-hidden fields, set values to ''
for(const fieldEl of formEl.querySelectorAll('input:not([type=hidden])')) {
// #todo check input type and handle "select" etc.
fieldEl.setAttribute('value', '');
}
});
}
// usage: setFormCleanReset('my_form_id');
I think you forgot to insert form tag in your html. It should be work if you insert button code into <form>..button code here..</form>.Something like this:
<form>
<input type="text">
<td class="col-md-4">
<input name='reset' type="reset" value='Reset' class="btn btn-primary" />
</td>
</form>
You should place the <input type="reset"> in a form like this,it will definitely work
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Tring Reset</title>
<style>
</style>
</head>
<body>
<form>
<input type="text"></input>
<input type="text"></input>
<input type="text"></input>
<input type="text"></input>
<input type="text"></input>
<input type=reset></input>
</form>
</body>
</html>
You just need to put your reset button inside form. In following code I have taken one input box also an an example. I hope it helps.
<form>
<input type="text" />
<table>
<td class="col-md-4">
<input name='reset' type="reset" value='Reset' class="btn btn-primary" />
</td>
</table>
</form>
can you please try without echo anything inside textarea
try this
<form method='post' action='process/update_news_action.php' >
<tr>
<td colspan='2' class="col-md-4">Update News Content</td>
</tr>
<tr >
<td colspan='2' class="col-md-8"><textarea name="news" id="text"></textarea></td>
</tr>
<tr>
<td class="col-md-4"><input name='submit' type="submit" value='Publish' class="btn btn-success" /> </td>
<td class="col-md-4"><input name='reset' type="reset" value='Reset' class="btn btn-primary" /> </td>
</tr>
</form>
I think reset button is working fine.
Excuse Me! You are using default value in input attribute. Remove default value from it. Then type anything then click rest it will make your text box empty.
I have a form submitting variables to another PHP file. In the second file, there is a button that leads back to the first file for eventual correction od submitted values. The values are retained in the form by $_POST. The "Reset" button works only when the form is used the first time (empty). After submitting and return from the second PHP file, the "Reset" doesn't do anything, no values are cleared. The button seems to be fully inactive.
<button title="<?php echo $lang['reset-button-hint']; ?>" alt="TOOLTIP 1" type="reset" name="reset"><?php echo $lang['reset-button']; ?></button>
#Jaspreet Kaur You need to add form tag outside the table. Please check my previous comment for it.
I have a form that contains a WYSIWYG editor, and two submit buttons :
<input type='submit' name='pdf' value='PDF Preview'/>
<input type='submit' name='save' value='Save'/>
"pdf" action displays the content of the editor as a PDF output. "save" action is a regular form submit. I want the PDF output to open in a new tab, and can't figure how to do that.
There is no "target" attribute for "input" tag. I could add a "target=_blank" to the "form" tag, but that would submit my "save" action in a new tab as well, which I don't want.
I tried to replace the "pdf" submit button with this :
<a href="same_page" target="_blank" onclick="submitForm();">
That didn't work. The form is submitted in its current tab and the new tab query receives nothing in $_POST.
Is there a magic trick I don't know yet ?
Note : server-side code is PHP
Use button and onclick event with jQuery.
<button type='submit' name='pdf' onclick="$('form').attr('target', '_blank');">PDF Preview</button>
<button type='submit' name='save' onclick="$('form').attr('target', '');">SAVE</button>
So in short you have one form + two submit buttons
first button: open in same tab
second button : open in new tab
after submit you want to know which one is submitted
Solution:
add two submit buttons with different behavior is impossible
so you need JS help or Jquery ( Ravi Hirani solution is perfect )
To know which button is submitted, you should give different names ( newage comment is perfect)
So this is just simple example does the magic you are looking for:
<?php
//print the post data
var_dump($_POST);
?>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<form action="test.php" method="POST">
<!-- just simple textarea -->
<textarea rows="4" cols="50" name="textarea">
text here
</textarea>
<!-- new tab submit button -->
<input type="submit" name="New_Window" value="New Window" onclick="$('form').attr('target', '_blank');" />
<!-- same tab submit button -->
<input type="submit" name="Same_Window" value="Same Window" onclick="$('form').attr('target', '');" />
</form>
You could maybe try using jQuery for this.
For example when the PDFPreview button is clicked jQuery could save the values of the form inputs into cookies. Then it would redirect to the PDFPreview page in a new tab. The PDFPreview page would then read the cookies.
E.g:
<script>
var input1 = null;
function previewPdf()
{
input1 = $("#input1").text();
document.cookie = "input1=" + input1;
window.open("/path/to/pdfPreview.php", '_blank')
}
</script>
<form action="whateverpage" method="post">
<input type="text" name="input1" id="input1">
<input type="button" onClick="previewPdf();" value="Preview PDF">
<input type="submit" value="Save">
</form>
You can use HTML5 formtarget attribute of input tag to change form behavior. This won't work with outdated browsers, however. In your case it will look something like:
<input type='submit' name='pdf' formtarget="_blank" value='PDF Preview'/>
<input type='submit' name='save' formtarget="_self" value='Save'/>
It can be used with button tag either.
References:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit#formtarget
https://www.w3schools.com/tags/att_input_formtarget.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes
I have the following code so depending on the selected option, the visitor is directed to a new page on change. But I want them to be directed to that page after they've clicked on the submit button, not immediately on change. How can I do that?
<script type="text/javascript">
function go()
{
window.location=document.getElementById("link").value
}
</script>
<form>
<select id="link" onchange="go()" > <option>DEFAULT</option>
<option value="page1.php">TITLE1</option>
<option value="page2.php">TITLE2</option>
<option value="page3.php">TITLE3</option>
</select>
<div class="submit"> <input name="submit" type="image" id="submit" src="images/getaquotebutton.png" height="93" width="259"/> </div><!--end of submit class-->
</form>
Many thanks in advance
This is simple:
Remove the onchange from here:
<select id="link" onchange="go()" >
Instead add:
<input onclick="go()" name="submit" type="image" id="submit" src="images/getaquotebutton.png" height="93" width="259"/>
Edit:
Just noticed the type is set to image, well if this doesn't work as intended, try to change the type to button and add image through css as:
<input onclick="go()" name="submit" type="button" id="submit" style="background-image: url('images/getaquotebutton.png'); height:93px; width:259px;" />
With jQuery you can do something like this:
$('#submit').click(function(
window.location=document.getElementById("link").value;
));
Of course you should remove the onchange.
$(function() {
$('form').on('submit', function() {
if($('#link').val() == page1.php) {
do redirect..
}
});
});
Do like this for each!
I'm wondering how to resolve an issue where I have one text box and two buttons.
Each button needs the same data in the text box to accomplish its task.
One button is to update the existing record they are reviewing (with the new value in the text box), and the other button is used to add a new record (again, using the new value in the text).
One idea I had was to use jquery to update a hidden text box that gets updated when the visible text box is modified by the user.
So something like this: (this is just pseudocode...)
<form name="form1" method="post" action="controller1/method1">
<input type=text name=visibleTextBoxForForm1></input>
<button type=submit value=UPdate>
</form>
<form name="form2" method="post" action="controller2/method2">
<input type=hidden name=hiddenTextBoxforForm2></input>
<button type=submit value=New>
</form>
<script>
$('#visibleTextBoxForForm1').live('change', function() {
//update a hidden textbox in form2 with value of this textbox.
});
</script>
Is there a better way to do this?
Alternatively, you could do it via JQuery. Tie a clicklistener for each button and provide the correct URL to the form on click.
Here's some quick code... you'd have to correct the proper jquery queries for the correct elements.
<form name="form1" method="post">
<input type=text name=visibleTextBoxForForm1></input>
<button type=button value=Update>
<button type=button value=New>
</form>
<script>
$('update').click(function() {
$(form1).attr('action', <update url>).submit();
});
$('new').click(function() {
$(form1).attr('action', <new url>).submit();
});
</script>
If that's the only field, then simply have one form with two buttons and handle that text data based on the name of the button used to submit it.
<form name="form1" method="post" action="controller1/method1">
<input type="text" name="text" />
<input type="submit" name="insert" value="Insert New Data" />
<input type="submit" name="update" value="Update Existing Data" />
</form>
PHP (not CodeIgniter, since I'm not familiar with that framework):
if(isset($_POST['insert'])) {
// insert $_POST['text']
} else if (isset($_POST['update'])) {
// update $_POST['text']
} else {
// error
}