I have a html form with input fields that require a value before submission and to achieve this I am using the required attribute in html5 Which is shown in the snippet below with the header Form One.
The problem is I'd like to add a confirm pop-up message after the delete button is clicked -- asking if the user wants to continue.
I have done this in the snippet shown below with the header Form Two but the problem is, the required attribute is not showing when the input field is empty and submitted.
The form gets submitted before the required method is triggered. Anyone has any ideas to solve this html5 incompetence?
THANKS
<h2>Form One </h2>
<form method="post" action="example.com" id="delete_page">
Name : <input type="name" required><br>
<input type="button" value="Cancel">
<input type="submit" value="Delete">
</form>
<hr>
<h2>Form Two </h2>
<form method="post" action="example.com" id="delete_page">
Name : <input type="name" required><br>
<input type="button" value="Cancel">
<input type="submit" onclick="confirm('Are you sure you want to submit')" value="Delete">
</form>
Try using onsubmit on your <form> rather than the button.
<h2>Form Two </h2>
<form method="post" action="example.com" id="delete_page"
onsubmit="return confirm('Are you sure you want to submit?')">
Name : <input type="name" required><br>
<input type="button" value="Cancel">
<input type="submit" value="Delete">
</form>
Browser form validation only kicks in on a submit event.
This will also prevent your form from submitting if the user chooses to "Cancel" the popup.
Related
I have a form like below:
<form action="/action_page.php" onsubmit="alert('The form was submitted');" >
Enter name: <input type="text" name="fname">
<input type="button" onclick="document.getElementsByTagName('form')[0].submit()" value="Submit">
</form>
Though I clicked the button and indeed it submitted the form, but the alert box wasn't shown. That is, the submit() method submitted the form but without triggering the onsubmit event. What happened? And how should I use submit() method to trigger the onsubmit event?
Well, the documentation for the submit method is pretty clear that it doesn't trigger onsubmit.
Since any of the following form elements cause a form submit:
<input type='submit'>
<input type='button'>
<button>
You likely don't need an onclick handler on that button at all
it seems that you can't, please check this post - https://stackoverflow.com/a/19847255/8449863
however, please try workaround with hidden submit button:
<form action="/action_page.php" onsubmit="alert('The form was submitted');" >
Enter name: <input type="text" name="fname">
<input type="button" value="Submit" onclick="document.getElementById('submit').click();" >
<input id="submit" type="submit" style="display: none;" />
</form>
So I have this html form:
<form>
<input type="text" placeholder="Equation" id="equation_input" onsubmit="return button_click()"/>
<input class = "search_button" type="submit" id="search" onclick="button_click()" value="Search"/>
</form>
And I need to take the value the user entered in the equation input, add it to the beginning of a url, and then redirect the user to that newly formed url.
I tried this in my script tags:
function button_click() {
var url = `https://exampleurl.com?q=${document.getElementById('equation_input').value}`;
window.location.replace(url);
}
I've tried a couple things, but I'm not sure what's causing the problem so I don't know exactly what to try.
No need for any js to do this. It can be done by default form submit by naming the input and setting action and method attributes of the form.
Note that an <input> has no submit event, only a <form> does
<form method="GET" action="https://exampleurl.com">
<input type="text" placeholder="Equation" id="equation_input" name="q" required/>
<input class="search_button" type="submit" id="search" value="Search" />
</form>
I have a form like below:
<form action="/action_page.php" onsubmit="alert('The form was submitted');" >
Enter name: <input type="text" name="fname">
<input type="button" onclick="document.getElementsByTagName('form')[0].submit()" value="Submit">
</form>
Though I clicked the button and indeed it submitted the form, but the alert box wasn't shown. That is, the submit() method submitted the form but without triggering the onsubmit event. What happened? And how should I use submit() method to trigger the onsubmit event?
Well, the documentation for the submit method is pretty clear that it doesn't trigger onsubmit.
Since any of the following form elements cause a form submit:
<input type='submit'>
<input type='button'>
<button>
You likely don't need an onclick handler on that button at all
it seems that you can't, please check this post - https://stackoverflow.com/a/19847255/8449863
however, please try workaround with hidden submit button:
<form action="/action_page.php" onsubmit="alert('The form was submitted');" >
Enter name: <input type="text" name="fname">
<input type="button" value="Submit" onclick="document.getElementById('submit').click();" >
<input id="submit" type="submit" style="display: none;" />
</form>
I have two forms on my page...
<form method="post" action="">
<input type="text" name="name" id="name"/>
<input type="submit" name="form1_submit_pushed"/>
</form>
<form method="post" action="">
<input type="submit" name="form2_submit_pushed/>
</form>
On my php side I want to be able to know the value of the text input "name" when I push the submit button of the second form. Kind of like....
if(isset($_POST['form2_submit_pushed']))
{
echo $_POST['name']; //or something else?
}
The reason behind is that first form has a bunch of data that I don't want in the second form submission.
You could do something like this...this code uses jQuery:
<form id="form1" method="post" action="">
<input type="text" name="name" id="name"/>
<input type="submit" name="form1_submit_pushed"/>
<input type="hidden" name="form2_submit_pushed" id="form2_submit_pushed">
</form>
<form id="form2" method="post" action="">
<input type="submit" name="form2_submit_pushed"/>
</form>
<script>
$('#form2').submit(function(event) {
//prevent form2 from submitting and submit form1 instead...
event.preventDefault();
//before submitting, indicate that the "form2_submit_pushed" button was pushed
$('#form2_submit_pushed').val(true);
//submit form1
$('#form1').submit();
});
</script>
...but why you would want to I don't know. Why not make all the controls part of the same form? HTML is designed to send info from only one form (at a time) to the server...
UPDATE: Sorry, I didn't notice your line where you explain your reason for wanting to do this. If you want more explicit control over what gets sent to the server I recommend using AJAX to submit the form. Look at https://api.jquery.com/serializeArray/ and https://api.jquery.com/jQuery.ajax/
Correct me if I am wrong here, but I beleive normal HTML will only post the inputs from the form you are posting from. One option would be to have a hidden input on the second form which gets updated via javascript during the input's change event.
So, you could do something like this (I don't recommend inline javascript but it should get you in the right direction):
<form method="post" action="">
<input type="text" name="name" id="name" onchange="document.getElementById('hiddenname').value=this.value"/>
<input type="submit" name="form1_submit_pushed"/>
</form>
<form method="post" action="">
<input type="hidden" name="hiddenname" id="hiddenname"/>
<input type="submit" name="form2_submit_pushed/>
</form>
Then you just need to get it using
$_POST['hiddenname'];
I have the following form:
<form method="post" action="" enctype="multipart/form-data">
<input type="text" name="name_car" />
<input type="submit" name="submit" class="btn" value="Add car" />
</form>
then to fetch the field use:
if($_POST['submit'])
{
$name_car= $_POST['name_car'];
....
}
So far so good. Now do the same with a button. Something of this kind (in the code below) and that the process to fetch the data is equal.
<form method="post" action="" enctype="multipart/form-data">
<input type="text" name="name_car" />
<button class="btn" type="submit" name="wizard-submit"></button>
</form>
The condition you are testing for to see if the form has been submitted is no longer true.
Original HTML:
name="submit"
New HTML:
name="wizard-submit"
The test in PHP:
if($_POST['submit'])
Additionally, your button has no value attribute, you'll need to add one (since otherwise $_POST['submit'] still isn't true)
You should also add some content to the button so that people know what it does.
<button class="btn" type="submit" name="submit" value="something">Submit</button>
If you want to use a button instead of input type submit replace $_POST["submit"] with your button name $_POST["wizard-submit"].
Then if you want your form be single page, change the form file extension to php and include your form process code in it.
NOTICE: use isset instead of vanilla if condition:
if ($_POST["submit"])
replace with:
if (isset($_POST["submit"]))
You can do that. Just put the path to the form in 'action' field.
did you try with the
if (isset ($_POST['submit']))
now the if condition only will be true if there are data, if it's null will be false.
The page with the form has to be saved as a PHP- document with the following code:
<form action="" method="post" enctype="multipart/form-data">
<input type="text" name="new_car" id="new_car" />
<input type="submit" name="submit" class="btn" value="new_car" />
</form>
if($_POST['submit']){
$var=$_POST['submit'];
}