Question

我有一个HTML表单，其提交按钮是一个输入元素。重定向URL位于输入值中的对象内。我想使用jQuery获取重定向URL，以便我可以修改它。

<input name="input_name" type="hidden" value="{"pageName":"Page Name", "redirectUrl":"www.site.com"}">

Answer 1

我要说实话我从未在值属性中看过一个对象，即使你能做到这一点，我也不相信它是最好的做事方式。

从我在表单提交中看到的内容，您尝试从隐藏字段中获取URL并使用它执行某些操作。

我会考虑将您的HTML重构为一个开头，让您的提交按钮成为一个具有提交类型的实际按钮，并将您的数据放在两个单独的隐藏输入中，其中包含数据内部值。

<form>
  <input type="hidden" name="redirectUrl" value="www.url.com" />
  <input type="hidden" name="pageName" value="page name" />
  <button type="submit">Submit form</button>     
</form>

然后在jQuery中阻止默认提交事件并获取值。

$('form').on('submit', function(e) {
    e.preventDefault()

    const pageName = $(this).find('input[name=pageName]').val()
    const redirectUrl = $(this).find('input[name=redirectUrl]').val()
})

如果您因任何原因需要将按钮保留为输入，请考虑使用data-id重构html

<input 
    type="hidden" 
    name="input_name"
    data-pageName="pageName"
    data-redirectUrl="www.url.com" />

然后在提交处理程序中，您可以像这样访问数据

const hiddenInput = document.querySelector('input[name="input_name"]')
const pageName = hiddenInput.dataset.pageName
const url = hiddenInput.dataset.redirectUrl

Answer 2

＆＃13;

// Get the value and turn the string into an object
var obj = JSON.parse($('input[name="input_name"]').val());

// Now you can access any property
console.log(obj.redirectUrl); // www.site.com

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Notice the single quotes used in value assignment, you've used double quotes -->
<input name="input_name" type="hidden" value='{"pageName":"Page Name", "redirectUrl":"www.site.com"}'>

＆＃13;

Answer 3

在这里，在这种情况下，使用嵌套的单个qoutes和double qoutes的组合。

var redirectUrl = $.parseJSON($("input[name=input_name]").val()).redirectUrl;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input name="input_name" type="hidden" value='{"pageName":"Page Name", "redirectUrl":"www.site.com"}'>

从HTML输入的值获取对象

3 个答案: