Run both Javascript-function and PHP - javascript

I'm working on a contact-footer. The HTML looks like this:
<form action="indexTest.php" method="post">
<input spellcheck="false" class="first" type="text" name="name" placeholder="name">
<input spellcheck="false" class="first" type="text" name="email" placeholder="email">
<textarea rows="5" spellcheck="false" class="last" type="text" name="message" placeholder="message"></textarea>
<input type="submit" name="submit" value="" id="button" onclick="banner()">
</form>
Now if I click on "submit", the PHP-file is running. But as you see in the code, you see "onclick="banner()". But this doesn't work. Only the PHP works. It would like to run both a Javascript-function and PHP.
I want to achieve that if you click on 'submit'; the PHP-file runs and a banner is displayed by Javascript.

you can use onsubmit() function which first execute function then action event will work
<form onsubmit="return banner();" action="indexTest.php" method="post" name="theForm">
<input spellcheck="false" class="first" type="text" name="name" placeholder="name">
<input spellcheck="false" class="first" type="text" name="email" placeholder="email">
<textarea rows="5" spellcheck="false" class="last" type="text" name="message" placeholder="message"></textarea>
<input type="submit" name="submit" value="" id="button">
</form>
<script type="text/javascript">
function banner(){
alert('working');
document.theForm.submit();
}
</script>
hope it will help you

The javascript function can be attached to the form onsubmit event.
<form action="indexTest.php" method="post" onsubmit="banner()">
<input spellcheck="false" class="first" type="text" name="name" placeholder="name">
<input spellcheck="false" class="first" type="text" name="email" placeholder="email">
<textarea rows="5" spellcheck="false" class="last" type="text" name="message" placeholder="message"></textarea>
<input type="submit" name="submit" value="" id="button">
</form>
The onclick event maybe just run when the button type is "button".

Related

HTML form onsubmit error / method="post" not working

I have a working php/mysql form submission and I'm trying to disable the submit button once the form is submitted,
HTML
<form action="" onsubmit="document.getElementById('submit-button').disabled = true;" method="post">
<p><label>Username</label>
<input id="username" type="text" name="username" value="" autofocus/></p>
<p><label>Password</label>
<input type="password" name="password" value="" /></p>
<p><label></label>
<input type="submit" id="submit-button" name="submit" value="Login" /></p>
</form>
It works fine without the onsubmit but when I add it i guess the post method isnt firing. I tried adding:
onsubmit="document.getElementById('submit-button').disabled = true; return true;"
but no luck.
Instead of using javascript. You can directly use php
<form action="" method="post">
<p><label>Username</label><input id="username" type="text" name="username" value="" autofocus/></p>
<p><label>Password</label><input type="password" name="password" value="" /></p>
<p><label></label><input type="submit" id="submit-button" name="submit" value="Login" <?php echo ('POST' == $_SERVER['REQUEST_METHOD']) ? 'disabled' : ''?>/></p>
</form>
If you post then submit button will be disabled.
It seems that your form is submitted directly, executing the 'action' tag. If you want to stay on the same form try using an AJAX request instead..
Try:
<form action="" method="post">
<p><label>Username</label>
<input id="username" type="text" name="username" value="" autofocus/></p>
<p><label>Password</label>
<input type="password" name="password" value="" /></p>
<p><label></label>
<input type="submit" id="submit-button" name="submit" value="Login" /></p>
</form>
with following script:
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$("#submit-button").on("click", function(e){
// For demo purpose
e.preventDefault();
document.getElementById("submit-button").disabled = true;
});
</script>
Using jquery,
<form action="" method="post">
<p><label>Username</label><input id="username" type="text" name="username" value="" autofocus/></p>
<p><label>Password</label><input type="password" name="password" value="" /></p>
<p><label></label><input type="submit" id="submit-button" name="submit" value="Login"/></p>
</form>
within script tags,
$(function(){
$("#submit-button").click(function(){
$("#submit-button").prop("disabled", true);
});
});

Form does not shows on clicking using JS

I have made form and it is hidden using CSS display property. I have button. I want to show the form when I click that button. I have done everything from my end but still form does not show up.
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Below is my JS function which is not trigerring.
$("button").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});
The function showLoginForm() is not defined. Your jquery was listening for a button click, when your button is of type input.
$("input[type=button]").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" />
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Or with the function defined:
function showLoginForm(){
$("#loginForm").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Your issue is that your input is type button, not a button element itself.
so either changing your input to a button or changing your jquery binding to $('input[type=button]') ought to work
http://jsfiddle.net/4Lz5rsq3/

jquery on submit form search for its corresponding div and hide form

I have multiple forms in same page with submit , i want to hide the form after form submit and display a link for the respective forms
Below is the html i have the same class name for all the forms
and for the submit class also.
<div id="wpcf7-f63-p1-o1">
<form name="" class="wpcf7-form" action="" method = "post">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</form>
</div>
<div id="wpcf7-f63-p1-o2">
<form name="" class="" action="" method = "post">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</form>
</div>
i tried the below code
<script>
jQuery(".wpcf7-form").submit(function()
{
jQuery("^wpcf7-f63-p1-").hide();
});
</script>';
In your example typed:
jQuery("^wpcf7-f63-p1-").hide();
i think should be:
jQuery("#wpcf7-f63-p1-o1").hide();
Use this on form submit
$('input[type="submit"]').click(function() {
$form = $(this).parent();
$('<p>link to form</p>').insertBefore($form);
$form.hide();
});
Are you looking for jquery .find() ?
you could do something like this:
$('form').submit(function(){
$(this).find('.myForm').hide();
$(this).find('.link').show();
}
.link {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="" class="" action="" method = "post">
<div class="myForm">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</div>
<a class="link" href="#">Link</a>
</form>
ah error on your jquery selector, change your js to:
jQuery(".wpcf7-form").submit(function()
{
jQuery("[id^='wpcf7-f63-p1-']").hide()
return false;
});
working jsfiddle code
NB. you may need to delete the return false, I added it to see the elements getting disappeared after submit.

Form get targeted at website load

Since adding a contact form to my website, when I refresh the page it constantly scrolls the page to where the form is.
I don't know what could provoke this, so I came to ask. I searched for similar issues but couldn't find any.
Thanks for all.
Form from site:
<form method="post" action="contact.php">
<input type="text" id="name" name="name" value="" placeholder="Nom prénom" required="required" autofocus="autofocus" />
<input type="email" id="email" name="email" value="" placeholder="email#example.com" required="required" />
<input type="phone" id="phone" name="phone" value="" placeholder="00.00.00.00.00" />
<textarea id="message" name="message" placeholder="Bonjour,..." required="required"></textarea>
<button type="submit" value="Envoyer!" id="submit-button" >Envoyer</button>
</form>
Corrected form :
<form method="post" action="contact.php">
<input type="text" id="name" name="name" value="" placeholder="Nom prénom" required="required" />
<input type="email" id="email" name="email" value="" placeholder="email#example.com" required="required" />
<input type="phone" id="phone" name="phone" value="" placeholder="00.00.00.00.00" />
<textarea id="message" name="message" placeholder="Bonjour,..." required="required"></textarea>
<button type="submit" value="Envoyer!" id="submit-button" >Envoyer</button>
</form>
When you copy an old form, be sure to properly read each line (my biggest error there).
There was an autofocus attribute in my form and that's what caused the problem.
Your problem seems to be with the 'autofocus' attribute.
http://www.w3schools.com/tags/att_input_autofocus.asp
You should remove it from the following form like so:
<form method="post" action="contact.php">
<input type="text" id="name" name="name" value="" placeholder="Maamar Miloud" required="required" />
<input type="email" id="email" name="email" value="" placeholder="contact.maamar#gmail.com" required="required" />
<input type="phone" id="phone" name="phone" value="" placeholder="06.15.73.0x.0x" />
<textarea id="message" name="message" placeholder="Bonjour,..." required="required"></textarea>
<button type="submit" value="Envoyer!" id="submit-button" >Envoyer</button>
</form>
Here's a fiddle showing an extreme example: http://jsfiddle.net/xefq9t0z/1/
It's much easier to help you when you provide snippets of code so we don't have to dig through your entire site! You're very lucky that I'm very bored!

Populate form field from form on previous page

I've have HTML code from Listrak to display a form on my site. In Listrak, I've asked this form to redirect to a new page on Submit, where there is a second Listrak form. How can I use Javascript or jQuery to auto-populate the email field from Form 1 to Form 2?
Form 1:
<form method="post" action="#" id="form1">
<input type="text" name="email" size="40" maxlength="100" id="email" value=""/>
<input type="text" name="name" size="40" maxlength="100" id="name" value=""/>
<input type="submit" id="submit" value="Submit">
</form>
Form 2:
<form method="post" action="#" id="form2">
<input type="text" name="email" size="40" maxlength="100" id="email" value="auto.populated.from.form1"/>
<input type="text" name="hobbies" size="40" maxlength="100" id="hobbies" value=""/>
<input type="submit" id="submit" value="Submit">
</form>

Categories

Resources