Passing option value to onSubmit? - javascript

I have a form being rendered in a React component. Inside the form are an input field, an option dropdown, and a button to submit.
Basically when the button is clicked, I want to pass the selected option into the onSubmit handler, which in the code below is chef.id.
The problem is, all the chef objects are mapped inside the form, and I'm not sure how to extract the selected chef, to pass into onSubmit.
I didnt use this for the event listener methods because I'm using redux, though I suppose that's not relevant to this particular problem.
return (
<div className="form-input">
<form onSubmit={handleSubmitRecipes(**chef.id**)}>
<input onChange={handleChange}/>
<select>
{chefs.map(chef => <option value={chef.name}>{chef.name}</option>)}
</select>
<button>Create</button>
</form>
</div>
)
Thanks in advance!

If you are willing to try some original DOM operations, maybe below codes can help you.
<form>
<input name="name" />
<select name="age">
<option>10</option>
<option>20</option>
<option>30</option>
</select>
<button>submit</button>
</form>
const [form] = document.getElementsByTagName("form");
form.addEventListener("submit", function(event) {
console.log(form.age.value);
console.log(form.name.value);
event.preventDefault();
}, false);

Related

Javascript - Watch for 1st interaction/change on form element

I would like to know how to go about watching for the first change event on a series of form fields/input elements (I have multiple selects/dropdowns and text inputs), and trigger something, but only trigger it once. Not every time an item is changed. And any one of the fields can trigger it.
My situation is I have a services calculator that outputs both a quote for self funding and also estimates which government package level will cover their needs, there's a lot of select input elements/dropdowns and I want any one of these to be able to trigger the event above but only once, (first interaction with the calculator basically) but they are not in a form because we don't need to submit anything, just display the results (this is dynamically updated as fields are changed using .onchange). All of this calculation logic is working correctly I don't need help with any of that.
I just want to know how one would approach this with vanilla JS, if at all possible?
Use event delegation: add an input event listener to an element that's a parent of all the <form>s (it could be the document.body):
let hasRun = false;
document.querySelector('.container').addEventListener('input', (e) => {
if (hasRun) return;
hasRun = true;
console.log('Handler running');
});
<div class='container'>
<form>
<select>
<option>foo</option>
<option>bar</option>
</select>
<input />
</form>
<form>
<select>
<option>foo</option>
<option>bar</option>
</select>
<input />
</form>
</div>
Or, with the once option (warning, not supported in IE):
document.querySelector('.container').addEventListener(
'input',
(e) => {
console.log('Handler running');
},
{ once: true }
);
<div class='container'>
<form>
<select>
<option>foo</option>
<option>bar</option>
</select>
<input />
</form>
<form>
<select>
<option>foo</option>
<option>bar</option>
</select>
<input />
</form>
</div>

How to tell when Form submitted by Select onChange versus Submit Button

I need assistance determining when my form was submitted via an onChange event for a Select as opposed to the user clicking on the Submit button.
To complicate matters, I need to be able to identify the difference in PHP.
Sample HTML:
<form name='editdata' method='post' action='/editpage/recordnumber'>
<select name='select1' onchange='this.form.submit()'><options...></select>
<select name='select2' onchange='this.form.submit()'><options...></select>
<select name='select3' onchange='this.form.submit()'><options...></select>
<input type='submit' value='Submit' />
</form>
Ultimately, I just need something to latch onto using PHP that identifies whether the form was submitted by an onChange event or by a press of the Submit button.
So far I have found that I can name my submit button 'submit'. This will set $_POST['submit'], thereby telling me that the user clicked the button. However, my onChange event this.form.submit() which is applied to a couple of my Selects stops functioning when I add the name attribute to my submit button.
If I could add some sort of queryString to the end of my submit URL with one method or the other, I think that would get the job done.
You could set a hidden field which gets updated by the event:
<form name='editdata' method='post' action='/editpage/recordnumber'>
<input type="hidden" name="submitted_on_change" value="0">
<select name='select1' onchange='form_submit()'><options...></select>
<select name='select2' onchange='form_submit()'><options...></select>
<select name='select3' onchange='form_submit()'><options...></select>
<input type='submit' value='Submit' />
</form>
<script>
var form_submit = function() {
// update the hidden field to 1
// then submit the form
}
</script>
You can call multiple functions inside your onchange and fill another field with the name of the select field that caused the submission of the form (or it is empty when submit button was pressed):
<form name='editdata' method='post' action='/editpage/recordnumber'>
<input type='hidden' name='field' value='' />
<select name='select1' onchange='this.form.field.value=this.name; this.form.submit();'><options...></select>
<select name='select2' onchange='this.form.field.value=this.name; this.form.submit();'><options...></select>
<select name='select3' onchange='this.form.field.value=this.name; this.form.submit();'><options...></select>
<input type='submit' value='Submit' />
</form>

Send value with Onchange and javascript function

I'm new at JavaScript and I need some help to submit my form when anyone select anything from the dropdown list. Here is the sample code :
<form action="" method="post">
<select name="car" onChange="this.form.submit()">
<option value="car1">car1</option>
<option value="car1">car1</option>
<option value="car1">car1</option>
</select>
<!-- Some other code -->
<input type="submit" name="sentvalue">
</form>
This is my form and when anyone selects the dropdown, the form automatic submit but I also need the sentvalue when automatic submit the form. So can anyone help me to capture the sentvalue when anyone select the dropdown.
If you want to send any other data with the form submit you can send it in hidden inputs
<input type='hidden' name='data1' value='Test1' />
<input type='hidden' name='data2' value='Test2' />
//etc
And if you want the value of submit button with the form just set the value attribute into your code for submit button every this else seems fine,
<input type="submit" name="sentvalue" value="Test1" />
Hope this answers your question
Just give the <input> tag a name
<input name="submitbtn" type="submit" value="sentvalue" />
then you can get it by $_POST['submitbtn'] in case of PHP which value is "sentValue"
It sounds like you want the value of the input field (sentvalue) to be submitted as well. But how do you guarantee that the value was specified by the user? Is this supposed to be a hidden input field?
Either way your input tag is incomplete. This sounds better:
<input type="text" name="sentvalue"></input>
Also, when you submit, the value of this field (sentvalue) will be passed in too. As long as your tags are right you don't need to worry.
You will have to create a hidden input element
<input type='hidden' id='sentvalue' value='' />
and call a function on submit instead of directly submitting
Use this in the function to set the values and submit
var e = document.getElementByName("car");
document.getElementById("sentvalue").value = e.options[e.selectedIndex].value;
this.form.submit();

Change form action target without JavaScript

I have a form with select box. With JavaScript on, I take the change event to define the options-values as location.hrefs:
$('select').change(function(){
window.location.href = $(this).val();
});
With JavaScript off, I have a basic form with a submit button. To follow the targets given in the option values, I have to set them to the form action. Do you have any idea how I could get only the selected option as form target e.g. with any CSS selector or something like that?
The form:
<form action="test-1.html">
<fieldset>
<select id="lorem">
<option value="test-1.html">test1</option>
<option value="test-2.html">test2</option>
<option value="test-3.html">test3</option>
</select>
<input type="submit" value="senden" class="submit" />
</fieldset>
</form>
You will have to do this in server-side code. Without JavaScript enabled, there is no way to dynamically change anything in an HTML DOM.
So, submit to some intermediary page that's sole purpose is to redirect and perform the logic there.

jqtransform onclick events not firing

I have a form using the jqtransform jQuery plugin that gives forms an aesthetic makeover. However, I can't get my onclick events to fire.
I have a form setup similar to this:
<select name="person">
<option value="1">Yes</option>
<option value="2">No</option>
<option class="maybe" value="0">Maybe</option>
</select>
I also have a hidden div container which expands the form:
<div class="expander" style="display:none;">
More info <input type="text" name="moreinfo" />
</div>
Then the final piece of the puzzle:
<script>
$(".maybe").click(function () {
$(".expander").show("slow");
});
</script>
Any help would be greatly appreciated.
try using the change event instead of click.
http://api.jquery.com/change
here's a working example: http://jsfiddle.net/dwick/Sh4PA/
This is a dirty workaround, but works for me...
change the type of your input field to reset, then add an onclick event handler
<input type='reset' value='submit' onclick='$(#myFormId).submit()' />

Categories