javascript — изменить значение входного текста перед отправкой формы

Question

javascript — изменить значение входного текста перед отправкой формы

Я пытаюсь изменить значение моего входного текстового поля перед отправкой формы с помощью jQuery следующим образом:

<form actions="http://test.com/" method="GET">
<input name="test" id="autocompleteform" type="text"/>
</form>
<script>
$('#form-customer-attr-new').submit(function(e) {
var value = $("#autocompleteform").val();
value = value.substr(0, value.indexOf(' '));
if (!isNan(value) && !empty(value)) {
$("#autocompleteform").val(value);
alert($("#autocompleteform").val());
return true;
} else {
alert("Invalid Postcode");
return false;
}
});
</script>

когда я предупреждаю значение входного файла, оно показывает новое значение, но когда форма отправляется, параметр в URL все еще показывает старое значение ввода, например:

 old_input_value = "1234 justice spoiler message";
new_input_value = "1234";
the_url_after_form_submit_now = "http://test.com?test=1234+justice+spoiler+message";
the_url_after_form_submit_should_be ="http://test.com?test=1234";

4

forms javascript jquery php textinput

Решение

Другие решения

Вы отправляете форму, прежде чем изменить значение. Вы должны отправить форму, используя jQuery, после изменения значения.

Измените кнопку отправки для ссылки на функцию jquery, измените все, что вам нужно изменить, а затем отправьте форму, используя:

$("#formId").submit();

0

Для этого вам необходимо:

Запретить отправку формы
Изменить входное значение
отправить форму с JQuery $('#form').submit()

Предотвратите отправку формы с помощью e.preventDefault () прямо в вашем обработчике обратного вызова

0

Используйте свою пользовательскую отправку через ajax. т.е.

<form id="form-customer-attr-new" actions="http://test.com/" method="GET">
<input name="test" id="autocompleteform" type="text"/>
</form>
<script>
$('#form-customer-attr-new').submit(function(e) {
var value = $("#autocompleteform").val();
value = value.substr(0, value.indexOf(' '));
var urlPost = 'http://test.com/'
if (!isNan(value) && !empty(value)) {
$("#autocompleteform").val(value);
alert($("#autocompleteform").val());
$.ajax({
type: "GET",
url: urlPost+'?test='+value  ,
data: '',
dataType: "text",
success: function(resultData){
alert("Save Complete");
}
} else {
alert("Invalid Postcode");
//return false;
}
});
</script>

0

Отправить API для JQuery

Обработчик будет выполнен как ответ на $('#form-customer-attr-new').submit() (это практически функция обратного вызова), так что вам нужно переместить код из этой функции до того, как вы выполните фактическую отправку.

Так что переместите код прямо перед JQuery submit() вызов.

Кроме того, я вижу, что ваш id не добавляется в HTML, пожалуйста, сделайте это, иначе вызов не будет работать.

0

Шаг 1: вызов функции Java-скрипта при отправке формы

<form onsubmit="return test();">

Шаг 2: внутри тестовой функции установите значение в текстовом поле.

<script>
function test()
{
document.getElementById("myTextFieldId").value = "12345";
return true;
}
</script>

0

<form id="form-customer-attr-new" action="" method="get">
<input name="test" id="autocompleteform" type="text" value=""/>
</form>

<script>
$('#form-customer-attr-new').submit(function(e) {
var value = $("#autocompleteform").val();
value = value.substr(0, value.indexOf(' '));

if (!isNaN(value) && value!='') {
$("#autocompleteform").val(value);
alert($("#autocompleteform").val());
return true;
} else {
alert("Invalid Postcode");
return false;
}
});
</script>

0

Пара вещей:

id формы не был установлен, добавьте id = «form-customer-attr-new» в тег формы
isNan должен быть isNaN
!пусто должно быть !!

Теперь это должно работать. полный рабочий пример:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

<script
src="https://code.jquery.com/jquery-3.2.1.min.js"integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="crossorigin="anonymous"></script>
</head>
<body>
<form actions="http://test.com/" method="GET" id="form-customer-attr-new">
<input name="test" id="autocompleteform" type="text"/>
<input type="submit" />
</form>

<script>
$('#form-customer-attr-new').submit(function(e) {
var value = $("#autocompleteform").val();
value = value.substr(0, value.indexOf(' '));if (!isNaN(value) && !!(value)) {
$("#autocompleteform").val(value);
alert($("#autocompleteform").val());
return true;
} else {
alert("Invalid Postcode");
return false;
}
});

</script>
</body>

0

Источник

Accepted Answer

<form action="" id="form_id">
<input type="text" name="change_value" id="change_value">
<input type="text" name="d" id="d">
<input type="submit" name="">

</form>

$("#form_id").on("submit", function (e) {
e.preventDefault();//stop submit event
var self = $(this);//this form
$("#change_value").val("deneme");//change input
$("#form_id").off("submit");//need form submit event off.
self.submit();//submit form
});

2