I only just started learning JS like 5-10 minutes ago, I was told by someone to try and create a basic validation feature, however it doesn't seem to work as wanted. It checks if field is empty, that part works. But checking if it's got something in it and carrying on running the code doesn't.
my form:
echo '<form action="index.php?action=getHashedText" method="post" name="formHash">
<br/><textarea name="text" rows="4" cols="50" placeholder="Add your text/pharse/word which you want hashing here." autofocus></textarea><br/>
<button type="button" name="button" onclick="return validate();">Hash</button>';
function validate():
<script>
function validate() {
with (window.document.formHash) {
if (formHash.text.value === "") {
alert('Field is empty!');
return false;
} else {
return true;
}
}
}
</script>
The problem is you are using a button that is not submitting the form anyway (regardless of your js), change this dom:
<button type="button" name="button" onclick="return validate();">Hash</button>
To this: Fiddle
<input type="submit" name="button" value="Hash" onclick="return validate();" />
Or you can just add type="submit" on your <button> (HT #RocketHazmat): Fiddle
<button type="submit" name="button" onclick="return validate();">Hash</button>
Or you can just remove the type on your <button> all together as the default type is submit (HT #FabrícioMatté): Fiddle
<button name="button" onclick="return validate();">Hash</button>
Also, slightly off topic but I would get in the habit of avoiding putting javascript onclicks directly on your elements. You can create listeners instead: addEventListener
Related
I have a simple form in HTML that contains two buttons. Button 1 which action in the form tag submits it to another php page e.g. button1-action.php which submits data to a third party API and Button 2 which I want to submit to the same page if it is clicked without going to button1-action.php.
In its simplest method the form is as follows:
<?php
echo '<form name="form123" id="form123" action="button1-action.php" method="POST">';
echo '<input type="text" name="first_name" id="first_name></input>';
echo '<button name="button1" id="button1" value="button1">Button 1</button>';
echo '<button name="button2" id="button2" value="button2">Button 2</button>';
echo '</form>';
?>
This is what I tried so far
$action = null;
if (isset($_POST['button1'])) {
$action = 'button1-action.php';
} elseif (isset($_POST['button2'])) {
$action = $_SERVER["PHP_SELF"];
}
echo '<form name="form123" id="form123" action="' . $action . '" method="POST">';
echo '<input type="text" name="first_name" id="first_name></input>';
echo '<button name=" button1" id="button1" value="button1">Button 1</button>';
echo '<button name="button2" id="button2" value="button2">Button 2</button>';
echo '</form>';
However, it doesn't seem to be working. I tried to look for solutions but I haven't been successful.
I'm interested in any solution, but I would prefer solving it using PHP and not JavaScript.
The Issue might be that you forgot to close the <form> tag with </form> and you should use the <input> for buttons aswell with type="submit" .
If this still doesn't resolve your issue then maybe you should try this :
On the same page.
<?PHP
//// place this on top
if($_POST["button1"]) {
// add code to send data to Third Party API
}
if($_POST["button2"]) {
// will show data here
} ?>
////////
<?php
echo '<form name="form123" id="form123" action="/">';
echo '<input type="text" name="first_name" id="first_name></input>';
echo '<input type="submit" name="button1" id="button1" value="button1" >';
echo '<input type="submit" name="button2" id="button2" value="button2" >';
echo '</form>';
?>
I hope this answers your question 😊
This is the solution for you in html
<form name="form123" id="form123" method = "post">
<input type="text" name="first_name" id="first_name"></input>
<button name=" button1" id="button1" value="button1" formaction="button1-action.php" >Button 1</button>
<button name="button2" id="button2" value="button2" >Button 2</button>
</form>
button 1 will submit the form to button1-action.php and button 2 will submit the form to same page.
Documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction
You appear to be using the value submitted from the form to set the action of the form. This makes no sense - by the time you read the submitted values, the action has already happened. So your code would just set the action for next time the form is submitted. Not useful.
At the heart of this there seems to be a conceptual / design issue. A more sensible approach (but not the only one) would be to simply post the form to the same place every time, and then use if statements to decide what to do next.
e.g.
if (isset($_POST['button1'])) {
require_once "button1-action.php";
} elseif (isset($_POST['button2'])) {
//do whatever it is you want to do in ths script
}
else {
?>
<form name="form123" id="form123" method="POST">';
<input type="text" name="first_name" id="first_name></input>
<button name=" button1" id="button1" value="button1">Button 1</button>
<button name="button2" id="button2" value="button2">Button 2</button>
</form>
<?php
}
To improve a bit more on that, instead of using a bare require to include the code from another script, we could encapsulate the code from button1-action.php into a function which we can call, instead of a script with global scope. This makes the code more re-usable, maintainable, testable, less likely to cause scope conflicts, etc.
e.g.
if (isset($_POST['button1'])) {
callTheApi($_POST["first_name"]);
} elseif (isset($_POST['button2'])) {
doSomethingElse($_POST["first_name"]);
}
else {
?>
<form name="form123" id="form123" method="POST">';
<input type="text" name="first_name" id="first_name></input>
<button name=" button1" id="button1" value="button1">Button 1</button>
<button name="button2" id="button2" value="button2">Button 2</button>
</form>
<?php
}
(Even better if you then encapsulate that function in a class containing closely related functionality, but let's just get as far as a funtion for now.)
Alternatively, Virender Kumar's answer would also be reasonable - simply setting the form action of each button directly.
First of all your form is not structured properly.
index.php
<form name="form123" id="form123" action="button1-action.php">
<input type="text" name="first_name" id="first_name"></input>
<button name=" button1" id="button1" value="button1">Button 1</button>
<button name="button2" id="button2" value="button2">Button 2</button>
</form>
button1-action.php
if (isset($_GET['button1'])) {
echo 'button1 submitted'; // Send data to the third party API
} else if (isset($_GET['button2'])) {
echo 'button1 submitted'; // Submit on the same page
}
Edit: ignore my solution; Virender Kumar’s solution here is correct, elegant and doesn’t need JS.
Original answer:
The issue is not with your buttons, but with the fact that a form can only post to a single endpoint (the action attribute). You will have to handle what happens with the form data from there. If you truly want your form to be posted to a different endpoint in the client based on what button the user clicks, you can’t do it without JavaScript.
If you can live with JS, this could work:
<body>
<!-- your form here -->
<script>
const form = document.forms[0]; // assuming your form is the first form on the page, or the only one
document.querySelectorAll('button').forEach(button => {
button.addEventListener('click', event => {
if (event.target.name === 'button1') {
form.action = 'button1-action.php';
} else if (event.target.name === 'button2') {
form.action = 'other-destination';
}
});
});
</script>
</body>
I was wondering if it was in any way possible to be able to determine the ID of the form that was posted on PHP?
<form id="ES1A" action="enroll.php" method="post">
<input type="checkbox"/>
<button type="submit" class="btn btn-primary">Next Step</button>
</form>
In the enroll.php
if(isset($_POST['ES1A']))
{
//Code after checking that the form that was submitted indeed has the ID of ES1A
}
P.S: I'm not too sure on how i would do this on PHP. Thank you in advance
Post does not use the ID of the element, rather the name, so instead of your current form, you could use;
<form name="ES1A" action="enroll.php" method="post">
<input type="checkbox"/>
<input name="formid" value="ES1A" /><!-- This holds your form id so you can use this -->
<button type="submit" class="btn btn-primary">Next Step</button>
</form>
And in the PHP;
if (isset($_POST['ES1A']) // Unsure if form itself will be posted with the submit
{
// This is set as it uses the name of the element
$formid = $_POST['formid']; // Get the ID of the form from the element passed in
}
If form's name attribute does not work you can always set name for button:
<button name="ES1A" type="submit" class="btn btn-primary">Next Step</button>
Or:
<input name="ES1A" type="submit" class="btn btn-primary" value="Next Step">
PHP part should be the same as you already have:
if(isset($_POST['ES1A']))
{
//Code after checking that the form that was submitted indeed has the ID of ES1A
}
an alternative is to use hidden input
<input name="ES1A" value="formid" type="hidden" />
I have a doubt on the following code. My function is not called when the save button is clicked .
This is the following code for save function,
if(isset($_POST['Save'])) // If the submit button was clicked
{
echo "hgfd";
$post['ProductSegmentCode'] = $_POST['ProductSegmentCode'];
$post['ProductSegment'] = $_POST['ProductSegment'];
$post['ProductGroup'] = $_POST['productgroup'];
// This will make sure its displayed
if(!empty($_POST['ProductSegment'])&&!empty($_POST['ProductSegmentCode'])&&!empty($_POST['productgroup']))
{
echo "SAVE";
$news->addNews($post);
?>
<script type="text/javascript">
alert("Created Sucessfully..!!");
</script>
<?
}
else
{
?>
<script type="text/javascript">
alert("Enter Mandatory Fields");
</script>
<?
}
}
following is the button format in html,
<div style="width:70px; height:32px; float:left; margin-top:16px; margin-left:4px;">
<input name="Save" type="button" class="button" value="Save">
</div>
Your button is type="button"; to get the form to submit, it needs to be type="submit". Try updating it with this and it should work (also pending you form has action="post", or no action specified; the default is post):
<input name="Save" type="submit" class="button" value="Save" onclick="Save" />
Also, you're using onclick="Save" in your button. This indicates you have a corresponding JavaScript function named Save() - though, per your code examples you do not show one. I'm assuming that this is in error and can safely be removed (the value="Save" can also be removed as you only need to check isset($_POST['Save']) and not it's actual value). All changes in-place should give you:
<input name="Save" type="submit" class="button" />
If you do, in fact, have a JavaScript function named Save(), please post its code and I can revise.
use form for sending data and use type submit
<form action="" method="post">
<input name="Save" type="submit" class="button" value="Save">
</form>
and if you want to use this
<input name="Save" type="button" class="button" value="Save" onclick="Save()">
create Save() function in javascript and use ajax call for sending data.
It looks like you should change
<input name="Save" type="button" class="button" value="Save" onclick="Save">
to a summit button.
<input name="Save" type="submit" class="button" value="Save">
<input type="button" value="Delete" onclick=show_confirm(http://mydomain.com/delete.php)>
I have this button and this JavaScript function, but they don't work.
When I click the button, nothing happens.
What is wrong with my code?
function show_confirm(url){
var r = confirm("Do you want to delete this?");
if (r == true){
window.navigate(url);
}
else{
alert("You pressed Cancel.");
}
}
Your html is not well formed.
<input type="button" value="Delete" onclick=show_confirm(http://mydomain.com/delete.php)>
should be
<input type="button" value="Delete" onclick="javascript:show_confirm('http://mydomain.com/delete.php');" />
The javascript: is only necessary if you also have VBScript on the page, but it's a good habit to be in.
Pass the url inside double quotes.
<input type="button" value="Delete" onclick=show_confirm("http://mydomain.com/delete.php")>
Working sample : http://jsfiddle.net/93QWJ/
<input type="button" value="Delete" onclick="show_confirm('http://mydomain.com/delete.php')">
no quotes around onclick function
like this : "show_confirm(url)"
I searched the question several times, but didn't get the solution, that's why I'm asking here. I already know how to add&remove one-level input elements, as follow:
<script type="text/javascript">
$(document).ready(function() {
$('#btn_addOpt').click(function () {
var opt = $('<div></div>');
opt.append('<p>Answer:</p>');
opt.append('<input type="text" name="lable[]">');
$('#opt').append(opt);
});
$('#btn_removeOpt').click(function () {
$('#opt div:last').remove();
});
});
</script>
And the body of html is:
<form action="" method="post">
What's the question?<br/>
<input type="text" name="name"/><br />
<input type="button" id="btn_addOpt" value="Add Answer"/>
<input type="button" id="btn_removeOpt" value="Remove Answer"/><br/>
<div id="opt"></div><br/>
<input type="submit" value="submit"/>
</form>
The idea is when I click the 'Add Answer' button, a group of elements:
<p>Answer:</p>
<input type="text" name="lable[]">
will be added, and also will be removed after I click the 'Remove Answer' button. However, what I try to do is to take all elements above as a group, which inclues the:
What's the question?<br/>
<input type="text" name="name"/><br />
<input type="button" id="btn_addOpt" value="Add Answer"/>
<input type="button" id="btn_removeOpt" value="Remove Answer"/><br/>
<div id="opt"></div><br/>
And I try to add&remove this group dynamically. So I try:
<script type="text/javascript">
$(document).ready(function() {
$('#btn_addQues').click(function () {
var que = $('<div></div>');
que.append('<p>What\'s the question?</p>');
que.append('<input type="text" name="name"/>');
que.append('<input type="button" id="btn_addOpt" value="Add Answer"/>');
que.append('<input type="button" id="btn_removeOpt" value="Remove Answer"/><br/>');
que.append('<div id="opt"></div><br/>');
$('#question').append(que);
});
$('#btn_removeQues').click(function () {
$('#question div:last').remove();
})
$('#btn_addOpt').click(function () {
var opt = $('<div></div>');
opt.append('<p>Answer:</p>');
opt.append('<input type="text" name="lable[]">');
$('#opt').append(opt);
});
$('#btn_removeOpt').click(function () {
$('#opt div:last').remove();
});
});
</script>
And the body become:
<body>
<input type="button" id="btn_addQues" value="Add Question"/>
<input type="button" id="btn_removeQues" value="Remove Question"/>
<form action="" method="post">
<div id="question"></div>
<input type="submit" value="submit"/>
</form>
</body>
However, it can add&remove the whole group of elements dynamically, but inside the group, the "Add Answer" and "remove answer" buttons don't work. Seems there are some conflicts. Or there might be some other ways that can do it. Basically, What I try to do is to add&remove a group of elements by buttons, and inside the group there are also two buttons to add&remove some other input elements. So it's a nested(two-level) elements creation. And all information filled in will be posted to another page. I'm not sure if I explain clearly, but anyone could help? Please provide some codes, thank you!
You would need to rebind the onclick events to the new html elements created in your new group. So after copying the HTML, you would need to do $("#btn_addQues).click("etc..."), so you might want to think about creating reusable functions for them.
However, if you are going to use ids they need to be unique.