hi i am using a form for users subscription on the website with target is _new.
when i click on the submit button that the submitting message shows on the new window but the previous window still holding the data.
How to remove input fields data after submitting.
<form target="_new" action="samplepage.php" method="post">
<input type="text" name="inputtxt1" />
<input type="text" name="inputtxt2" />
<input type="submit" value="submit" />
</form>
Any suggestions???
Make the autocomplete - off
try this
<form target="_new" action="samplepage.php" method="post" autocomplete="off">
<input type="text" name="inputtxt1" />
<input type="text" name="inputtxt2" />
<input type="submit" value="submit" />
</form>
Reset form data using this
$('form').get(0).reset();
$(document).ready(function(){
$('form_name').submit(function(){
$('input[type="text"]').val('');
});
});
You can set value to null for text field using jquery on submit button click
$("input[type=submit]").click(function()
{
$("input[type=text]").val('');
});
EDIT:
I don't know is this a good approach, use blur instead of click event
$("input[type=submit]").blur(function()
{
$("input[type=text]").val('');
});
But it will meet your need.
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 a simple form as outlined in the code below. I would like to append the value submitted in rm_accounts text box to the hidden page_confirm input value at the end of the URL. Hopefully that makes sense.
Essentially, if the user enters '123456' in the rm_accounts textbox, I want value of page_confirm to be http://www.mywebsite.com/index.php?rm_accounts=123456
<form name="signup" method="post" action="https://go.reachmail.net/libraries/form_wizard/process_subscribe.asp" >
<input type='text' name='rm_accounts' value='' />
<input type="hidden" name="page_confirm" value="http://www.mywebsite.com/index.php?rm_accounts=">
<input type="submit" name="Submit" value="Submit" >
</form>
All help is very much appreciated. Thanks!
Use Jquery focusout event to update hidden field value
When user enters 12345 and focus out of textbox or clicks submit(or anywhere) the below code get executed and update the value of hidden field.
$('input[type=text]').focusout(function(){
$('input[type=hidden]').val("http://www.mywebsite.com/index.php?rm_accounts="+$('input[type=text]').val());
console.log($('input[type=hidden]').val());
});
or in submit button click
$('input[type=submit]').click(function(){
$('input[type=hidden]').val("http://www.mywebsite.com/index.php?rm_accounts="+$('input[type=text]').val());
console.log($('input[type=hidden]').val());
});
Working JSFiddle link
http://jsfiddle.net/mkamithkumar/qNdny/1/
I would first suggest you give your HTML some IDs like so:
<form id="signup" method="post" action="https://go.reachmail.net/libraries/form_wizard/process_subscribe.asp" >
<input type='text' name='rm_accounts' id='rm_accounts' value='' />
<input type="hidden" name="page_confirm" id="page_confirm" value="http://www.mywebsite.com/index.php?rm_accounts=">
<input type="submit" name="Submit" value="Submit" >
</form>
Then use some jQuery for your task:
$('#signup').submit(function(){
var value = $('#rm_accounts').val();
var page_confirm = 'http://www.mywebsite.com/index.php?rm_accounts='+value;
$('#page_confirm').val(page_confirm);
});
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
}
I have a page with login form (on click, login form slides dowm) and underneath I have a link for registering a new user. With click on 'register new' link, new form pops-up and after validating each field, the submit event doesn't work - because there is a login form too and jQuery tries to trigger submit event of the first form.
How to trigger this specific onsubmit event - for the second form? I tried to hide a first form, but it didn't work and then I try to disabled it, which doesn't work as well.
(forms on separate pages works fine - validated with PHP and JS)
I think this is an easy thing to do .. but I cannot figure out how to do. Till now I overcome this problem, but I really like to find out how to make it work.
Thanks.
Unfortunatelly .. none of this answers works ...
Here is the code:
<div id="loginFormContainer">
<h2 id="loginShow" class="myriad_pro_bold_condensed_italic">Login</h2>
<form name="login_form" action="<?php if(isset($action) && !empty($action)) echo $action; ?>" method="POST" id="login_form" >
<fieldset>
<label>Your name </label>
<input type="text" name="username" maxlength="30" id="username_login" value="" class="required" placeholder="Enter Your Name" />
<label>Your password </label>
<input type="password" name="password" maxlength="16" id="password_login" value="" class="required " placeholder="Enter Your Password" />
</fieldset>
<input type="hidden" name="token" value="<?php if(isset($token)) echo $token; ?>" />
<input type="submit" name="submit-login" id="submit_login" value="Login" />
</form>
<div class="small">Register | Forgotten Password</div>
<div class="error"></div>
</div>
And JS ... should work like: if on register click: register windows pops-up, if on login the login form should slide down.
Right now, both of them slides ...I can remove the login form if I want to register, but the submit button from register form doesn't work.
$("#login_form").hide();
$("#loginShow").click(function(){
$('form#login_form .error').remove();
$("#login_form").slideDown("slow");
$('form#login_form').on("submit", function(event) {
event.preventDefault();
//code validation and ajax submit
}); //end form submit
});
$('#register').click(function(e) {
//$('#loginShow').remove(); //form is removed, but submit event still doesn't work
//if I completely remove login form from php page, then works fine
e.preventDefault();
$('form#register_form').click(function(event) {
event.preventDefault();
//
}); //end form submit
});//end register floating
Oh, yes, one final detail: on Chrome works fine :S, not in FF (v.10)
$(":submit").click(function(e){
$(this).closest("form").submit();
return false;
});
Try this:
var secondForm = $('form').eq(1);
secondForm.trigger('submit');
Just give the second submit button an id.
<input type='submit' id='submit2'>
Now for trigerring validation bind onclick event to the submit2 id
$('#submit2').click(function(){
//logic goes here
});
I have a submit form for a URL and I want it to have specific behavior which I am not able to achieve so far. Initially I want the button to be enabled. After someone enters a URL and hits the "submit" button, I want to call my checkURL() function. If the function returns true, I want the button to become disabled and I want to then open remote_file.php. If it returns false, I want the button to be enabled and make them try another URL.
<form name=URLSubmitForm
action="remote_file.php"
method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="524288000">
<input type="text" name="name" size="50">
<input type="submit"
onchange="this.disabled=false"
onclick="this.disabled=true; checkURL();"
value="submit">
</form>
Edit: It looks like I was just putting the onchange in the wrong place. I ended up doing this to fix reenabling the button
<input type="text" onchange="submit.disabled=false" name="name" size="50">
Thanks!
I would propose that you attach the event handling code to the form's onsubmit event, not the button event(s). What you're trying to control is whether or not the form is posted. The button being disabled while your validation logic runs is a secondary goal.
Try this instead:
<script type="text/javascript">
function checkURL(){
var submitButton = document.getElementById('submitButton');
submitButton.disabled=true;
/* implement your validation logic here
if( url is invalid ){
submitButton.disabled=false;
return false;
}
*/
// everything is valid, allow form to submit
return true;
}
</script>
<form name="URLSubmitForm" action="remote_file.php" onsubmit="return checkURL();" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="524288000">
<input type="text" name="name" size="50">
<input type="submit" name="submitButton" id="submitButton" value="submit">
</form>
<input type="submit"
onclick="if (checkURL()) { this.disabled='disabled'; return true; } else { return false; }"
value="submit">
How about in the form's onsubmit event:
<form onsubmit="(function(){
if(checkURL()){
this.elements['submit'].disabled = 'disabled';
}
else{
return false;
}
})()">
Since you haven't given any ajax code, the form will still be submitted normally and when the page is reloaded the button will be enabled again.
onclick="checkURL(this);"
function checkURL(arg){
this.disabled=true;
if(<something>) this.disabled=false;
}